{% extends 'microsys/base.html' %}
{% load static %}
{% block title %}{{ MS_TRANS.2fa_verify_title }}{% endblock %}
{% block extra_head %}
<link rel="stylesheet" href="{% static 'microsys/users/css/login.css' %}">
{% 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 method="post" action="" class="w-100">
            {% csrf_token %}
            
            <div class="form m-0 mx-auto text-center">
                {% if user_methods %}
                    <div class="mb-4 login-2fa-panel">
                        <div class="login-2fa-icon"><i class="bi bi-shield-lock"></i></div>
                        <p class="text-muted small mt-2 mb-3" id="otp-instruction-text">
                            {% if user_methods.totp %}
                                {{ MS_TRANS.2fa_totp_or_email_instruction|default:"Enter your authenticator code. You can request an email code if enabled." }}
                            {% else %}
                                {{ MS_TRANS.2fa_email_request_instruction|default:"Request an email code, then enter it here." }}
                            {% endif %}
                        </p>
                        <div class="d-flex justify-content-center gap-2 flex-wrap">
                            {% if user_methods.email %}
                            <button type="button"
                                    class="btn btn-outline-primary btn-sm rounded-pill"
                                    id="sendEmailOtpBtn"
                                    data-url="{% url 'resend_otp_login' %}"
                                    data-csrf="{{ csrf_token }}"
                                    data-sent-text="{{ MS_TRANS.2fa_email_sent_instruction|default:'Email code sent. Enter the 6-digit code here.' }}"
                                    data-error-text="{{ MS_TRANS.error_generic|default:'Unable to send code' }}">
                                <span class="btn-label"><i class="bi bi-envelope me-1"></i>{{ MS_TRANS.2fa_send_email_code|default:"Send email code" }}</span>
                                <span class="spinner-border spinner-border-sm d-none" aria-hidden="true"></span>
                            </button>
                            {% endif %}
                            {% if user_methods.backup %}
                            <button type="button"
                                    class="btn btn-outline-secondary btn-sm rounded-pill"
                                    id="useBackupCodeBtn"
                                    data-instruction-text="{{ MS_TRANS.2fa_backup_instruction|default:'Enter one of your 8-digit backup codes.' }}">
                                <i class="bi bi-safe me-1"></i>{{ MS_TRANS.2fa_use_backup_code|default:"Use backup code" }}
                            </button>
                            {% endif %}
                        </div>
                    </div>
                {% else %}
                    <p class="text-muted mb-4">{{ MS_TRANS.2fa_verify_desc }}</p>
                {% endif %}

                {% if error_message %}
                    <div class="alert alert-danger" role="alert">
                        <i class="bi bi-exclamation-triangle-fill me-2"></i> {{ error_message }}
                    </div>
                {% endif %}

                <div class="mb-4">
                    <label for="otp_code" class="visually-hidden">{{ MS_TRANS.2fa_code }}</label>
                    <input type="text"
                           class="login-input text-center fw-bold ms-otp-code-input"
                           id="otp_code" 
                           name="otp_code" 
                           placeholder="XXXXXX" 
                           maxlength="8" 
                           autofocus 
                           required>
                </div>
        
                <button type="submit" class="w-100 btn btn-lg mt-4" id="submit">{{ MS_TRANS.2fa_verify_btn }}</button>
                
                <div class="d-flex justify-content-between mt-4">
                    {% if intent == 'login' %}
                        <a href="{% url 'login' %}" class="text-muted text-decoration-none small">{{ MS_TRANS.back_to_login|default:'Back to Login' }}</a>
                    {% else %}
                        <button type="submit" form="resendOtpEnableForm" class="btn btn-link text-muted text-decoration-none small p-0 border-0">{{ MS_TRANS.2fa_resend_btn }}</button>
                        <a href="{% url 'user_profile' %}" class="text-muted text-decoration-none small">{{ MS_TRANS.btn_cancel|default:'Cancel' }}</a>
                    {% endif %}
                </div>
            </div>
        </form>
      </div>
      
      <div class="right d-none d-md-flex">
          <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>

{% if intent == 'login' %}
<form id="resendOtpLoginForm" method="post" action="{% url 'resend_otp_login' %}" class="d-none">
    {% csrf_token %}
</form>
{% else %}
<form id="resendOtpEnableForm" method="post" action="{% url 'resend_otp' intent %}" class="d-none">
    {% csrf_token %}
    <input type="hidden" name="intent" value="{{ intent }}">
</form>
{% endif %}
{% endblock %}

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