{% from 'macros/docs_link.html' import docs_url %}
{% extends "base.html" %}
{% block head %}
    <link rel="stylesheet"
          href="{{ url_for('static', filename='css/pages/login.css') }}"
          nonce="{{ style_nonce }}" />
{% endblock %}
{% block page %}
    <!-- Content -->
    <div class="position-fixed top-0 end-0 m-5 me-7" style="z-index: 1030">
        <div class="d-flex justify-content-end align-items-center">
            <!-- Language Selector -->
            <div class="me-3">{% include "language-selector.html" %}</div>
            <!-- Theme Toggle -->
            <div class="toggle-container d-flex align-items-center bg-{% if theme == 'light' %}white{% else %}dark{% endif %} 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>
    </div>
    <div class="bg-light-subtle">
        <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">
                            <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-50">
                                            <img class="img-fluid"
                                                 src="{% if theme == 'light' %}{{ url_for('static', filename='img/logo-menu.png') }}{% else %}{{ url_for('static', filename='img/logo-menu-white.png') }}{% endif %}"
                                                 alt="BunkerWeb logo">
                                        </span>
                                    </a>
                                </div>
                                <!-- /Logo -->
                                <form method="POST">
                                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
                                    <input type="hidden"
                                           name="next"
                                           value="{{ request.values.get('next', '') }}" />
                                    <input type="hidden" name="theme" value="light" />
                                    <input type="hidden" name="language" value="en" />
                                    <div class="mb-6">
                                        <label for="username" class="form-label" data-i18n="form.label.username">Username</label>
                                        <input type="text"
                                               class="form-control"
                                               id="username"
                                               name="username"
                                               placeholder="Enter your username"
                                               data-i18n="form.placeholder.enter_username"
                                               autofocus
                                               required />
                                    </div>
                                    <div class="mb-6 form-password-toggle">
                                        <label class="form-label" for="password" data-i18n="form.label.password">Password</label>
                                        <div class="input-group input-group-merge">
                                            <input type="password"
                                                   id="password"
                                                   class="form-control"
                                                   name="password"
                                                   placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"
                                                   aria-describedby="password"
                                                   required />
                                            <span class="input-group-text cursor-pointer"><i class="bx bx-hide"></i></span>
                                        </div>
                                    </div>
                                    <div class="mb-8">
                                        <div class="d-flex justify-content-between mt-8">
                                            <div class="form-check mb-0 ms-2">
                                                <input class="form-check-input"
                                                       type="checkbox"
                                                       id="remember-me"
                                                       name="remember-me" />
                                                <label class="form-check-label"
                                                       for="remember-me"
                                                       data-i18n="form.checkbox.remember_me">Remember Me</label>
                                            </div>
                                            <a href="{{ docs_url('/troubleshooting', '#__tabbed_6_2') }}"
                                               target="_blank"
                                               rel="noopener"
                                               class="docs-link"
                                               data-endpoint="/troubleshooting"
                                               data-fragment="#__tabbed_6_2">
                                                <span data-i18n="link.forgot_password">Forgot Password?</span>
                                            </a>
                                        </div>
                                    </div>
                                    <div class="mb-6">
                                        <button class="btn btn-primary d-grid w-100 don-jose"
                                                type="submit"
                                                data-i18n="button.login">Login</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <!-- /Register -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- / Content -->
{% endblock %}