{% extends ac_layout %}
{% block content %}
{% load static %}
<div class="container mt-5 px-lg-5">
    <div class="card shadow-2 h-100 mb-3">
        <div class="card-body text-start">
            <h5 class="mb-0">{{ _('profile_information') }}</h5>
            <p><small>{{ _('profile_information_note') }}</small></p>
            <form class="ajaxForm" style="max-width: 35rem;" method="post"
                  action="{% url '__account_profile_edit' %}">
                {% csrf_token %}
                <div data-mdb-input-init class="form-outline mb-4">
                    <input type="text" id="{{ profile_form.first_name.name }}" class="form-control mb-2"
                           name="{{ profile_form.first_name.name }}" value="{{ user.first_name }}"/>
                    <label class="form-label" for="{{ profile_form.first_name.name }}">
                        {{ profile_form.first_name.name|title }}
                    </label>
                </div>
                <div data-mdb-input-init class="form-outline mb-4">
                    <input type="text" id="{{ profile_form.last_name.name }}" class="form-control  mb-2"
                           name="{{ profile_form.last_name.name }}" value="{{ user.last_name }}"/>
                    <label class="form-label" for="{{ profile_form.last_name.name }}">
                        {{ profile_form.last_name.name|title }}
                    </label>
                </div>
                <p class="my-0 py-0">
                    <small class="text-danger">Note:</small>
                    <small class="text-secondary"> {{ _('email_can_only_be_change_once') }}.</small>
                </p>
                <div data-mdb-input-init class="form-outline mb-4 max-w-50  ">
                    <input type="text" id="{{ profile_form.email.name }}" class="form-control  mb-2"
                           name="{{ profile_form.email.name }}" value="{{ user.email }}"/>
                    <label class="form-label" for="{{ profile_form.email.name }}">
                        {{ profile_form.email.name|title }}
                    </label>
                </div>
                <button type="submit" class="btn btn-sm btn-info" data-mdb-ripple-init>{{ _('update') }}</button>
            </form>
        </div>
    </div>
    <div class="card shadow-2 h-100 mb-3">
        <div class="card-body text-start">
            <h5>{{ _('update_password') }}</h5>
            <p><small>{{ _('update_password_note') }}</small></p>
            <form class="ajaxForm" style="max-width: 35rem;" method="post"
                  action="{% url '__account_password_edit' %}">
                {% csrf_token %}
                <div data-mdb-input-init class="form-outline mb-4">
                    <input type="text" id="{{ password_change_form.old_password.name }}" class="form-control mb-2"
                           name="{{ password_change_form.old_password.name }}"/>
                    <label class="form-label" for="{{ password_change_form.old_password.name }}">
                        {{ password_change_form.old_password.name|title }}
                    </label>
                </div>
                <div data-mdb-input-init class="form-outline mb-4">
                    <input type="password" id="{{ password_change_form.new_password1.name }}" class="form-control  mb-2"
                           name="{{ password_change_form.new_password1.name }}"/>
                    <label class="form-label" for="{{ password_change_form.new_password1.name }}">
                        {{ password_change_form.new_password1.name|title }}
                    </label>
                </div>
                <div data-mdb-input-init class="form-outline mb-4 max-w-50  ">
                    <input type="password" id="{{ password_change_form.new_password2.name }}" class="form-control  mb-2"
                           name="{{ password_change_form.new_password2.name }}"/>
                    <label class="form-label" for="{{ password_change_form.new_password2.name }}">
                        {{ password_change_form.new_password2.name|title }}
                    </label>
                </div>
                <button type="submit" class="btn btn-sm btn-info" data-mdb-ripple-init>{{ _('update') }}</button>
            </form>
        </div>
    </div>
    <div class="card shadow-2 h-100 mb-3">
        <div class="card-body text-start">
            <h5 class="fs-4 fw-normal">{{ _('delete_account') }}</h5>
            <!-- Once your account is deleted, all of its resources and data will be permanently deleted. Before deleting your account, please download any data or information that you wish to retain.-->
            <p><small>{{ _('delete_account_note') }}</small></p>
            <button class="btn btn-danger mt-3">{{ _('delete_account') }}</button>
        </div>
    </div>
</div>
{% endblock %}