<div class="my-4 card border border-gray-700 dark:border-gray-70 w-full"
     data-hx-container="api_keys">
    <div class="card-body">
        <div class="flex justify-between">
            <div class="text-xl mb-2">
                <i class="fa fa-solid fa-key me-2"></i>
                {% if request.user.logged_in_as_team %}
                    Organization
                {% else %}
                    Account
                {% endif %}
                API Keys
                <span class="ml-2 badge badge-success badge-outline">NEW</span>
            </div>
            <button onclick="modal_generate_api_key.showModal();"
                    class="btn btn-primary btn-sm"
                    hx-trigger="click once"
                    hx-swap="beforeend"
                    hx-target="#modal_container"
                    hx-get="{% url "core:api:base:modal retrieve" modal_name="generate_api_key" %}">
                Generate new token
            </button>
        </div>
        <div class="divider"></div>
        <table class="table table-zebra max-w-full">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Last used</th>
                    <th>Expires</th>
                    <th>Created at</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody data-hx-swap="tbody_api_keys">
                {% for key in api_keys %}
                    {% include "pages/settings/settings/api_key_row.html" with key=key %}
                {% empty %}
                    <tr>
                        <td colspan="100%" class="text-center">No API Keys</td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{#{% if request.user.is_superuser %}#}
{#    <div class="card">{% include 'pages/settings/settings/admin.html' %}</div>#}
{#{% endif %}#}
