{% 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 active">Users</li>
    </ol>
</nav>

<div class="d-flex align-items-center mb-1">
    <h3 class="mb-3">User{{ user_count|pluralize }} ({{ user_count }})</h3>

    <div class="ms-auto">
        {% if perms.accounts.add_user %}
        <a href="{% url 'accounts:invite_user' %}" class="btn btn-link" type="button"
            data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Send an email invitation">
            <span class="bi bi-envelope-plus" aria-hidden="true"></span>
        </a>
        {% endif %}
    </div>
</div>

<div class="table-responsive mb-3">
    <table class="table table-striped align-middle table-hover">
    <thead>
        <th>Username</th>
        <th>Email</th>
        <th style="width:10%">Remote?</th>
        {% if perms.accounts.view_apitoken %}
        <th style="width:10%">API token</th>
        {% endif %}
        <th style="width:15%"></th>
    </thead>
    <tbody>
        {% for managed_user in users %}
        <tr class="data-row">
        <td>
            {% if managed_user.is_superuser %}
            <span class="glyphicon glyphicon-fire" aria-hidden="true"></span>
            {% else %}
            <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
            {% endif %}
            <a href="{% url 'accounts:user' managed_user.pk %}">{{ managed_user.username }}</a>
        </td>
        <td>{{ managed_user.email }}</td>
        <td>{% if managed_user.is_remote %}yes{% endif %}</td>
        {% if perms.accounts.view_apitoken %}
        <td>{% if managed_user.api_token %}yes{% endif %}</td>
        {% endif %}
        <td class="text-end py-0">
            {% if perms.accounts.change_user and managed_user.editable %}
                {% url 'accounts:update_user' managed_user.id as url %}
                {% button 'UPDATE' url "Edit User" %}
            {% endif %}
            {% if perms.accounts.delete_user and managed_user.deletable %}
                {% url 'accounts:delete_user' managed_user.id as url %}
                {% button 'DELETE' url "Delete User" %}
            {% endif %}
        </td>
        </tr>
        {% endfor %}
    </tbody>
    </table>
</div>

<div class="d-flex align-items-center mb-1">
    <h3 class="mb-3">Service account{{ service_account_count|pluralize }} ({{ service_account_count }})</h3>

    <div class="ms-auto">
        {% if perms.accounts.add_user and perms.accounts.add_apitoken %}
            {% url 'accounts:create_service_account' as url %}
            {% button 'CREATE' url "Create new Service Account" %}
        {% endif %}
    </div>
</div>

{% if service_account_count %}
<div class="table-responsive mb-3">
    <table class="table table-striped align-middle table-hover">
    <thead>
        <th>Name</th>
        {% if perms.accounts.view_apitoken %}
        <th style="width:10%">API token</th>
        {% endif %}
        <th style="width:15%"></th>
    </thead>
    <tbody>
        {% for service_account in service_accounts %}
        <tr class="data-row">
        <td>
            <a href="{% url 'accounts:user' service_account.pk %}">{{ service_account.username }}</a>
        </td>
        {% if perms.accounts.view_apitoken %}
        <td>{% if service_account.api_token %}yes{% endif %}</td>
        {% endif %}
        <td class="text-end py-0">
            {% if perms.accounts.change_user and service_account.editable %}
                {% url 'accounts:update_user' service_account.id as url %}
                {% button 'UPDATE' url "Edit Sevice Account" %}
            {% endif %}
            {% if perms.accounts.delete_user and service_account.deletable %}
                {% url 'accounts:delete_user' service_account.id as url %}
                {% button 'DELETE' url "Delete Service Account" %}
            {% endif %}
        </td>
        </tr>
        {% endfor %}
    </tbody>
    </table>
</div>
{% endif %}

{% endblock %}