{% extends "ui/page.html" %}

{% load crispy_forms_tags i18n static ui %}

{% block title %}{% translate 'Apps' %} | {% translate 'Account' %}{% endblock %}

{% block page_body %}
  <div id="BrowseAccountAppsView" class="container">
    <p class="display-6 my-3">{% translate 'Apps' %}</p>

    {% include 'ui/accounts/partials/nav.html' with active_tab='apps' %}

    <table class="table table-striped">
      <thead>
        <tr>
          <td>{% translate 'App' %}</td>
          <td>{% translate 'Platform' %}</td>
          <td>{% translate 'Version' %}</td>
          <td>{% translate 'Authorized at' %}</td>
        </tr>
      </thead>
      <tbody class="ui-account-apps">
        {% include 'ui/accounts/partials/apps/apps.html' with access_tokens=access_tokens params=params %}
      </tbody>
    </table>

    <p class="my-3 text-center {% if not access_tokens and params.before is None %}d-none{% endif %}">
      <button
        class="btn btn-primary {% if not before %}disabled{% endif %} ui-noscript-hide ui-load-more-button"
        hx-get="{{ next_url }}"
        hx-push-url="true"
        hx-swap="beforeend"
        hx-target="#BrowseAccountAppsView .ui-account-apps"
      >
        {% translate 'Load more' %}
      </button>

      <a
        class="btn btn-primary {% if not before %}disabled{% endif %} ui-noscript-show"
        href="{{ next_url }}"
      >
        {% translate 'Load more' %}
      </a>
    </p>

    <template id="BrowseAccountAppsView-DeleteModal">
      <div class="modal fade" tabindex="-1">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">{% translate 'Delete an app authorization?' %}</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate 'Close' %}"></button>
            </div>
            <div class="modal-body">
              {% include 'ui/accounts/partials/apps/delete_confirmation.html' with alert_class="mb-0" %}
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% translate 'Cancel' %}</button>
              <button type="button" class="btn btn-danger" data-ui-modal-action="confirm">
                {% translate 'Delete' %}
              </button>
            </div>
          </div>
        </div>
      </div>
    </template>
  </div>
{% endblock %}