{% extends 'base.html' %}
{% load ui_extras %}

{% block content %}
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="/">Home</a></li>
        <li class="breadcrumb-item"><a href="{% url 'accounts:profile' %}">Settings</a></li>
        <li class="breadcrumb-item active">Profile</li>
    </ol>
</nav>

<div class="d-flex align-items-center mb-3">
  <h3 class="m-0 fs-5 text-secondary">Profile</h3>
  <div class="ms-auto">
    {% url 'accounts:update_profile' as url %}
    {% button 'UPDATE' url "Update profile" %}
  </div>
</div>

<div class="object-details">
    <table class="table-object-properties">
    <tbody>
        <tr>
        <th style="width:15%">username</th>
        <td>{{ user.username }}</td>
        </tr>
        <tr>
        <th>email</th>
        <td>{{ user.email }}</td>
        </tr>
        <tr>
        <th>superuser?</th>
        <td>{{ user.is_superuser|yesno }}</td>
        </tr>
        <tr>
        <th>remote?</th>
        <td>{{ user.is_remote|yesno }}</td>
        </tr>
        <tr>
        <th>API Token?</th>
        <td>
            {% if user.api_token %}
            yes
            {% url 'accounts:delete_user_api_token' user.pk as url %}
            {% button 'DELETE' url "Delete API Token" %}
            {% else %}
            <form method="post" action="{% url 'accounts:create_user_api_token' user.pk %}">{% csrf_token %}
            no
            <button class="btn btn-link" type="submit">
                <span class="bi bi-plus-circle" aria-hidden="true"></span>
            </button>
            </form>
            {% endif %}
        </td>
        </tr>
        {% if not user.is_remote %}
        <tr>
        <th>
            Password
        </th>
        <td>
            <a href="{% url 'password_change' %}">Change password</a>
        </td>
        </tr>
        <tr>
        <th>
            Verification devices
        </th>
        <td>
            <a href="{% url 'accounts:verification_devices' %}">Manage your verification devices</a>
        </td>
        </tr>
        <tr>
            <th>
                Global items per page
            </th>
            <td>
                {{ user.items_per_page }}
            </td>
        </tr>
        {% endif %}
    </tbody>
    </table>
</div>
{% endblock %}