{% extends "base.html" %}
{% block head %}
    <link rel="stylesheet"
          href="{{ url_for('static', filename='css/pages/login.css') }}"
          nonce="{{ style_nonce }}" />
{% endblock %}
{% block page %}
    <!-- Content -->
    <!-- Dark Mode Toggle - Enhanced Floating Button -->
    <div class="theme-toggle position-fixed top-0 end-0 p-6"
         style="z-index: 1030">
        <div class="toggle-container d-flex align-items-center theme-toggle-pill p-3 rounded-pill shadow-lg">
            <label class="setting-checkbox-label pe-2 mb-0 fw-bold text-secondary"
                   for="dark-mode-toggle"
                   data-i18n="theme.light">Light</label>
            <div class="form-switch">
                <input id="dark-mode-toggle"
                       name="dark-mode-toggle"
                       class="form-check-input"
                       type="checkbox"
                       role="switch"
                       {% if theme == "dark" %}checked{% endif %} />
            </div>
            <label class="setting-checkbox-label mb-0 fw-bold text-secondary"
                   for="dark-mode-toggle"
                   data-i18n="theme.dark">Dark</label>
        </div>
    </div>
    <!-- /Dark Mode Toggle -->
    <div class="theme-bg-surface">
        <div class="login-background">
            <div class="container-xxl">
                <div class="authentication-wrapper authentication-basic container-p-y">
                    <div class="authentication-inner">
                        <!-- Register -->
                        <div class="card px-sm-6 px-0">
                            <a href="{{ url_for('login') }}">
                                <i class="bx bx-arrow-back me-1"></i>
                                <span data-i18n="link.back_to_login">Back to Login</span></a>
                            <div class="card-body">
                                <!-- Logo -->
                                <div class="app-brand justify-content-center">
                                    <a href="https://www.bunkerweb.io/?utm_campaign=self&utm_source=ui"
                                       target="_blank"
                                       rel="noopener"
                                       class="app-brand-link gap-2">
                                        <span class="app-brand-logo login w-75">
                                            <img class="img-fluid bw-logo-light"
                                                 src="{{ url_for('static', filename='img/logo-menu.png') }}"
                                                 alt="BunkerWeb logo">
                                            <img class="img-fluid bw-logo-dark"
                                                 src="{{ url_for('static', filename='img/logo-menu-white.png') }}"
                                                 alt="BunkerWeb logo">
                                        </span>
                                    </a>
                                </div>
                                <!-- /Logo -->
                                <p class="mb-6" data-i18n="totp.prompt">Please enter your TOTP code.</p>
                                <form id="formAuthentication" class="mb-6" method="POST">
                                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
                                    <input type="hidden"
                                           name="next"
                                           value="{{ request.values.get('next', '') }}" />
                                    <div class="mb-6">
                                        <label class="form-label" for="totp_token" data-i18n="form.label.2fa_code">2FA Code</label>
                                        <div class="input-group input-group-merge">
                                            <input type="text"
                                                   id="totp_token"
                                                   class="form-control"
                                                   name="totp_token"
                                                   placeholder="2FA Code"
                                                   data-i18n="form.placeholder.2fa_code"
                                                   aria-describedby="2FA Code"
                                                   autocomplete="one-time-code"
                                                   required />
                                        </div>
                                    </div>
                                    <div class="mb-6">
                                        <button class="btn btn-primary d-grid w-100 don-jose"
                                                type="submit"
                                                data-i18n="button.submit">Submit</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <!-- /Register -->
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- / Content -->
{% endblock %}