{% if is_fragment %}
  {% extends "core/base_fragment.jinja" %}

  {% block metatags %}
    <meta property="og:url" content="{{ request.build_absolute_uri() }}" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="Liste des clubs et assos" />
    <meta property="og:image" content="{{ request.build_absolute_uri(static("core/img/logo_no_text.png")) }}" />
  {% endblock %}

  {# Don't display tabs and errors #}
  {% block tabs %}
  {% endblock %}
  {% block errors %}
  {% endblock %}
{% else %}
  {% extends "core/base.jinja" %}
  {% block additional_css %}
    <link rel="stylesheet" href="{{ static("club/list.scss") }}">
  {% endblock %}
  {% block description -%}
    {% trans %}The list of all clubs existing at UTBM.{% endtrans %}
  {%- endblock %}
  {% block title -%}
    {% trans %}Club list{% endtrans %}
  {%- endblock %}
{% endif %}

{% from "core/macros.jinja" import paginate_htmx %}

{% block content %}
  <main>
    <h3>{% trans %}Filters{% endtrans %}</h3>
    <form
      id="club-list-filters"
      hx-get="{{ url("club:club_list") }}"
      hx-target="#content"
      hx-swap="outerHtml"
      hx-push-url="true"
    >
      <div class="row gap-4x">
        {{ form }}
      </div>
      <button type="submit" class="btn btn-blue margin-bottom">
        <i class="fa fa-magnifying-glass"></i>{% trans %}Search{% endtrans %}
      </button>
    </form>
    <h3>{% trans %}Club list{% endtrans %}</h3>
    {% if user.has_perm("club.add_club") %}
      <br>
      <a href="{{ url('club:club_new') }}" class="btn btn-blue">
        <i class="fa fa-plus"></i> {% trans %}New club{% endtrans %}
      </a>
    {% endif %}
    <section class="aria-busy-grow" id="club-list">
      {% for club in object_list %}
        <div class="card">
          {% set club_url = club.get_absolute_url() %}
          <a href="{{ club_url }}">
            {% if club.logo %}
              <img class="club-image" src="{{ club.logo.url }}" alt="logo {{ club.name }}">
            {% else %}
              <i class="fa-regular fa-image fa-4x club-image"></i>
            {% endif %}
          </a>
          <div class="content">
            <a href="{{ club_url }}">
              <h4>
                {{ club.name }} {% if not club.is_active %}({% trans %}inactive{% endtrans %}){% endif %}
              </h4>
            </a>
            {% set links = club.links.all() %}
            {% if links %}
              <br>
              <div class="row gap-2x">
                {% for link in club.links.all() %}
                  <a href="{{ link.url }}" rel="noopener external" target="_blank">
                    <i class="{{ link.link_type.icon }} fa-xl"></i>
                    <strong>{{ link.name }}</strong>
                  </a>
                {% endfor %}
              </div>
            {% endif %}
            {{ club.short_description|markdown }}
          </div>
        </div>
      {% endfor %}
    </section>
    {% if is_paginated %}
      {{ paginate_htmx(request, page_obj, paginator) }}
    {% endif %}
  </main>
{% endblock %}