{% extends "base.html" %}

{% block title %}Change password – Yaris OBD Remote{% endblock %}

{% block content %}
<h3 class="text-dark mb-3 fw-bold">Change password</h3>

<div class="row justify-content-center">
    <div class="col-12 col-md-6 col-lg-4">
        <div class="card shadow-sm">
            <div class="card-body p-4">
                {% with messages = get_flashed_messages(with_categories=true) %}
                {% if messages %}
                    {% for category, message in messages %}
                    <div class="alert alert-{{ 'success' if category == 'success' else 'danger' }} py-2 small" role="alert">
                        {{ message }}
                    </div>
                    {% endfor %}
                {% endif %}
                {% endwith %}
                <form method="post" action="{{ url_for('change_password') }}">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                    <div class="mb-3">
                        <label for="current_password" class="form-label small fw-semibold">Current password</label>
                        <input type="password" class="form-control" id="current_password" name="current_password"
                               autocomplete="current-password" required>
                    </div>
                    <div class="mb-3">
                        <label for="new_password" class="form-label small fw-semibold">New password</label>
                        <input type="password" class="form-control" id="new_password" name="new_password"
                               autocomplete="new-password" required minlength="8">
                    </div>
                    <div class="mb-3">
                        <label for="confirm_password" class="form-label small fw-semibold">Confirm new password</label>
                        <input type="password" class="form-control" id="confirm_password" name="confirm_password"
                               autocomplete="new-password" required minlength="8">
                    </div>
                    <div class="d-flex gap-2">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-key me-1"></i> Update password
                        </button>
                        <a href="{{ url_for('portal_index') }}" class="btn btn-outline-secondary">Cancel</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}