{% extends "_base.html" %}
{% load i18n %}
{% block content %}
    {% load static %}
    {% load widget_tweaks %}
    <h1 class="heading">
        {% translate "My Account Settings" %}
    </h1>
    <div class="flex flex-wrap mt-4">
        <div class="flex flex-wrap w-full xl:w-1/2 xl:pr-4">
            <div class="w-full mb-4 rounded border border-solid border-blue-500 shadow-2xl bg-white">
                <div class="w-full p-4 rounded bg-water-500">
                    <h3 class="font-bold text-black">
                        <i icon-name="flag" class="mr-2"></i> {% translate "My Language Preference" %}
                    </h3>
                </div>
                <div class="px-4 pb-4">
                    <form action="{% url 'i18n:set_language' %}" method="post" class="w-full">
                        {% csrf_token %}
                        <input name="next" type="hidden" value="{{ redirect_to }}" />
                        <label for="language">
                            {% translate "Choose language:" %}
                        </label>
                        <div class="mb-2">
                            {% translate "This setting only affects this device." %}
                        </div>
                        <select name="language">
                            {% get_current_language as LANGUAGE_CODE %}
                            {% get_available_languages as LANGUAGES %}
                            {% for language_slug, language_name in LANGUAGES %}
                                <option value="{{ language_slug }}"
                                        {% if language_slug == LANGUAGE_CODE %}selected{% endif %}>
                                    {{ language_slug|language_name_local }}
                                </option>
                            {% endfor %}
                        </select>
                        <button class="btn mt-4">
                            {% translate "Change language" %}
                        </button>
                    </form>
                </div>
            </div>
        </div>
        <div class="w-full xl:w-1/2">
            <div class="w-full mb-4 rounded border border-solid border-blue-500 shadow-2xl bg-white">
                <div class="w-full p-4 rounded bg-water-500">
                    <h3 class="font-bold text-black">
                        <i icon-name="user" class="mr-2"></i> {% translate "My Username and Name" %}
                    </h3>
                </div>
                <div class="px-4 pb-4">
                    <form method="post">
                        {% csrf_token %}
                        <label for="{{ user_name_form.username.id_for_label }}">
                            {{ user_name_form.username.label }}
                        </label>
                        {% render_field user_name_form.username|add_error_class:"border-red-500" %}
                        <label for="{{ user_name_form.first_name.id_for_label }}">
                            {{ user_name_form.first_name.label }}
                        </label>
                        {% render_field user_name_form.first_name|add_error_class:"border-red-500" %}
                        <label for="{{ user_name_form.last_name.id_for_label }}">
                            {{ user_name_form.last_name.label }}
                        </label>
                        {% render_field user_name_form.last_name|add_error_class:"border-red-500" %}
                        <button name="submit_form" value="name_form" class="btn mt-4">
                            {% translate "Change name" %}
                        </button>
                    </form>
                </div>
            </div>
            <div class="w-full mb-4 rounded border border-solid border-blue-500 shadow-2xl bg-white">
                <div class="w-full p-4 rounded bg-water-500">
                    <h3 class="font-bold text-black">
                        <i icon-name="mail" class="mr-2"></i> {% translate "My E-mail-address" %}
                    </h3>
                </div>
                <div class="px-4 pb-4">
                    <form method="post">
                        {% csrf_token %}
                        <label for="{{ user_email_form.email.id_for_label }}">
                            {{ user_email_form.email.label }}
                        </label>
                        {% render_field user_email_form.email|add_error_class:"border-red-500" %}
                        <button name="submit_form" value="email_form" class="btn mt-4">
                            {% translate "Change e-mail-address" %}
                        </button>
                    </form>
                </div>
            </div>
            <div class="w-full mb-4 rounded border border-solid border-blue-500 shadow-2xl bg-white">
                <div class="w-full p-4 rounded bg-water-500">
                    <h3 class="heading font-bold text-black">
                        <i icon-name="lock" class="mr-2"></i> {% translate "My Password" %}
                    </h3>
                </div>
                <div class="px-4 pb-4">
                    <form method="post">
                        {% csrf_token %}
                        <label for="{{ user_password_form.old_password.id_for_label }}"
                               class="font-bold block p-2 pt-0 cursor-pointer">
                            {{ user_password_form.old_password.label }}
                        </label>
                        {% render_field user_password_form.old_password|add_error_class:"border-red-500" %}
                        <label for="{{ user_password_form.new_password.id_for_label }}">
                            {{ user_password_form.new_password.label }}
                        </label>
                        {% render_field user_password_form.new_password|add_error_class:"border-red-500" %}
                        <label for="{{ user_password_form.new_password_confirm.id_for_label }}">
                            {{ user_password_form.new_password_confirm.label }}
                        </label>
                        {% translate "Enter my new password again here" as new_password_confirm_placeholder %}
                        {% render_field user_password_form.new_password_confirm|add_error_class:"border-red-500" placeholder=new_password_confirm_placeholder %}
                        <ul class="p-2">
                            {% for item in user_password_form.new_password.help_text %}
                                <li class="py-1">
                                    {{ item }}
                                </li>
                            {% endfor %}
                        </ul>
                        <button name="submit_form" value="password_form" class="btn">
                            {% translate "Change password" %}
                        </button>
                    </form>
                </div>
            </div>
        </div>
        <div class="w-full mb-4 rounded border border-solid border-blue-500 shadow-2xl bg-white">
            <div class="w-full p-4 rounded bg-water-500">
                <h3 class="heading font-bold text-black">
                    <i icon-name="key-round" class="mr-2"></i> {% translate "My API tokens" %}
                </h3>
            </div>
            <div class="p-4">
                {% translate "API tokens allow external systems to access the API on your behalf." %}
                {% translate "A token has exactly the same permissions as your own account." %}
                <br />
                {% translate "The token is only displayed once directly after its creation and cannot be recovered afterwards." %}
                {% translate "Treat it like a password and delete tokens you no longer need." %}
            </div>
            {% if new_api_token %}
                <div class="mx-4 mb-4 p-4 rounded border border-solid border-blue-500 bg-blue-100">
                    <p class="font-bold">
                        <i icon-name="alert-triangle" class="mr-2"></i> {% translate "Copy your new API token now — it will not be shown again." %}
                    </p>
                    <code class="block mt-2 p-2 rounded bg-white break-all">{{ new_api_token }}</code>
                </div>
            {% endif %}
            <div class="w-full p-4 table-listing">
                <table class="w-full rounded border border-solid border-gray-200 shadow bg-white mb-4">
                    <thead>
                        <tr class="border-b border-solid border-gray-200">
                            <th class="text-sm text-left uppercase py-3 pl-4 pr-2 min">
                                {% translate "Token name" %}
                            </th>
                            <th class="text-sm text-left uppercase py-3 px-2 min">
                                {% translate "Last usage" %}
                            </th>
                            <th class="text-sm text-left uppercase py-3 px-2 min">
                                {% translate "Date added" %}
                            </th>
                            <th class="text-sm text-right uppercase py-3 pl-2 pr-4 min">
                                {% translate "Actions" %}
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for token in api_tokens %}
                            <tr>
                                <td class="pl-4">
                                    {{ token.name }}
                                </td>
                                <td class="pl-2 whitespace-nowrap">
                                    {{ token.last_usage|default_if_none:"-" }}
                                </td>
                                <td class="pl-2 whitespace-nowrap">
                                    {{ token.created_at|date:"SHORT_DATE_FORMAT" }}
                                </td>
                                <td class="p-2 text-right">
                                    <form method="post"
                                          action="{% spaceless %} {% if request.region %} {% url 'delete_api_token' region_slug=request.region.slug token_id=token.id %} {% else %} {% url 'delete_api_token' token_id=token.id %} {% endif %} {% endspaceless %}">
                                        {% csrf_token %}
                                        <button type="submit" class="btn btn-red">
                                            <i icon-name="trash-2" class="text-white"></i>
                                        </button>
                                    </form>
                                </td>
                            </tr>
                        {% empty %}
                            <tr>
                                <td colspan="4" class="px-4 py-3">
                                    {% translate "No API tokens have been created yet." %}
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
                <form method="post">
                    {% csrf_token %}
                    <label for="{{ user_api_token_form.name.id_for_label }}">
                        {{ user_api_token_form.name.label }}
                    </label>
                    {% render_field user_api_token_form.name|add_error_class:"border-red-500" %}
                    <button name="submit_form" value="api_token_form" class="btn mt-4">
                        {% translate "Create a new API token" %}
                    </button>
                </form>
            </div>
        </div>
        <div class="mb-4 rounded border border-solid border-blue-500 shadow-xl bg-white flex flex-wrap">
            <div class="w-full p-4 rounded bg-water-500">
                <h3 class="heading font-bold text-black">
                    <i icon-name="shield" class="mr-2"></i> {% translate "My 2-Factor-Authentication methods" %}
                </h3>
            </div>
            <div class="p-4">
                {% translate "To further protect your account, you can add additional authentication methods (2-factor authentication)." %}
                {% translate "The system currently supports the setup of FIDO2 keys and TOTP authentication via authenticator apps." %}
                {% translate "Once you add a method, it will always be requested when logging in and potential attackers will have a harder time gaining control over your account." %}
            </div>
            <div class="w-full mb-4 rounded border border-solid border-grey-500 p-4">
                <h4 class="heading font-bold">
                    <i icon-name="key" class="mr-2"></i>{% translate "FIDO2 keys" %}
                </h4>
                <div class="p-2">
                    {% translate "You can use your FIDO2 keys to secure your account." %}
                    {% translate "Once you added a key to your account you won't be able to log in without using the key." %}
                    <br />
                    {% translate "To make sure that you don't loose access to your account when you loose your FIDO2 key it is recommended to add multiple keys." %}
                    {% translate "Make sure to keep your keys at a secure place." %}
                </div>
                <div class="w-full p-4 table-listing">
                    <table class="w-full rounded border border-solid border-gray-200 shadow bg-white mb-4">
                        <thead>
                            <tr class="border-b border-solid border-gray-200">
                                <th class="text-sm text-left uppercase py-3 pl-4 pr-2 min">
                                    {% translate "Key name" %}
                                </th>
                                <th class="text-sm text-left uppercase py-3 px-2 min">
                                    {% translate "Last usage" %}
                                </th>
                                <th class="text-sm text-left uppercase py-3 px-2 min">
                                    {% translate "Date added" %}
                                </th>
                                <th class="text-sm text-right uppercase py-3 pl-2 pr-4 min">
                                    {% translate "Actions" %}
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for key in keys %}
                                <tr>
                                    <td class="pl-4">
                                        {{ key.name }}
                                    </td>
                                    <td class="pl-2 whitespace-nowrap">
                                        {{ key.last_usage }}
                                    </td>
                                    <td class="pl-2 whitespace-nowrap">
                                        {{ key.created_at|date:"SHORT_DATE_FORMAT" }}
                                    </td>
                                    <td class="p-2 text-right">
                                        <a class="btn btn-red"
                                           href="{% spaceless %} {% if request.region %} {% url 'delete_fido_key' region_slug=request.region.slug key_id=key.id %} {% else %} {% url 'delete_fido_key' key_id=key.id %} {% endif %} {% endspaceless %}">
                                            <i icon-name="trash-2" class="text-white"></i>
                                        </a>
                                    </td>
                                </tr>
                            {% empty %}
                                <tr>
                                    <td colspan="6" class="px-4 py-3">
                                        {% translate "No FIDO2 keys have been added yet." %}
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                    <p>
                        <a class="btn"
                           href="{% spaceless %} {% if request.region %} {% url 'register_new_fido_key' region_slug=request.region.slug %} {% else %} {% url 'register_new_fido_key' %} {% endif %} {% endspaceless %}">
                            {% translate "Add a new FIDO2 key" %}
                        </a>
                    </p>
                </div>
            </div>
            <div class="w-full mb-4 rounded border border-solid border-grey-500 p-4">
                <h4 class="heading font-bold">
                    <i icon-name="smartphone" class="mr-2"></i>{% translate "Authenticator app" %}
                </h4>
                <div class="p-2">
                    {% translate "You can use an authenticator application to secure your account with time-based one-time passwords (TOTP)." %}
                    {% translate "If you connect an authenticator with your account you will be asked to enter the shown digits on your smartphone to log into your account." %}
                </div>
                <div class="p-4">
                    {% if user.totp_key %}
                        <i icon-name="shield-check" class="mr-2"></i> {% translate "Active" %}
                        <a class="btn btn-red ml-2"
                           href="{% spaceless %} {% if request.region %} {% url 'delete_totp' region_slug=request.region.slug %} {% else %} {% url 'delete_totp' %} {% endif %} {% endspaceless %}">
                            {% translate "Disconnect" %}
                        </a>
                    {% else %}
                        <i icon-name="shield-off" class="mr-2"></i> {% translate "Inactive" %}
                        <a class="btn ml-2"
                           href="{% spaceless %} {% if request.region %} {% url 'register_totp' region_slug=request.region.slug %} {% else %} {% url 'register_totp' %} {% endif %} {% endspaceless %}">
                            {% translate "Register authenticator app" %}
                        </a>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
{% endblock content %}