{% extends "base.html" %}
{% load i18n %}
{% load django_bootstrap5 %}
{% load bootstrap_icons %}

{% block title %}{% trans "Profile" %}{% endblock %}

{% block page_heading %}{% trans "Profile" %}{% endblock page_heading %}

{% block content %}
<div class="row g-4">
    <div class="col-lg-4">
        <section class="card" aria-labelledby="identity-title">
            <div class="card-body border-bottom">
                <div class="d-flex flex-wrap align-items-center gap-2 mb-1">
                    <h2 class="h4 mb-0 text-break" id="identity-title">{{ user.get_full_name|default:user.username }}</h2>
                    {% if user.is_superuser %}
                        <span class="badge text-bg-secondary">{% trans "Superuser" %}</span>
                    {% elif user.is_staff %}
                        <span class="badge text-bg-secondary">{% trans "Template editor" %}</span>
                    {% endif %}
                </div>
                <div class="text-body-secondary text-break">{{ user.username }}</div>
                {% if user.email %}<div class="small text-break mt-2">{{ user.email }}</div>{% endif %}
                <div class="small text-body-secondary mt-2">{% trans "Last login" %} {{ user.last_login|date:"Y-m-d H:i"|default:_("never") }}</div>
            </div>
            <form method="post" class="card-body" aria-label="{% trans 'Edit user info form' %}">
                {% csrf_token %}
                {% bootstrap_form profile_form %}
                <button type="submit" class="btn btn-primary w-100">{% trans "Save profile" %}</button>
            </form>
            {# an LDAP user's password is changed in LDAP #}
            {% if perms.accounts.change_password and user.has_usable_password %}
                <div class="card-footer">
                    <a href="{% url 'accounts:change_password' %}" class="btn btn-sm btn-outline-secondary">{% bs_icon 'lock' %} {% trans "Change Password" %}</a>
                </div>
            {% endif %}
        </section>
    </div>

    <div class="col-lg-8">
        <section class="card mb-4" id="sshkeys" aria-labelledby="sshkeys-title">
            <div class="card-header d-flex flex-wrap align-items-center justify-content-between gap-2">
                <h2 class="h5 mb-0" id="sshkeys-title">{% trans "SSH Keys" %} <span class="badge text-bg-light border">{{ publickeys|length }}</span></h2>
                <button class="btn btn-sm btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#add-ssh-key" aria-expanded="false" aria-controls="add-ssh-key">
                    {% bs_icon 'plus-lg' %} {% trans "Add SSH Key" %}
                </button>
            </div>
            <div class="card-body small text-body-secondary">{% trans "Offered when you create a VM and on a VM's Access tab." %}</div>
            <div class="list-group list-group-flush">{% include "ssh_key_list.html" %}</div>
            <div class="collapse" id="add-ssh-key">
                <form method="post" action="{% url 'accounts:ssh_key_create' %}" class="card-body border-top" aria-label="{% trans 'Add key to user form' %}">
                    {% csrf_token %}
                    {% bootstrap_form ssh_key_form %}
                    <button type="submit" class="btn btn-primary">{% trans "Add" %}</button>
                </form>
            </div>
        </section>

        <section class="card" id="apitokens" aria-labelledby="apitokens-title">
            <div class="card-header d-flex flex-wrap align-items-center justify-content-between gap-2">
                <h2 class="h5 mb-0" id="apitokens-title">{% trans "API Tokens" %} <span class="badge text-bg-light border">{{ api_tokens|length }}</span></h2>
                <button class="btn btn-sm btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#create-api-token" aria-expanded="false" aria-controls="create-api-token">
                    {% bs_icon 'plus-lg' %} {% trans "Create an API token" %}
                </button>
            </div>
            <div class="card-body small text-body-secondary">{% blocktrans %}A token lets a script or a tool use the REST API as you, without your password or OTP: send it as <code>Authorization: Token &lt;token&gt;</code>. A password change does not delete tokens: delete a token you no longer use, or one that may have leaked.{% endblocktrans %}</div>
            <div class="list-group list-group-flush">{% include "api_token_list.html" %}</div>
            <div class="collapse" id="create-api-token">
                <form method="post" action="{% url 'accounts:api_token_create' %}" class="card-body border-top" aria-label="{% trans 'Create an API token' %}">
                    {% csrf_token %}
                    {% bootstrap_form api_token_form %}
                    <button type="submit" class="btn btn-primary">{% trans "Create" %}</button>
                </form>
            </div>
        </section>
    </div>
</div>
{% endblock %}