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

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

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

{% block content %}
<ul class="nav nav-tabs">
    <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#edit-profile">{% trans "Edit Profile" %}</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#ssh-keys">{% trans "SSH Keys" %}</a>
    </li>
</ul>
<div class="tab-content">
    <div class="tab-pane tab-pane-bordered active" id="edit-profile">
        <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="form-group mb-0 float-right">
                        <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="ssh-keys">
        {% 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="form-group mb-0 float-right">
                        <button type="submit" class="btn btn-primary">
                            {% icon 'plus' %} {% trans "Add" %}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}