{% load i18n static ui %}

<div class="card ui-save-card">
  <div class="card-body">
    <h5 class="card-title">
      <a href="{% url 'ui.associations.view' pk=association.pk %}">
        {% if association.title %}
          {{ association.title }}
        {% else %}
          {{ association.target.url }}
        {% endif %}
      </a>
    </h5>
    {% if association.description %}
      <p class="card-text">{{ association.description|truncatechars:125 }}</p>
    {% endif %}
  </div>
  <div class="card-footer d-flex align-items-center">
    <a href="{{ association.target.url }}" target="_blank" rel="noopener noreferrer"><small>{{ association.target.url|render_url_domain }} <i class="bi bi-box-arrow-up-right"></i></small></a>
    <div class="ms-auto flex-shrink-0 d-flex align-items-center">
      {% if not association.archived_at %}
        <div class="spinner-border spinner-border-sm ui-htmx-indicator" role="status">
          <span class="visually-hidden">{% translate 'Processing' %}</span>
        </div>
        {% if association.is_starred %}
          <i class="bi bi-star-fill ms-2"></i>
        {% endif %}
        <div class="btn-group dropup ms-2">
          <button class="btn btn-secondary btn-sm dropdown-toggle ui-actions-menu-trigger" type="button" data-bs-toggle="dropdown" aria-expanded="false">
            <i class="bi bi-three-dots-vertical"></i>
          </button>
          <ul class="dropdown-menu dropdown-menu-end">
            {% if association.is_starred %}
              <li>
                <a
                  class="dropdown-item"
                  hx-get="{% url 'ui.associations.unstar' pk=association.pk %}"
                  hx-indicator='[data-association="{{ association.pk }}"] .ui-htmx-indicator'
                  hx-swap="innerHTML"
                  hx-target='[data-association="{{ association.pk }}"]'
                  href="{% url 'ui.associations.unstar' pk=association.pk %}"
                >
                  <i class="bi bi-star"></i> {% translate 'Unstar' %}
                </a>
              </li>
            {% else %}
              <li>
                <a
                  class="dropdown-item"
                  hx-get="{% url 'ui.associations.star' pk=association.pk %}"
                  hx-indicator='[data-association="{{ association.pk }}"] .ui-htmx-indicator'
                  hx-swap="innerHTML"
                  hx-target='[data-association="{{ association.pk }}"]'
                  href="{% url 'ui.associations.star' pk=association.pk %}"
                >
                  <i class="bi bi-star-fill"></i> {% translate 'Star' %}
                </a>
              </li>
            {% endif %}
            <li>
              <a
                class="dropdown-item"
                href="{% url 'ui.associations.edit' pk=association.pk %}"
              >
                <i class="bi bi-pencil"> </i> {% translate 'Edit' %}
              </a>
            </li>
            <li>
              <a
                class="dropdown-item text-warning"
                data-ui-modal="#BrowseSavesView-RefreshModal"
                hx-confirm='CANHAZCONFIRM'
                hx-indicator='[data-association="{{ association.pk }}"] .ui-htmx-indicator'
                hx-post="{% url 'ui.associations.refresh' pk=association.pk %}"
                hx-swap="none"
                hx-target='[data-association="{{ association.pk }}"]'
                hx-vars='{"canhazconfirm":true}'
                href="{% url 'ui.associations.refresh' pk=association.pk %}"
              >
                <i class="bi bi-arrow-repeat"> </i> {% translate 'Refresh' %}
              </a>
            </li>
            <li>
              <a
                class="dropdown-item text-danger"
                data-ui-modal="#BrowseSavesView-ArchiveModal"
                hx-confirm='CANHAZCONFIRM'
                hx-post="{% url 'ui.associations.archive' pk=association.pk %}"
                hx-swap="delete"
                hx-target='[data-association="{{ association.pk }}"]'
                hx-vars='{"canhazconfirm":true}'
                href="{% url 'ui.associations.archive' pk=association.pk %}"
              >
                <i class="bi bi-archive"></i> {% translate 'Archive' %}
              </a>
            </li>
          </ul>
        </div>
      {% else %}
        <i class="bi bi-archive-fill"></i>
        <a
          class="btn btn-sm btn-danger ms-2"
          data-ui-modal="#BrowseSavesView-DeleteModal"
          hx-confirm='CANHAZCONFIRM'
          hx-post="{% url 'ui.associations.delete' pk=association.pk %}"
          hx-swap="delete"
          hx-target='[data-association="{{ association.pk }}"]'
          hx-vars='{"canhazconfirm":true}'
          href="{% url 'ui.associations.delete' pk=association.pk %}"
        >
          <i class="bi bi-trash"></i>
        </a>
      {% endif %}
    </div>
  </div>
</div>