{% extends 'base.html' %}
{% load i18n fontawesome_5 %}

{% block body %}
    <div class="row">
        <div class="col-md-6 col-lg-4 border">
            <table class="table table-responsive">
                <tr>
                    <th scope="row">{% trans 'Username' %}</th>
                    <td>{{user.username}}</td>
                </tr>
                <tr>
                    <th scope="row">{% trans 'Name' %}</th>
                    <td>{{user.first_name}} {{user.last_name}}</td>
                </tr>
                <tr>
                    <th scope="row">{% trans 'E-Mail' %}</th>
                    <td>{{user.email}}</td>
                </tr>
                <tr>
                    <th scope="row">{% trans 'Permissions' %}</th>
                    <td>
                        {% for group in user.groups.all %}
                            <span class="badge badge-pill rlp-r">{% trans group.name %}</span>
                        {% endfor %}
                    </td>
                </tr>
            </table>
        </div>
        <div class="col-md">
            <h4>{% trans 'Settings' %}</h4>
            <article>
                <small>
                    {% blocktrans %}
                    Please note: Personal data can only be edited in the login portal. The settings in here are KSP specific.
                    {% endblocktrans %}
                </small>
            </article>
            <hr>
            <div class="col-sm">
                <div class="row mb-2">
                    <a href="{% url 'user:notifications' %}" title="{% trans 'Change notification configurations' %}">
                        <button class="btn btn-default">
                            {% fa5_icon 'bell' %}
                            <span>{% trans 'Notification settings' %}</span>
                        </button>
                    </a>
                </div>
                <div class="row mb-2">
                    <a href="{% url 'user:team-index' %}" title="{% trans 'Manage teams' %}">
                        <button class="btn btn-default">
                            {% fa5_icon 'users' %}
                            <span>{% trans 'Teams' %}</span>
                        </button>
                    </a>
                </div>
                <div class="row mb-2">
                    <a href="{% url 'user:api-token' %}" title="{% trans 'See or edit your API token' %}">
                        <button class="btn btn-default">
                            {% fa5_icon 'code' %}
                            <span>{% trans 'API' %}</span>
                        </button>
                    </a>
                </div>
            </div>
        </div>
    </div>
{% endblock %}