{% extends base_template %}

{% block title %}Update Password | ChatLab{% endblock %}

{% block workspace %}
<div class="glass-card" style="max-width: 500px; margin: 2rem auto; padding: 2.25rem;">
    {% if messages %}
        <div style="margin-bottom: 1.5rem; display: flex; flex-direction: column; gap: 8px;">
            {% for message in messages %}
                <div style="padding: 10px 14px; background: var(--bg-card); border: 1px solid var(--border-color); border-left: 4px solid {% if message.tags == 'success' %}var(--success-green){% else %}var(--danger-red){% endif %}; display: flex; justify-content: space-between; align-items: center; border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,0.05);">
                    <span style="font-size: 13.5px; color: var(--text-primary); font-weight: 500;">{{ message }}</span>
                    <button onclick="this.parentElement.remove()" style="background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 16px; line-height: 1;">&times;</button>
                </div>
            {% endfor %}
        </div>
    {% endif %}

    <form method="post" style="display: flex; flex-direction: column; gap: 1.5rem;">
        {% csrf_token %}
        
        <div style="display: flex; flex-direction: column; gap: 0.5rem;">
            <label for="old_password" style="font-weight: 600; font-size: 0.9rem; color: var(--text-primary);">Current Password</label>
            <input type="password" name="old_password" id="old_password" class="form-input" placeholder="Enter current password" required autocomplete="current-password" style="border-radius: 8px;">
        </div>

        <div style="display: flex; flex-direction: column; gap: 0.5rem;">
            <label for="new_password" style="font-weight: 600; font-size: 0.9rem; color: var(--text-primary);">New Password</label>
            <input type="password" name="new_password" id="new_password" class="form-input" placeholder="Enter new password" required autocomplete="new-password" style="border-radius: 8px;">
        </div>

        <div style="display: flex; flex-direction: column; gap: 0.5rem;">
            <label for="confirm_password" style="font-weight: 600; font-size: 0.9rem; color: var(--text-primary);">Confirm New Password</label>
            <input type="password" name="confirm_password" id="confirm_password" class="form-input" placeholder="Confirm new password" required autocomplete="new-password" style="border-radius: 8px;">
        </div>

        <div style="display: flex; gap: 1rem; margin-top: 0.75rem;">
            <button type="submit" class="btn btn-primary" style="flex: 1; border-radius: 20px; padding: 10px; font-weight: 600;">Update Password</button>
            {% if request.user.role == 'SUPERUSER' or request.user.is_superuser %}
                <a href="{% url 'superuser_dashboard' %}" class="btn btn-secondary" style="flex: 1; border-radius: 20px; padding: 10px; font-weight: 600; text-align: center;">Cancel</a>
            {% elif request.user.role == 'ADMIN' %}
                <a href="{% url 'admin_dashboard' %}" class="btn btn-secondary" style="flex: 1; border-radius: 20px; padding: 10px; font-weight: 600; text-align: center;">Cancel</a>
            {% else %}
                <a href="{% url 'agent_dashboard' %}" class="btn btn-secondary" style="flex: 1; border-radius: 20px; padding: 10px; font-weight: 600; text-align: center;">Cancel</a>
            {% endif %}
        </div>
    </form>
</div>
{% endblock %}