{% extends "jobs/base.html" %}
{% block content %}
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-md-5">
            <div class="card border-0 shadow-lg rounded-4 overflow-hidden">
                <div class="card-header bg-success text-white text-center py-4 border-0">
                    <h3 class="fw-bold mb-0">Set New Password</h3>
                    <small class="opacity-75">Ek mazboot password rakhein bhai</small>
                </div>
<div class="card-body p-4 text-center">
    {% if form.errors %}
        <div class="alert alert-danger small py-2 rounded-3 text-start mb-3">
            {% for error in form.non_field_errors %} {{ error }} {% endfor %}
            {% for field in form %}
                {% for error in field.errors %}
                    <strong>{{ field.label }}:</strong> {{ error }}<br>
                {% endfor %}
            {% endfor %}
        </div>
    {% endif %}

    <form method="POST" action="{{ action_url }}">
        {% csrf_token %}
        
        <div class="mb-3 text-start">
            <label class="form-label fw-bold small">New Password</label>
            <div class="input-group shadow-sm rounded-3 overflow-hidden">
                <span class="input-group-text border-0 bg-light"><i class="fas fa-lock text-muted"></i></span>
                <input type="password" name="password1" id="newPass1" class="form-control border-0 bg-light" placeholder="Naya password" required>
                <button class="btn btn-light border-0" type="button" id="togglePassword_1" data-target="newPass1">
                    <i class="fas fa-eye text-muted"></i>
                </button>
            </div>
        </div>

        <div class="mb-4 text-start">
            <label class="form-label fw-bold small">Confirm New Password</label>
            <div class="input-group shadow-sm rounded-3 overflow-hidden">
                <span class="input-group-text border-0 bg-light"><i class="fas fa-lock text-muted"></i></span>
                <input type="password" name="password2" id="newPass2" class="form-control border-0 bg-light" placeholder="Dobara wahi dalo" required>
                <button class="btn btn-light border-0" type="button" id="togglePassword_2" data-target="newPass2">
                    <i class="fas fa-eye text-muted"></i>
                </button>
            </div>
        </div>

        <button type="submit" class="btn btn-warning w-100 fw-bold py-2 rounded-pill shadow text-uppercase">
            Change Password <i class="fas fa-check-circle ms-2"></i>
        </button>
    </form>
</div>            </div>
        </div>
    </div>
</div>
{% endblock %}