{% extends "base.html" %}

{% block title %}{{ title }}News{% endblock %}

{% block bodyclass %}News{% endblock %}

{% block content %}
{% include "partials/cookie-consent-placeholder.njk" %}
<template class="cookieConsent">
  <div class="blockedHTML">
      <div>
        <div class="container">
          <div class="w-full lg:w-1/2">
            <p class="text-6xl text-edsgreen uppercase">{{ __('All News') }}</p>
          </div>
        </div>

        <!--  START filtering section placeholder-->
        <div class="w-full mt-24 mb-24">
          <div class="flex w-full">
            <div class="w-full bg-edsgreen flex flex-wrap p-6">
              <div class="container">
                <div id="showHideFilter" class=" text-white pt-4">
                  <p class="text-3xl inline-block" style="cursor: pointer;">{{ __('FILTER') }}</p>&nbsp;
                  <i id="up" class="fa fa-chevron-up inline-block"></i>
                  <i id="down" class="fa fa-chevron-down inline-block"></i>
                </div>
              </div>
            </div>
          </div>

          <div id="filter" class="flex w-full">
            <div class="w-full bg-gray-200 flex flex-wrap p-12 text-edsgreen ">
              <div class="container">
                <p class=" text-3xl font-bold">{{ __('Categories') }}</p>
                <div class="w-8/12 flex flex-wrap">
                  {% for category in categories %}
                    <div class="flex flex-wrap pr-6 pb-3 w-6/12">
                      <label class="inline-flex font-normal">
                        <input class="category-checkbox form-checkbox text-indigo-600" type="checkbox"
                               value="{{ category.name }}" {% if category.checked %} checked {% endif %}>
                        <span class="ml-3 text-2xl">{{  __(category.title) }}</span>
                      </label>
                    </div>
                  {% endfor %}
                </div>
                <div class="relative pt-10">
                  <div class="w-full flex flex-wrap justify-start">
                    <button id="filterButton"
                            class="bg-edsgreen text-white uppercase py-2 px-10 text-3xl font-bold">{{ __('Filter') }}</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--  END-->

        <div class="container">
          {% for post in posts %}
            <div class="border-b-2 border-edsgreen mb-12 w-3/6">
              <a href="/news/{{ post.slug }}">
                <p class="text-4xl text-gray-700 uppercase">{{ post.title }}</p>
              </a>
            </div>
            <div class="w-full border-b-2 border-edsyellow mb-24 pb-6 text-2xl">
              <p class="text-gray-700 ">{{ post.modified }}</p>
              <p class="text-gray-600 ">{{ post.content | safe | truncate(200) }}</p>
              <p class="pt-6 text-xl"><a href="/news/{{ post.slug }}">{{ __('READ STORY') }}</a></p>
            </div>
          {% endfor %}
        </div>
      </div>
  </div>

  <script>

    if (window.location.search !== '') {
      $('#down').toggle()
    } else {
      $('#filter').toggle()
      $('#up').toggle()
    }

    $('#showHideFilter').click(function () {
      $('#filter').toggle()
      $('#up').toggle()
      $('#down').toggle()
    })

    $('#filterButton').click(function () {
      let selectedCategories = []
      $(".category-checkbox").each(function (index) {
        if ($(this).is(':checked')) selectedCategories.push($(this).val())
      })

      window.location.href = window.location.origin + window.location.pathname + ((selectedCategories.length > 0) ? "?categories=" + selectedCategories.join(",") : '')
    })
  </script>
</template>

{% endblock %}