{% extends "oauth/_layouts/cp" %}
{% import "_includes/forms" as forms %}

{% set selectedTab = 'tokens' %}

{% set content %}

    <div id="notokens"{% if tokens|length == 0 %} class="hidden"{% endif %}>
        <p>{{ "No tokens exist yet."|t }}</p>
    </div>

    <table id="tokens" class="data fullwidth collapsible">
        <thead>
            <tr>
                <th scope="col">{{ "Token ID"|t }}</th>
                <th scope="col">{{ "Plugin"|t }}</th>
                <th scope="col">{{ "Access Token"|t }}</th>
                <th scope="col">{{ "Provider"|t }}</th>
                <th scope="col">{{ "End Of Life"|t }}</th>
            </tr>
        </thead>

        <tbody>
            {% for token in tokens %}
                <tr data-id="{{ token.id }}" data-name="{{ "Token {id}"|t({ id: token.id }) }}">
                    <td>{{ token.id }}</td>
                    <td>
                        {% set plugin = craft.plugins.getPlugin(token.pluginHandle, false) %}

                        {% if plugin %}
                            <div class="plugin-infos">
                                <div class="icon">
                                    <img src="{{ craft.plugins.getPluginIconUrl(token.pluginHandle, 48) }}" width="24" height="24">
                                </div>

                                <div class="name">
                                    {{ plugin.name }}
                                    <span class="light">{{ plugin.getVersion() }}</span>
                                </div>
                            </div>
                        {% else%}
                            <span class="light">{{ "Unknown plugin"|t }}</span>
                        {% endif %}
                    </td>
                    <td>
                        {{ token.accessToken|slice(0, 30) }}…
                    </td>
                    <td>
                        {% if token.provider %}
                            <div class="provider-infos">

                                {% if token.provider.iconUrl %}
                                    <div class="icon">
                                        <img src="{{ token.provider.iconUrl }}" height="20" />
                                    </div>
                                {% endif %}

                                <div class="name">
                                    {% if token.provider %}
                                        {{ token.provider.name }}
                                    {% else %}
                                        {{ token.providerHandle }}
                                    {% endif %}
                                </div>
                            </div>
                        {% else %}
                            <span class="light">{{ "Unknown provider"|t }}</span>
                        {% endif %}
                    </td>
                    <td>
                        {% if token.endOfLife %}
                            {{ token.endOfLife|date }}
                        {% else %}
                            —
                        {% endif %}
                    </td>
                    <td class="thin"><a class="delete icon" title="{{ 'Delete'|t }}" role="button"></a></td>
                </tr>
            {% endfor %}
        </tbody>
    </table>

    {% includejs %}
        var adminTable = new Craft.AdminTable({
            tableSelector: '#tokens',
            noObjectsSelector: '#notokens',
            deleteAction: 'oauth/tokens/deleteToken',
            confirmDeleteMessage: '{{ "Are you sure you want to delete “{name}”?"|t }}',
        });
    {% endincludejs %}
{% endset %}