@using System.Globalization
@using Microsoft.Extensions.Localization
@inject IStringLocalizer<QRRapidoApp.Resources.SharedResource> Localizer
@inject Microsoft.Extensions.Configuration.IConfiguration Configuration

@{
    var culture = CultureInfo.CurrentUICulture;
    var telegramLang = culture.Name.Replace('-', '_');
    var botUsername = Configuration["Telegram:LoginWidgetBotUsername"] ?? string.Empty;
    var botId = Configuration["Telegram:BotId"] ?? string.Empty;
    var requestAccess = Configuration["Telegram:LoginWidgetRequestAccess"] ?? "write";
}

<div id="telegramFabRoot"
     class="telegram-fab-root"
     data-telegram-lang="@telegramLang"
     data-bot-username="@botUsername"
     data-bot-id="@botId"
     data-request-access="@requestAccess"
     data-status-loading="@Localizer["TelegramPremiumStatusLoading"]"
     data-status-error="@Localizer["TelegramPremiumStatusError"]"
     data-status-connected="@Localizer["TelegramPremiumStatusConnected"]"
     data-status-disconnected="@Localizer["TelegramPremiumStatusDisconnected"]"
     data-link-success="@Localizer["TelegramPremiumLinkSuccess"]"
     data-unlink-success="@Localizer["TelegramPremiumUnlinkSuccess"]"
     data-link-error="@Localizer["TelegramPremiumLinkError"]"
     data-unlink-error="@Localizer["TelegramPremiumUnlinkError"]"
     data-retry-label="@Localizer["TelegramPremiumRetry"]"
     data-open-label="@Localizer["TelegramPremiumOpenTelegram"]"
     data-unlink-label="@Localizer["TelegramPremiumUnlink"]">
    <button id="telegramPremiumFab"
            type="button"
            class="btn btn-primary fab-telegram d-flex align-items-center justify-content-center"
            data-bs-toggle="offcanvas"
            data-bs-target="#telegramPremiumOffcanvas"
            aria-controls="telegramPremiumOffcanvas"
            aria-label="@Localizer["TelegramPremiumHelp"]"
            title="@Localizer["TelegramPremiumHelp"]">
        <i class="fab fa-telegram-plane" aria-hidden="true"></i>
        <span class="visually-hidden">@Localizer["TelegramPremiumHelp"]</span>
    </button>

    <div class="offcanvas offcanvas-end offcanvas-sm-bottom"
         tabindex="-1"
         id="telegramPremiumOffcanvas"
         aria-labelledby="telegramPremiumOffcanvasLabel">
        <div class="offcanvas-header border-bottom">
            <h5 class="offcanvas-title" id="telegramPremiumOffcanvasLabel">@Localizer["TelegramPremiumTitle"]</h5>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="@Localizer["Close"]"></button>
        </div>
        <div class="offcanvas-body">
            <div id="telegramFabAlert" class="alert alert-danger d-none" role="alert"></div>

            <div id="telegramFabLoading" class="d-flex align-items-center gap-2 telegram-fab-loading" role="status">
                <div class="spinner-border spinner-border-sm text-primary" aria-hidden="true"></div>
                <span>@Localizer["TelegramPremiumStatusLoading"]</span>
            </div>

            <div id="telegramFabConnected" class="telegram-fab-connected d-none">
                <p class="mb-3 text-body">@Html.Raw(Localizer["TelegramPremiumStatusConnected", "<span class=\"fw-semibold telegram-fab-username\"></span>"])</p>
                <div class="d-grid gap-2">
                    <button type="button" class="btn btn-success telegram-fab-open">
                        <i class="fab fa-telegram-plane me-2" aria-hidden="true"></i>
                        @Localizer["TelegramPremiumOpenTelegram"]
                    </button>
                    <button type="button" class="btn btn-outline-secondary telegram-fab-unlink">
                        @Localizer["TelegramPremiumUnlink"]
                    </button>
                </div>
            </div>

            <div id="telegramFabDisconnected" class="telegram-fab-disconnected d-none">
                <p class="mb-3 text-body-secondary">@Localizer["TelegramPremiumLoginHint"]</p>
                <div id="telegramLoginWidgetPlaceholder" class="telegram-fab-widget-placeholder">
                    <div class="telegram-fab-widget-skeleton">
                        <div class="placeholder-wave">
                            <span class="placeholder col-8"></span>
                            <span class="placeholder col-6 mt-2"></span>
                        </div>
                    </div>
                </div>
                <div class="d-grid gap-2 mt-3">
                    <button type="button" class="btn btn-outline-primary telegram-fab-retry d-none">
                        @Localizer["TelegramPremiumRetry"]
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div id="telegramFabToasts" class="toast-container position-fixed bottom-0 end-0 p-3">
        <!-- Toasts injected dynamically -->
    </div>
</div>