{% extends 'microsys/base.html' %}
{% load static %}
{% block title %}{{ MS_TRANS.login }}{% endblock %}
{% block extra_head %}
<link rel="stylesheet" href="{% static 'microsys/users/css/login.css' %}?v={% now 'U' %}">
{% if theme %}
{{ theme|json_script:"login-theme-data" }}
{% endif %}
{% endblock %}
{% block titlebar %}{% endblock %}

{% block layout %}
{% with lc=login_config|default:APP_CONFIG.login %}
{% with ls=lc.style|default:"split" lt=lc.logo_treatment|default:"none" lts=lc.logo_treatment_shape|default:"soft" lbc=lc.banner_color|default:"" sl=lc.show_logo %}
{% if messages %}<div class="alert-container position-absolute top-0 start-0 w-100 ms-page-alert-container">{% for message in messages %}<div class="alert alert-{{ message.tags }} text-center h4 ms-page-alert">{{ message }}</div>{% endfor %}</div>{% endif %}
{% if form.non_field_errors %}<div class="ms-login-error-float shake-trigger">{% for error in form.non_field_errors %}<div class="alert alert-danger d-flex align-items-center gap-2 m-0 h4"><i class="bi bi-exclamation-triangle-fill"></i><span>{{ error }}</span></div>{% endfor %}</div>{% endif %}
<div class="page ms-login--{{ ls }}">
    {% if language_picker_enabled %}
    <div class="lang-toggle-container desktop-lang-toggle ms-login-lang-toggle d-none d-md-flex">
        {% for code, meta in LANGUAGES.items %}
        <a href="?lang={{ code }}" class="lang-option {% if CURRENT_LANG == code %}active{% endif %}">{{ meta.label|default:code|upper }}</a>
        {% endfor %}
    </div>
    {% endif %}
    <div class="container">
      <div class="left">
        {% if sl %}
        {# Mobile: shown for all styles. Desktop: shown only for fullpage (logo sits above the form). #}
        <div class="d-flex flex-column align-items-center mb-4 ms-login-form-logo {% if ls != 'fullpage' %}d-md-none{% endif %}">
            <div class="logo-frame" data-login-logo-treatment="{{ lt }}" data-login-logo-treatment-shape="{{ lts }}">
                <img src="{{ APP_CONFIG.login_logo_url|default:APP_CONFIG.logo_url }}" alt="{{ MS_TRANS.login_logo_alt }}" class="logo-img">
            </div>
        </div>
        {% endif %}
        <form action="{% url 'login' %}" method="POST" class="w-100">
            {% csrf_token %}
            {% if next %}
                <input type="hidden" name="next" value="{{ next }}">
            {% endif %}

            <div class="form m-0 mx-auto">
                <div class="mb-4 position-relative">
                    <label for="username">{{ MS_TRANS.username }}</label>
                    <input type="text" class="login-input {% if form.username.errors %}is-invalid{% endif %}" id="username" name="username" autofocus required value="{{ form.username.value|default:'' }}">
                    {% if form.username.errors %}
                        <div class="invalid-feedback d-block">
                            {% for error in form.username.errors %}{{ error }}{% endfor %}
                        </div>
                    {% endif %}
                </div>

                <div class="mb-4 position-relative">
                    <label for="password">{{ MS_TRANS.password }}</label>
                    <input type="password" class="login-input {% if form.password.errors %}is-invalid{% endif %}" id="password" name="password" required>
                    {% if form.password.errors %}
                        <div class="invalid-feedback d-block">
                            {% for error in form.password.errors %}{{ error }}{% endfor %}
                        </div>
                    {% endif %}
                </div>

                <button type="submit" class="w-100 btn btn-lg mt-4" id="submit">{{ MS_TRANS.login_submit }}</button>
                {% if public_registration_enabled %}
                    <div class="login-register-action mt-3">
                        <a href="{% url 'register' %}" class="login-register-link">
                            <i class="bi bi-person-plus"></i>
                            <span>{{ MS_TRANS.create_account|default:"Create an account" }}</span>
                        </a>
                    </div>
                {% endif %}

                {% if language_picker_enabled %}
                <!-- Mobile Language Toggle (Below Button) -->
                <div class="d-flex justify-content-center mt-4 d-md-none">
                    <div class="lang-toggle-container">
                        {% for code, meta in LANGUAGES.items %}
                        <a href="?lang={{ code }}" class="lang-option {% if CURRENT_LANG == code %}active{% endif %}">{{ meta.label|default:code|upper }}</a>
                        {% endfor %}
                    </div>
                </div>
                {% endif %}
            </div>
        </form>
      </div>

      <div class="right d-none d-md-flex" data-login-logo-treatment="{{ lt }}" data-login-logo-treatment-shape="{{ lts }}"{% if lbc %} style="--login-banner-color: {{ lbc }}; background: {{ lbc }};"{% endif %}>
          {% if ls == 'fullpage' %}
          <div class="ms-login-hero">
            <div class="ms-login-hero__body" data-ms-login-hero="{{ login_hero_message }}"></div>
          </div>
          {% elif sl %}
          <div class="logo-frame" data-login-logo-treatment="{{ lt }}" data-login-logo-treatment-shape="{{ lts }}">
            <img src="{{ APP_CONFIG.login_logo_url|default:APP_CONFIG.logo_url }}" alt="{{ MS_TRANS.login_logo_alt }}" class="logo-img">
          </div>
          {% endif %}
      </div>
    </div>
</div>
{% endwith %}
{% endwith %}
{% endblock %}

{% block scripts %}
<script src="{% static 'microsys/users/js/login.js' %}?v={% now 'U' %}" nonce="{{ request.csp_nonce }}"></script>
{% endblock %}