{% extends "base.html" %}
{% load i18n %}
{% load crispy_forms_tags %}

{% block title %}{% trans "Change Phone Number" %}{% endblock %}

{% block content %}
<div class="container py-5">
    <div class="row justify-content-center">

        <div class="col-lg-6 col-md-8">

            <div class="card shadow-lg border-0 rounded-4">

                <div class="card-body p-5">

                    <!-- Header -->
                    <div class="text-center mb-4">

                        <div class="mb-3">
                            <i class="bi bi-phone-fill display-2 text-primary"></i>
                        </div>

                        <h2 class="fw-bold">
                            {% trans "Change Phone Number" %}
                        </h2>

                        <p class="text-muted">
                            {% trans "Update the phone number associated with your account." %}
                        </p>

                    </div>

                    <!-- Current Phone -->
                    {% if phone %}

                    <div class="card bg-light border-0 mb-4">

                        <div class="card-body">

                            <label class="form-label fw-semibold">
                                {% trans "Current Phone Number" %}
                            </label>

                            <input
                                type="tel"
                                class="form-control"
                                value="{{ phone }}"
                                disabled>

                            {% if phone_verified %}

                                <div class="mt-3">

                                    <span class="badge bg-success">

                                        <i class="bi bi-check-circle-fill me-1"></i>

                                        {% trans "Verified" %}

                                    </span>

                                </div>

                            {% else %}

                                <div class="alert alert-warning mt-3 mb-0">

                                    <div class="d-flex justify-content-between align-items-center flex-wrap">

                                        <div>

                                            <i class="bi bi-exclamation-triangle-fill me-2"></i>

                                            {% trans "Your phone number has not yet been verified." %}

                                        </div>

                                        <form id="verify-phone"
                                              method="post"
                                              action="{% url 'account_change_phone' %}"
                                              class="mt-2 mt-md-0">

                                            {% csrf_token %}

                                            <input
                                                type="hidden"
                                                name="action"
                                                value="verify">

                                            <button
                                                class="btn btn-sm btn-outline-warning"
                                                type="submit">

                                                <i class="bi bi-arrow-repeat me-1"></i>

                                                {% trans "Resend Verification" %}

                                            </button>

                                        </form>

                                    </div>

                                </div>

                            {% endif %}

                        </div>

                    </div>

                    {% endif %}

                    <!-- Change Phone Form -->
                    <form method="post"
                          action="{% url 'account_change_phone' %}"
                          novalidate>

                        {% csrf_token %}

                        {{ form|crispy }}

                        <div class="d-grid mt-4">

                            <button
                                type="submit"
                                name="action_add"
                                class="btn btn-primary btn-lg">

                                <i class="bi bi-phone me-2"></i>

                                {% trans "Update Phone Number" %}

                            </button>

                        </div>

                    </form>

                </div>

            </div>

            <!-- Information Card -->
            <div class="card border-0 bg-light mt-4">

                <div class="card-body">

                    <h6 class="fw-semibold">

                        <i class="bi bi-info-circle-fill text-primary me-2"></i>

                        {% trans "Important" %}

                    </h6>

                    <p class="small text-muted mb-0">
                        {% trans "After changing your phone number, you may be required to verify it before it can be used for account recovery, multi-factor authentication (MFA), or receiving security notifications." %}
                    </p>

                </div>

            </div>

        </div>

    </div>
</div>
{% endblock %}