{% extends 'affiliates_app/base_affiliate.html' %}
{% load static %}

{% block title %}Change Username | Affiliate Profile{% endblock %}

{% block extra_css %}
<style>
    .change-username-card {
        border-radius: 40px;
        border: none;
        background: #ffffff;
        box-shadow: 0 30px 50px -20px rgba(0, 0, 0, 0.2);
        overflow: hidden;
        transition: transform 0.2s;
    }
    .form-floating-icon {
        position: relative;
    }
    .form-floating-icon i {
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        color: #2c7a4d;
        font-size: 1.2rem;
        z-index: 2;
    }
    .form-control {
        border-radius: 60px;
        border: 1px solid #e2e8f0;
        padding: 0.8rem 1rem 0.8rem 2.8rem;
        transition: all 0.2s;
        background: #fefefe;
    }
    .form-control:focus {
        border-color: #0f766e;
        box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.12);
        background: white;
    }
    .btn-save {
        background: linear-gradient(105deg, #2c7a4d 0%, #1f5f3a 100%);
        border: none;
        border-radius: 60px;
        padding: 0.75rem 2rem;
        font-weight: 700;
        font-size: 1rem;
        letter-spacing: 0.3px;
        box-shadow: 0 4px 12px rgba(44, 122, 77, 0.3);
        transition: all 0.25s;
    }
    .btn-save:hover {
        background: linear-gradient(105deg, #1f5f3a 0%, #154d2c 100%);
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(44, 122, 77, 0.4);
    }
    .btn-save i {
        margin-right: 8px;
        font-size: 1.1rem;
    }
    .btn-outline-cancel {
        border-radius: 60px;
        padding: 0.65rem 1.8rem;
        border: 1.5px solid #cbd5e1;
        color: #475569;
        font-weight: 500;
        transition: all 0.2s;
    }
    .btn-outline-cancel:hover {
        background: #f1f5f9;
        border-color: #94a3b8;
    }
    .section-badge {
        display: inline-block;
        background: #ecfdf5;
        color: #065f46;
        font-size: 0.7rem;
        font-weight: 700;
        padding: 4px 12px;
        border-radius: 40px;
        margin-bottom: 1rem;
    }
    hr {
        background: #e2eddf;
        opacity: 0.6;
    }

    .btn-outline-cancel {
        background: transparent !important;
        border: 2px solid #cbd5e1 !important;
        border-radius: 60px !important;
        color: #475569 !important;
        font-weight: 500;
        padding: 0.6rem 1.5rem;
        transition: all 0.2s;
    }
    .btn-outline-cancel:hover {
        background-color: #f1f5f9 !important;
        border-color: #94a3b8 !important;
        color: #1e293b !important;
    }

</style>
{% endblock %}

{% block content %}
<section class="py-5" style="background: linear-gradient(145deg, #ecfdf3 0%, #ffffff 100%); min-height: 80vh;">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-6">
                <div class="card border-0 shadow-lg change-username-card">
                    <div class="card-body p-4 p-lg-5">
                        
                        <!-- header with badge -->
                        <div class="text-center mb-3">
                            <div class="section-badge">🔐 Account Security</div>
                            <h2 class="fw-bold mt-2">Change Username</h2>
                            <p class="text-muted">Pick a new, unique username for your affiliate account.</p>
                        </div>

                        <hr class="my-4">

                        <form method="post">
                            {% csrf_token %}

                            {% for field in form %}
                                <div class="mb-4 form-floating-icon">
                                    {% if field.name == 'new_username' %}
                                        <i class="bi bi-person-fill"></i>
                                    {% elif field.name == 'password' %}
                                        <i class="bi bi-lock-fill"></i>
                                    {% else %}
                                        <i class="bi bi-pencil-fill"></i>
                                    {% endif %}
                                    <label class="form-label fw-semibold ms-3 mb-1" for="{{ field.id_for_label }}">{{ field.label }}</label>
                                    {{ field }}
                                    {% if field.help_text %}
                                        <small class="text-muted d-block mt-1">{{ field.help_text }}</small>
                                    {% endif %}
                                    {% for error in field.errors %}
                                        <div class="text-danger small mt-1"><i class="bi bi-exclamation-triangle-fill me-1"></i>{{ error }}</div>
                                    {% endfor %}
                                </div>
                            {% endfor %}

                            <div class="d-flex flex-wrap gap-3 justify-content-between align-items-center mt-4 pt-2">
                                <button type="submit" class="btn px-5 py-2" style="background-color: #2c7a4d !important; border: none !important; border-radius: 60px !important; color: white !important; font-weight: 700; box-shadow: 0 4px 12px rgba(44,122,77,0.4);">
                                    <i class="bi bi-check-lg"></i> Update Username
                                </button>
                                <a href="{% url 'affiliates_app:affiliate_profile' %}" 
                                class="btn px-4 py-2" 
                                style="background: transparent; border: 2px solid #cbd5e1; border-radius: 60px; color: #475569; font-weight: 500; transition: all 0.2s;"
                                onmouseover="this.style.backgroundColor='#f1f5f9'; this.style.borderColor='#94a3b8';"
                                onmouseout="this.style.backgroundColor='transparent'; this.style.borderColor='#cbd5e1';">
                                    <i class="bi bi-arrow-left me-1"></i> Cancel
                                </a>
                            </div>

                            {% if form.non_field_errors %}
                                <div class="alert alert-danger mt-4 mb-0 rounded-4">
                                    <i class="bi bi-exclamation-octagon-fill me-2"></i>
                                    {% for error in form.non_field_errors %}
                                        <div>{{ error }}</div>
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}