{% load i18n static ui %}

{% for access_token in access_tokens %}
  <tr data-access-token="{{ access_token.pk }}">
    <td>{{ access_token|render_access_token_app }}</td>
    <td>{{ access_token|render_access_token_platform }}</td>
    <td><code>{{ access_token.meta.version }}</code></td>
    <td>{{ access_token.created_at }}</td>
  </tr>
  <tr data-access-token="{{ access_token.pk }}">
    <td colspan="4">
      <div class="d-flex justify-content-end align-items-center">
        <div class="spinner-border spinner-border-sm ui-htmx-indicator" role="status">
          <span class="visually-hidden">{% translate 'Processing' %}</span>
        </div>
        <a
          class="btn btn-sm btn-danger ms-2"
          data-ui-modal="#BrowseAccountAppsView-DeleteModal"
          hx-confirm='CANHAZCONFIRM'
          hx-indicator='[data-access-token="{{ access_token.pk }}"] .ui-htmx-indicator'
          hx-post="{% url 'ui.accounts.apps.delete' pk=access_token.pk %}"
          hx-swap="delete"
          hx-target='[data-access-token="{{ access_token.pk }}"]'
          hx-vars='{"canhazconfirm":true}'
          href="{% url 'ui.accounts.apps.delete' pk=access_token.pk %}"
        >
          <i class="bi bi-trash3-fill"></i> {% translate 'Delete' %}
        </a>
      </div>
    </td>
  </tr>
{% empty %}
  {% if not HTMX %}
    <tr>
      <td colspan="4">
        {% if params.before is None %}
          <strong>{% translate "You haven't authorized any apps yet." %}</strong>
        {% else %}
          <span>{% translate "You've reached the end of the line." %}</span>
        {% endif %}
      </td>
    </tr>
  {% endif %}
{% endfor %}