{% extends "base_template.html" %}

{% block title %}{{ _('My account') }}{% endblock %}

{% block breadcrumb %}
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        {% if panel_url %}<li class="breadcrumb-item"><a href="{{ panel_url }}">{{ _('Admin') }}</a></li>{% endif %}
        <li class="breadcrumb-item active">{{ _('My account') }}</li>
    </ol>
</nav>
{% endblock %}

{% block content %}

<h1 class="h2 mb-4"><b>{{ _('My account') }}</b></h1>

{% with messages = get_flashed_messages(with_categories=true) %}
    {% for category, message in messages %}
        <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
            {{ message }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    {% endfor %}
{% endwith %}

<form method="post" novalidate>
    {{ form.hidden_tag() }}

    <div class="row">
        <div class="col-md-6 mb-3">
            {{ form.email.label(class="form-label fw-semibold") }}
            {{ form.email(class="form-control", autocomplete="username") }}
            {% for error in form.email.errors %}<div class="text-danger small">{{ error }}</div>{% endfor %}
            <div class="form-text">{{ _('The address you sign in with.') }}</div>
        </div>
    </div>

    <h2 class="h5 mt-4 mb-3">{{ _('Change your password') }}</h2>

    <div class="row">
        <div class="col-md-4 mb-3">
            {{ form.current_password.label(class="form-label fw-semibold") }}
            {{ form.current_password(class="form-control", autocomplete="current-password") }}
            <div class="form-text">{{ form.current_password.description }}</div>
            {% for error in form.current_password.errors %}<div class="text-danger small">{{ error }}</div>{% endfor %}
        </div>
        <div class="col-md-4 mb-3">
            {{ form.new_password.label(class="form-label fw-semibold") }}
            {{ form.new_password(class="form-control", autocomplete="new-password") }}
            <div class="form-text">{{ form.new_password.description }}</div>
            {% for error in form.new_password.errors %}<div class="text-danger small">{{ error }}</div>{% endfor %}
        </div>
        <div class="col-md-4 mb-3">
            {{ form.confirm_password.label(class="form-label fw-semibold") }}
            {{ form.confirm_password(class="form-control", autocomplete="new-password") }}
            {% for error in form.confirm_password.errors %}<div class="text-danger small">{{ error }}</div>{% endfor %}
        </div>
    </div>

    <div class="mt-3">
        {{ form.submit(class="btn btn-primary") }}
    </div>
</form>

{% endblock %}