{% 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> -->


    <div class="border-b-2 border-black grid grid-cols-[52rem,30rem]  content-start">
    
      <div class="ml-[13rem] text my-8 meta max-w-[30rem]">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultricies egestas felis at dignissim. Morbi ut bibendum
            nisl. Integer ac sollicitudin risus. Vivamus et est est. Ut vitae lacus nec justo tincidunt interdum. Fusce sapien odio,
            commodo nec est et, interdum varius risus. Curabitur vehicula consequat auctor.
      </div>
      <div class="h-full ">
        <div class="flex h-full gap-8 justify-start items-center ">
          <div class="text-right">Show<br>related</div>
          <label class="switch">
            <input type="checkbox">
            <span class="slider round"></span>
          </label>
          <div class="">Simpler<br>List</div>
        </div>
      </div>
    </div>
<script>
  function filter() {
    return {
      expandFilters: false,
      init() {
        // console.log(this.showRelated)
      }
    }
  }
</script>
<div class="" x-data="filter()">
    <div id="resources" :class="expandFilters?'expanded':''">
        <div class="std-margin grid lg:grid-cols-4 mb-16">
            {% if practices_filter %}
            <div class="hidden lg:block cursor-pointer" @click="expandFilters = !expandFilters">Show/hide filters</div>
            <div class="">
                <div class="filter-header">Practices</div>
                <div class="filter-options my-4" x-show="expandFilters">
                {% for practice in practices_filter %}
                <div {% if request.args.get('practice')==practice[0]|string %} class="active" {% endif %}>
                    <a href="/{{type + 's'}}?practice={{practice[0]}}" hx-target="#resources" hx-select="#resources">{{ practice[1] }}</a>
                </div>
                {% endfor %}
                </div>
            </div>
            {% endif %}
            {% if year_filter %}
            <div class="">
                <div class="filter-header">Year</div>
                <div class="filter-options my-4" x-show="expandFilters">
                {% for year in year_filter %}
                <div  {% if request.args.get('year')==year %} class="active" {% endif %}>
                    <a href="/books?year={{year}}" hx-target="#resources" hx-select="#resources">{{ year }}</a>
                </div>
                {% endfor %}
                </div>
            </div>
            {% endif %}
            {% if typology_filter %}
            <div class="">
                <div class="filter-header">Typology category</div>
                <div class="filter-options my-4" x-show="expandFilters">
                {% for typology in typology_filter %}
                <div {% if request.args.get('typology')==typology %} class="active" {% endif %}>
                    <a href="/books?typology={{typology}}" hx-target="#resources" hx-select="#resources">{{ typology }}</a>
                </div>
                {% endfor %}
                </div>
            </div>
            {% endif %}
            {% if languages_filter %}
            <div class="" >
                <div class="filter-header">Scripting languages</div>
                <div class="filter-options my-4" x-show="expandFilters">
                {% for language in languages_filter %}
                <div {% if request.args.get('scriptingLanguage')==language %} class="active" {% endif %}>
                    <a href="/tools?scriptingLanguage={{language}}" hx-target="#resources" hx-select="#resources">{{ language }}</a>
                </div>
                {% endfor %}
                </div>
            </div>
            {% endif %}
            {% if licenses_filter %}
            <div class=""  >
                <div class="filter-header">License</div>
                <div class="filter-options my-4" x-show="expandFilters">
                {% for license in licenses_filter %}
                <div {% if request.args.get('license')==license %} class="active" {% endif %}>
                    <a href="/tools?license={{license}}" hx-target="#resources" hx-select="#resources">{{ license }}</a>
                </div>
                {% endfor %}
                </div>
            </div>
            {% endif %}
        </div>

        <div>
            {% for resource in resources %}
              {{ resource_with_related(resource, loop) }}
            {% endfor %}  
        </div>
    </div>
</div>


{% endblock %}