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

{% load i18n static ui %}

{% block title %}{% translate 'My Saves' %}{% endblock %}

{% block top_nav_title %}{{ title }}{% endblock %}

{% block page_body %}
  <div id="BrowseSavesView" class="container">
    <div class="row mt-3">
      <div class="col col-12 d-md-flex align-items-center mb-1 mb-md-3">
        <form action="{% url 'ui.associations.browse' %}" class="mb-2 mb-md-0" method="GET">
          <input type="hidden" name="search" value="{{ params.search|default_if_none:'' }}">
          <input type="hidden" name="limit" value="{{ params.limit }}">
          <input type="hidden" name="mode" value="{{ params.mode.value }}">
          <button
            class="btn btn-secondary btn-sm"
          >
            {% translate 'First page' %}
          </button>
        </form>

        <form
          action="{% url 'ui.associations.browse' %}"
          class="ms-auto mb-2 mb-md-0 d-md-flex"
          id="BrowseSavesView-Search"
          method="GET"
        >
          <div class="mb-2 mb-md-0 me-0 me-md-2">
            <select class="form-select form-select-sm" aria-label="{% translate 'Browse mode' %}" name="mode">
              <option value="" {% if params.mode.value == 'DEFAULT' %}selected{% endif %}>
                {% translate 'Default' %}
              </option>
              <option value="STARRED" {% if params.mode.value == 'STARRED' %}selected{% endif %}>
                {% translate 'Starred' %}
              </option>
              <option value="ARCHIVED" {% if params.mode.value == 'ARCHIVED' %}selected{% endif %}>
                {% translate 'Archived' %}
              </option>
            </select>
          </div>
          <div class="mb-2 mb-md-0 me-0 me-md-2">
            <input
              aria-label="Search"
              class="form-control form-control-sm"
              name="search"
              placeholder="{% translate 'Search' %}"
              type="text"
              value="{{ params.search|default_if_none:'' }}"
            >
          </div>
          <div class="mb-2 mb-md-0 me-0 me-md-2">
            <button class="btn btn-primary btn-sm" type="submit">
              {% translate 'Apply' %}
            </button>
            <a
              class="btn btn-link btn-sm"
              href="{% url 'ui.associations.browse' %}"
            >
              {% translate 'Reset' %}
            </a>
          </div>
        </form>
      </div>
    </div>

    <div class="row ui-saves">
      {% include "ui/associations/partials/associations.html" with associations=associations params=params %}
    </div>

    <div class="row {% if not associations and params.before is None %}d-none{% endif %}">
      <div class="col col-12">
        <p class="mb-3 text-center">
          <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="#BrowseSavesView .ui-saves"
          >
            {% 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>
      </div>
    </div>

    <template id="BrowseSavesView-ArchiveModal">
      <div class="modal fade" tabindex="-1">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">{% translate 'Archive a save?' %}</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate 'Close' %}"></button>
            </div>
            <div class="modal-body">
              {% include 'ui/associations/partials/archive_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 'Archive' %}
              </button>
            </div>
          </div>
        </div>
      </div>
    </template>

    <template id="BrowseSavesView-RefreshModal">
      <div class="modal fade" tabindex="-1">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">{% translate 'Refresh a save?' %}</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate 'Close' %}"></button>
            </div>
            <div class="modal-body">
              {% include 'ui/associations/partials/refresh_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-warning" data-ui-modal-action="confirm">
                {% translate 'Refresh' %}
              </button>
            </div>
          </div>
        </div>
      </div>
    </template>

    <template id="BrowseSavesView-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 a save?' %}</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate 'Close' %}"></button>
            </div>
            <div class="modal-body">
              {% include 'ui/associations/partials/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 %}