{% 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 %}
{{ theme|json_script:"login-theme-data" }}
{% endif %}
{% endblock %}
{% block titlebar %}{% endblock %}

{% block layout %}
<div class="page">
    {% 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 %}

    <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>
                {% 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 %}
                
                <!-- 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 %}