{% extends "base.html" %}
{% load i18n %}
{% load django_bootstrap5 %}
{% load icons %}
{% load tags_fingerprint %}

{% block title %}{% trans "Profile" %}: {{ request.user.first_name }} {{ request.user.last_name}}{% endblock %}

{% block page_heading %}{% trans "Profile" %}: {{ request.user.first_name }} {{ request.user.last_name}}{% endblock page_heading %}

{% block content %}
<ul class="nav nav-tabs">
    <li class="nav-item" role="presentation">
        <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#editprofile" type="button" role="tab" aria-controls="editprofile" aria-selected="true">
            {% trans "Edit Profile" %}
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#sshkeys" type="button" role="tab" aria-controls="sshkeys" aria-selected="false">
            {% trans "SSH Keys" %}
        </button>
    </li>
</ul>
<div class="tab-content">
    <div class="tab-pane tab-pane-bordered active" id="editprofile">
        <div class="card">
            <div class="card-body">
                <form method="post" action="" role="form" aria-label="Edit user info form">
                    {% csrf_token %}
                    {% bootstrap_form profile_form layout='horizontal' %}
                    {% if perms.accounts.change_password %}
                        <a href="{% url 'accounts:change_password' %}" class="btn btn-primary">
                            {% icon 'lock' %} {% trans "Change Password" %}
                        </a>
                    {% endif %}
                    <div class="mb-0 float-end">
                        <button type="submit" class="btn btn-primary">
                            {% icon 'pencil' %} {% trans "Update" %}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="tab-pane tab-pane-bordered fade" id="sshkeys">
        {% if publickeys %}
        <div class="col-lg-12">
            <div class="table-responsive">
                <table class="table table-hover">
                    <tbody class="text-center">
                        {% for key in publickeys %}
                        <tr>
                            <td>{{ key.keyname }} ({% ssh_to_fingerprint key.keypublic %})</td>
                            <td>
                                <a href="{% url 'accounts:ssh_key_delete' key.id %}" title="{% trans "Delete" %}" class="btn btn-sm btn-secondary">
                                    {% icon 'trash' %}
                                </a>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
        {% endif %}
        <div class="card">
            <div class="card-header">
                {%trans "Add SSH Key" %}
            </div>
            <div class="card-body">
                <form method="post" action="{% url 'accounts:ssh_key_create' %}" role="form" aria-label="Add key to user form">
                    {% csrf_token %}
                    {% bootstrap_form ssh_key_form layout='horizontal' %}
                    <div class="mb-0 float-end">
                        <button type="submit" class="btn btn-primary">
                            {% icon 'plus' %} {% trans "Add" %}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}