{% extends 'base.html' %}

{% block content %}
<!-- <div class="cell-margin">
  <div class="mb-8">
    <h2>
      {% block title %}
      {% autoescape false %}
      {{ type + 's' | replace(" ","<br>") }}
      {% endautoescape %}
      {% endblock %}
    </h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget viverra magna. Nam in ante ultricies
      purus feugiat vestibulum et ac erat. Donec in sagittis ante. Maecenas non mauris et eros commodo fringilla.
      Integer accumsan ullamcorper diam, non rhoncus tellus molestie ut. Maecenas finibus pretium dolor ac sagittis.
    </p>
  </div>
</div> -->


{% macro filter_dropdown(id, filter, plural='') %}
<select name="{{ id }}">
  <option value="" {% if request.args.get(id, '' )=='' %} selected {% endif %}>
    {% if plural != '' %}
    {{ plural }}
    {% else %}
    <span class="capitalize bg-red-400">{{ id }}s</span>
    {% endif%}
  </option>
  {% for thing in filter %}
  <option value="{{ thing[0] }}" {% if request.args.get(id)==thing[0]|string %} selected {% endif %}>
    {{ thing[1] }}
  </option>
  {% endfor %}
</select>
{% endmacro%}

{% macro filter_dropdown_nokey(id, filter, plural='') %}
<select name="{{ id }}">
  <option value="" {% if request.args.get(id, '' )=='' %} selected {% endif %}>
    {% if plural != '' %}
    {{ plural }}
    {% else %}
    <span class="capitalize">{{ id }}s</span>
    {% endif%}
  </option>
  {% for thing in filter %}
  <option value="{{ thing }}" {% if request.args.get(id)==thing|string %} selected {% endif %}>
    {{ thing }}
  </option>
  {% endfor %}
</select>
{% endmacro%}

<div class="border-b-2 border-black grid lg:grid-cols-[52rem,30rem] content-start">
  <div class="mx-4 lg:ml-[13rem] text my-4 lg:my-8 meta lg:max-w-[30rem]">
    {{ intro_text|safe }}
  </div>
</div>

<form action="{{ url_for(request.endpoint )}}" method="GET" hx-trigger="change" hx-push-url="true">
  <input type="hidden" name="view" value="{{ view }}">
  <div
    class="flex p-4 lg:p-0 flex-col items-start lg:items-center lg:flex-row lg:flex-wrap gap-2 lg:gap-4 min-h-[2rem] mb-8 border-b-2 border-black ">

    <div class="-m-4 mb-4 lg:m-0">
      {{ view_switch() }}
    </div>

    {% if practices_filter%}
    {{ filter_dropdown('practice', practices_filter, 'Practices') }}
    {% endif %}
    {% if year_filter %}
    {{ filter_dropdown_nokey('year', year_filter, 'Year') }}
    {% endif %}
    {% if typology_filter %}
    {{ filter_dropdown_nokey('typology', typology_filter, 'Typologies') }}
    {% endif %}
    {% if languages_filter %}
    {{ filter_dropdown_nokey('scriptingLanguage', languages_filter, 'Scripting languages') }}
    {% endif %}
    {% if licenses_filter %}
    {{ filter_dropdown_nokey('license', licenses_filter, 'Licenses') }}
    {% endif %}
    {% if status_filter %}
    {{ filter_dropdown_nokey('status', status_filter, 'Maintenance status') }}
    {% endif %}

    {% if not practices_filter and not year_filter and not typology_filter and not languages_filter and not
    licenses_filter and not status_filter %}
    {% else %}
    <a href="{{ url_for(request.endpoint) }}?view={{ view }}">Reset</a>
    {% endif %}

  </div>

  <div>
    {% if view == 'list' %}
    {% for resource in resources %}
    {{ resource_list(resource, loop) }}
    {% endfor %}
    {% else %}
    {% for resource in resources %}
    {{ resource_with_related(resource, loop) }}
    {% endfor %}
    {% endif %}
  </div>

  {% macro render_pagination(pagination) %}

  <!-- <div class=page-items>
          {{ pagination.first }} - {{ pagination.last }} of {{ pagination.total }}
        </div> -->

  <div class="pagination p-4">
    <span class="mr-2">Page</span>
    {% for page in pagination.iter_pages() %}
    {% if page %}
    {% if page != pagination.page %}

    <a href="{{ url_for(request.endpoint, page=page) }}{% for key in request.args %}{% if key != 'page' %}&{{ key }}={{ request.args.get(key) }}{% endif %}{% endfor %}"
      class="mx-1">{{
      page }}</a>
    {% else %}
    <strong class="mx-1">{{ page }}</strong>
    {% endif %}
    {% else %}
    <span class="ellipsis">…</span>
    {% endif %}
    {% endfor %}
  </div>
  {% endmacro %}

  {{ render_pagination(resources) }}

</form>

{% endblock %}