{% extends 'base.html' %}
{% load i18n static %}

{% block title %}{% trans "Verify Account" %}{% endblock %}

{% block content %}
<div class="container hero-section">
    <div class="row justify-content-center">
        <div class="col-lg-6">
            <div class="glass-card">
                <h2 class="text-center mb-4 text-primary">{% trans "Account Verification" %}</h2>
                
                {% if error %}
                <div class="alert alert-danger">
                    {{ error }}
                </div>
                {% endif %}

                <p class="text-muted text-center mb-4">
                    {% trans "We have sent verification codes to your mobile number and email address. Please enter them below." %}
                </p>

                <form method="post">
                    {% csrf_token %}
                    
                    <div class="mb-3">
                        <label class="form-label">{% trans "Mobile Verification Code" %}</label>
                        <input type="text" name="mobile_otp" class="form-control" placeholder="6-digit code" {% if student.is_mobile_verified %}value="Verified" disabled{% endif %} required>
                        {% if student.is_mobile_verified %}
                            <small class="text-success"><i class="fas fa-check-circle"></i> {% trans "Mobile Verified" %}</small>
                        {% else %}
                            <small class="text-muted">{% trans "Sent to" %} {{ student.mobile_number }}</small>
                        {% endif %}
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">{% trans "Email Verification Code" %}</label>
                        <input type="text" name="email_otp" class="form-control" placeholder="6-digit code" {% if student.is_email_verified %}value="Verified" disabled{% endif %} required>
                         {% if student.is_email_verified %}
                            <small class="text-success"><i class="fas fa-check-circle"></i> {% trans "Email Verified" %}</small>
                        {% else %}
                            <small class="text-muted">{% trans "Sent to" %} {{ student.user.email }}</small>
                        {% endif %}
                    </div>

                    <button type="submit" class="btn btn-success w-100 py-2 fs-5">{% trans "Verify" %}</button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}
