{% extends 'service_partner_app/base_service_partner.html' %}

{% block title %}Change Password{% endblock %}

{% block content %}
<style>
    .password-page-section {
        background: linear-gradient(180deg, #f8fbff 0%, #eef4f9 100%);
        min-height: 80vh;
    }

    .password-card {
        border: none;
        border-radius: 24px;
        box-shadow: 0 18px 45px rgba(19, 52, 77, 0.10);
        overflow: hidden;
        background: #ffffff;
    }

    .password-card .card-body {
        padding: 2.5rem;
    }

    .password-header {
        text-align: center;
        margin-bottom: 2rem;
    }

    .password-header h2 {
        font-weight: 700;
        color: #163047;
        margin-bottom: 0.5rem;
    }

    .password-header p {
        color: #6c7a89;
        margin-bottom: 0;
        font-size: 0.98rem;
    }

    .form-group-custom {
        margin-bottom: 1.4rem;
    }

    .form-group-custom label {
        display: block;
        font-weight: 600;
        margin-bottom: 0.45rem;
        color: #1d3557;
    }

    .form-group-custom input {
        width: 100%;
        border: 1px solid #d9e2ec;
        border-radius: 14px;
        padding: 0.85rem 1rem;
        font-size: 0.96rem;
        background-color: #fdfefe;
        transition: all 0.2s ease;
    }

    .form-group-custom input:focus {
        outline: none;
        border-color: #4f8cc9;
        box-shadow: 0 0 0 0.2rem rgba(79, 140, 201, 0.15);
        background-color: #fff;
    }

    .helptext {
        display: block;
        margin-top: 0.4rem;
        color: #7b8794;
        font-size: 0.88rem;
    }

    .password-actions {
        margin-top: 1.8rem;
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .btn-password-save {
        background: linear-gradient(135deg, #1d6fa5, #2991d6);
        color: #fff;
        border: none;
        border-radius: 12px;
        padding: 0.8rem 1.4rem;
        font-weight: 600;
    }

    .btn-password-save:hover {
        color: #fff;
    }

    .btn-password-cancel {
        border-radius: 12px;
        padding: 0.8rem 1.4rem;
        font-weight: 600;
    }
</style>

<section class="password-page-section py-5">
    <div class="container">
        <div class="row justify-content-center align-items-center">
            <div class="col-lg-6 col-md-8">
                <div class="card password-card">
                    <div class="card-body">
                        <div class="password-header">
                            <h2>Change Password</h2>
                            <p>Update your service partner account password to keep your account secure.</p>
                        </div>

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

                            {% for field in form %}
                                <div class="form-group-custom">
                                    <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                                    {{ field }}

                                    {% if field.help_text %}
                                        <small class="helptext">{{ field.help_text|safe }}</small>
                                    {% endif %}

                                    {% for error in field.errors %}
                                        <div class="text-danger small mt-1">{{ error }}</div>
                                    {% endfor %}
                                </div>
                            {% endfor %}

                            {% if form.non_field_errors %}
                                <div class="alert alert-danger">
                                    {% for error in form.non_field_errors %}
                                        <div>{{ error }}</div>
                                    {% endfor %}
                                </div>
                            {% endif %}

                            <div class="password-actions">
                                <button type="submit" class="btn btn-password-save">
                                    Update Password
                                </button>
                                <a href="{% url 'service_partner_app:service_partner_profile_page' %}" class="btn btn-outline-secondary btn-password-cancel">
                                    Cancel
                                </a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}