{% 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' %}">
{% if theme %}
<style>
  :root {
    {% if theme.selection_bg %}--selection-bg: {{ theme.selection_bg }} !important;{% endif %}
    {% if theme.selection_moz_bg %}--selection-moz-bg: {{ theme.selection_moz_bg }} !important;{% endif %}
    {% if theme.left_bg %}--left-bg: {{ theme.left_bg }} !important;{% endif %}
    {% if theme.left_shadow %}--left-shadow: {{ theme.left_shadow }} !important;{% endif %}
    {% if theme.right_bg %}--right-bg: {{ theme.right_bg }} !important;{% endif %}
    {% if theme.right_shadow %}--right-shadow: {{ theme.right_shadow }} !important;{% endif %}
    {% if theme.right_text %}--right-text: {{ theme.right_text }} !important;{% endif %}
    {% if theme.label_color %}--label-color: {{ theme.label_color }} !important;{% endif %}
    {% if theme.input_text %}--input-text: {{ theme.input_text }} !important;{% endif %}
    {% if theme.submit_color %}--submit-color: {{ theme.submit_color }} !important;{% endif %}
    {% if theme.submit_focus %}--submit-focus: {{ theme.submit_focus }} !important;{% endif %}
    {% if theme.submit_active %}--submit-active: {{ theme.submit_active }} !important;{% endif %}
    {% if theme.gradient_start %}--gradient-start: {{ theme.gradient_start }} !important;{% endif %}
    {% if theme.gradient_end %}--gradient-end: {{ theme.gradient_end }} !important;{% endif %}
  }
</style>
{% endif %}
{% endblock %}
{% block titlebar %}{% endblock %}

{% block layout %}
<div class="page">
    {% if messages %}
        <div class="alert-container position-absolute top-0 start-0 w-100" style="z-index: 2000;">
            {% for message in messages %}
                <div class="alert alert-{{ message.tags }} text-center h4" style="opacity: 95%;">
                    {{ message }}
                </div>
            {% endfor %}
        </div>
    {% endif %}

    <div class="container">
      <div class="left">
        <div class="d-flex flex-column align-items-center mb-4 d-md-none">
            <div class="logo-frame">
                <img src="{{ APP_CONFIG.login_logo_url|default:APP_CONFIG.logo_url }}" alt="Login Logo" class="logo-img">
            </div>
        </div>
        <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">
                    <label for="username">{{ MS_TRANS.username }}</label>
                    <input type="text" class="login-input" id="username" name="username" autofocus required>
                </div>
        
                <div class="mb-4">
                    <label for="password">{{ MS_TRANS.password }}</label>
                    <input type="password" class="login-input" id="password" name="password" required>
                </div>
        
                <button type="submit" class="w-100 btn btn-lg mt-4" id="submit">{{ MS_TRANS.login_submit }}</button>
                
                <!-- Mobile Language Toggle (Below Button) -->
                <div class="d-flex justify-content-center mt-4 d-md-none">
                    <div class="lang-toggle-container">
                        <a href="?lang=en" class="lang-option {% if request.session.lang == 'en' %}active{% endif %}">EN</a>
                        <a href="?lang=ar" class="lang-option {% if not request.session.lang or request.session.lang == 'ar' %}active{% endif %}">ع</a>
                    </div>
                </div>
            </div>
        </form>
      </div>
      
      <!-- Removed position-relative to preserve absolute positioning defined in CSS -->
      <div class="right d-none d-md-flex">
          <!-- Desktop Language Toggle -->
          <div class="lang-toggle-container desktop-lang-toggle">
                <a href="?lang=en" class="lang-option {% if request.session.lang == 'en' %}active{% endif %}">EN</a>
                <a href="?lang=ar" class="lang-option {% if not request.session.lang or request.session.lang == 'ar' %}active{% endif %}">ع</a>
          </div>

          <div class="logo-frame">
            <img src="{{ APP_CONFIG.login_logo_url|default:APP_CONFIG.logo_url }}" alt="Login Logo" class="logo-img">
          </div>
      </div>
    </div>
</div>
{% endblock %}

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