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

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

{% block extra_css %}
<style>
    .change-password-card {
        border-radius: 40px;
        border: none;
        background: #ffffff;
        box-shadow: 0 30px 50px -20px rgba(0, 0, 0, 0.2);
        overflow: hidden;
    }
    .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-color: #2c7a4d !important;
        border: none !important;
        border-radius: 60px !important;
        padding: 0.75rem 2rem !important;
        font-weight: 700 !important;
        font-size: 1rem !important;
        color: white !important;
        letter-spacing: 0.3px;
        box-shadow: 0 4px 12px rgba(44, 122, 77, 0.4) !important;
        transition: all 0.25s ease;
    }
    .btn-save:hover {
        background-color: #1f5a38 !important;
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(44, 122, 77, 0.5) !important;
    }
    .btn-save i {
        margin-right: 8px;
    }
    .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;
    }
    .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;
    }
    .help-text {
        font-size: 0.75rem;
        color: #6c757d;
        margin-top: 0.25rem;
        margin-left: 0.5rem;
    }
</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-password-card">
                    <div class="card-body p-4 p-lg-5">
                        
                        <div class="text-center mb-3">
                            <div class="section-badge">🔐 Security</div>
                            <h2 class="fw-bold mt-2">Change Password</h2>
                            <p class="text-muted">Set a new, strong password for your affiliate account.</p>
                        </div>

                        <hr class="my-4">

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

                            <!-- Render each field manually for better control -->
                            <div class="mb-4 form-floating-icon">
                                <i class="bi bi-lock-fill"></i>
                                <label class="form-label fw-semibold ms-3 mb-1" for="id_old_password">Current Password</label>
                                <input type="password" name="old_password" id="id_old_password" class="form-control" placeholder="Enter current password" required>
                                {% if form.old_password.errors %}
                                    <div class="text-danger small mt-1"><i class="bi bi-exclamation-triangle-fill me-1"></i>{{ form.old_password.errors.0 }}</div>
                                {% endif %}
                            </div>

                            <div class="mb-4 form-floating-icon">
                                <i class="bi bi-key-fill"></i>
                                <label class="form-label fw-semibold ms-3 mb-1" for="id_new_password1">New Password</label>
                                <input type="password" name="new_password1" id="id_new_password1" class="form-control" placeholder="Enter new password" required>
                                {% if form.new_password1.errors %}
                                    <div class="text-danger small mt-1"><i class="bi bi-exclamation-triangle-fill me-1"></i>{{ form.new_password1.errors.0 }}</div>
                                {% endif %}
                                <div class="help-text">
                                    Your password must contain at least 8 characters and cannot be too common.
                                </div>
                            </div>

                            <div class="mb-4 form-floating-icon">
                                <i class="bi bi-check-circle-fill"></i>
                                <label class="form-label fw-semibold ms-3 mb-1" for="id_new_password2">Confirm New Password</label>
                                <input type="password" name="new_password2" id="id_new_password2" class="form-control" placeholder="Confirm new password" required>
                                {% if form.new_password2.errors %}
                                    <div class="text-danger small mt-1"><i class="bi bi-exclamation-triangle-fill me-1"></i>{{ form.new_password2.errors.0 }}</div>
                                {% endif %}
                            </div>

                            <div class="d-flex flex-wrap gap-3 justify-content-between align-items-center mt-4 pt-2">
                                <button type="submit" 
                                        style="background-color: #2c7a4d !important; border: none !important; border-radius: 60px !important; padding: 0.75rem 2rem !important; font-weight: 700 !important; font-size: 1rem !important; color: white !important; box-shadow: 0 4px 12px rgba(44,122,77,0.4) !important; transition: all 0.25s ease;">
                                    <i class="bi bi-check-lg"></i> Update Password
                                </button>
                                <a href="{% url 'affiliates_app:affiliate_profile' %}" 
                                style="background: transparent !important; border: 2px solid #cbd5e1 !important; border-radius: 60px !important; color: #475569 !important; font-weight: 500; padding: 0.6rem 1.5rem; text-decoration: none; transition: all 0.2s;"
                                onmouseover="this.style.backgroundColor='#f1f5f9'; this.style.borderColor='#94a3b8'; this.style.color='#1e293b';"
                                onmouseout="this.style.backgroundColor='transparent'; this.style.borderColor='#cbd5e1'; this.style.color='#475569';">
                                    <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 %}