{%- unless include.affiliations == nil and include.search == nil %}
{%- assign allcountries = site.data.countries %}
{%- for current_page in site.pages | sorted %}
{%- if current_page.affiliations and current_page.search_exclude != true and current_page.type == include.type %}
{%- assign pageaffiliations = current_page.affiliations | join: ", " %}
{%- if allaffiliations %}
{%- assign allaffiliations = allaffiliations | append: ", " | append: pageaffiliations %}
{%- else %}
{%- assign allaffiliations = allaffiliations | append: pageaffiliations %}
{%- endif %}
{%- endif %}
{%- endfor %}
{%- assign allaffiliations = allaffiliations | split: ", " | uniq | sort %}
<div class="row g-4 row-cols-1 row-cols-md-2 my-4">
    {%- unless include.affiliations == nil %}
    <div class="col">
        <div class="input-group">
            <label class="input-group-text" for="affiliations-input">Filter by affiliation</label>
            <select class="form-select" id="affiliations-input" aria-label="Example select with button addon">
                <option selected="" value="reset">Choose...</option>
                {%- for affiliation in allaffiliations %}
                {%- if affiliation.size == 2 %}
                {%- assign country = affiliation | upcase %}
                <option value="{{country | slugify}}">{{allcountries[country]}}</option>
                {%- else %}
                <option value="{{affiliation | slugify}}">{{affiliation}}</option>
                {%- endif %}
                {%- endfor %}
            </select>
            <button class="btn btn-primary" title="Button to clear affiliations selection" type="button" id="clearfilter">
                <i class="fa-solid fa-backspace"></i>
            </button>
        </div>
    </div>
    {%- endunless %}
    {%- unless include.search == nil %}
    <div class="col">
        <div class="input-group">
            <span class="input-group-text" id="search-label">Search</span>
            <input type="text" id="title-search" class="form-control" onkeyup="StartSearch();" placeholder="Type here..." aria-label="{{page.type | replace: '_', ' ' |}}" aria-describedby="search-label">
            <button class="btn btn-primary" title="Button to clear search" type="button" id="clearsearch">
                <i class="fa-solid fa-backspace"></i>
            </button>
        </div>
    </div>
    {%- endunless %}
</div>
{%- endunless %}
<div class="row row-cols-1 row-cols-md-2 g-4 mb-5 navigation-tiles">
    {%- for current_page in site.pages | sorted %}
    {%- assign affiliations_classes = "" %}
    {%- assign related_pages_classes = "" %}
    {%- assign except = include.except | split: ", " %}
    {%- if current_page.title and current_page.search_exclude != true and current_page.type == include.type %}
    {%- unless except contains current_page.name %}
    {%- if current_page.affiliations %}
    {%- capture affiliations_classes -%}
    {%- assign affiliations_output = "" %}
    {%- for affiliation in current_page.affiliations %}
    {%- assign group_affiliations = affiliation | slugify | prepend: " " %}
    {%- assign affiliations_output = affiliations_output | append: group_affiliations | strip %}
    {%- endfor %}{{affiliations_output}}
    {%- endcapture -%}
    {%- endif %}
    <div class="col" data-affiliations="{{affiliations_classes}}" related-pages="{{related_pages_classes}}">
        <div class="card h-100">
            <div class="card-header">
                <a class="stretched-link" aria-label="Go to the {{current_page.title}} page" href="{{ current_page.url | relative_url }}">
                    <h3 class="card-title m-0">{{current_page.title}}</h3>
                </a>
            </div>
            <div class="card-body">
                {%- if current_page.description %}
                <p class="card-text">{{ current_page.description}}</p>
                {%- endif %}
            </div>
            <div class="px-3 pb-3 d-flex justify-content-between">
                {%- if current_page.related_pages %}
                {%- assign nonempty = false %}
                {%- for section in current_page.related_pages %}
                {%- unless section[1].size == 0 %}
                {%- assign nonempty = true %}
                {%- endunless %}
                {%- endfor %}
                {%- if nonempty %}
                <div class="dropdown">
                    <button class="btn  btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                      Related pages
                    </button>
                    <ul class="dropdown-menu px-2 py-0 border-0 shadow">
                        {%- for section in current_page.related_pages %}
                        {%- unless section[1].size == 0 %}
                        <li><h6 class="dropdown-header">{{ section[0] | replace: "_", " " | capitalize }}</h6></li>
                        {%- for page_id in section[1] %}
                        {%- assign section_pages = site.pages | where:"type", section[0] %}
                        {%- assign metadata = section_pages | where:"page_id", page_id %}
                        {%- for page_hit in metadata %}
                        <li><a class="dropdown-item rounded" href="{{ page_hit.url | relative_url }}">{{page_hit.title }}</a></li>
                        {%- endfor %}
                        {%- endfor %}
                        {%- endunless %}
                        {%- endfor %}
                    </ul>
                </div>
                {%- endif %}
                {%- endif %}
                {%- if current_page.dsw or current_page.faircookbook %}
                <div class="btn-group btn-group-sm" role="group">
                    {%- if current_page.faircookbook %}
                    <div class="btn-group btn-group-sm" role="group">
                        <button class="btn dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                            <img alt="faircookbook logo" src="{{ 'assets/img/fairplus_compact_logo.svg' | relative_url }}">
                        </button>
                        <ul class="dropdown-menu px-2 py-0 border-0 shadow">
                            {%- for item in current_page.faircookbook %}
                            <li><a class="dropdown-item rounded" href="{{ item.url }}">{{item.name }}</a></li>
                            {%- endfor %}
                        </ul>
                    </div>
                    {%- endif %}
                    {%- if current_page.dsw %}
                    <div class="btn-group btn-group-sm" role="group">
                        <button class="btn dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                            <img alt="DSW logo" src="{{ 'assets/img/dsw_compact_logo.svg' | relative_url }}">
                        </button>
                        <ul class="dropdown-menu px-2 py-0 border-0 shadow">
                            {%- for item in current_page.dsw %}
                            <li><a class="dropdown-item rounded" href="{{ site.dsw_deep_link_prefix | append: item.uuid }}">{{item.name }}</a></li>
                            {%- endfor %}
                        </ul>
                    </div>
                    {%- endif %}
                </div>
                {%- endif %}
            </div>
            {%- if current_page.affiliations %}
            {%- assign alllogos = site.data.affiliations %}
            {%- assign allcountries = site.data.countries %}
            <div class="card-footer d-flex align-middle">
                <div class="me-3">
                    <span class="me-2"><b><small>Affiliations:</small></b></span>
                    {%- for affiliation in current_page.affiliations %}
                    {%- assign filter_affiliation = alllogos | where: "name", affiliation | first %}
                    {%- assign country = affiliation | upcase %}
                    {%- if affiliation.size == 2 %}
                    {%- assign country_link = site.pages | where:"country_code",country | first %}
                    {%- if country_link %}
                    <a role="button" href="{{country_link.url | relative_url}}" data-bs-toggle="tooltip" title="{{allcountries[country]}}" class="btn btn-sm bg-white hover-primary">
                    {%- else %}
                    <a role="button" data-bs-toggle="tooltip" title="{{allcountries[country]}}" class="btn btn-sm bg-white hover-primary disabled border-white" aria-disabled="true">
                        {%- endif %}
                        <div class="d-block affiliation-img-sm">
                            <span class="flag-icon flag-icon-{{affiliation | downcase}} shadow-sm"></span>
                        </div>
                    </a>
                    {%- elsif filter_affiliation %}
                    <a role="button" href="{{filter_affiliation.url}}" data-bs-toggle="tooltip" data-bs-original-title="{{affiliation}}" class="btn btn-sm bg-white hover-primary">
                        {%- if filter_affiliation.image_url %}
                        <img alt="logo of {{filter_affiliation.name}}" src="{{filter_affiliation.image_url | relative_url }}" class="d-inline affiliation-img-sm">
                        {%- else %}
                        {{filter_affiliation.name}}
                        {%- endif %}
                    </a>
                    {%- endif %}
                    {%- endfor %}
                </div>
            </div>
            {%- endif %}
        </div>
    </div>
    {% endunless %}
    {%- endif %}
    {%- endfor %}
</div>


<script type="text/javascript">
    /** 
     * Filter cards by affiliation
     */

    $(document).ready(function () {
        var affiliations = document.getElementById('affiliations-input');
        if (affiliations) {
            affiliations.addEventListener("change", function () {
                var search = document.getElementById('title-search')
                if (search) {
                    search.value = '';
                }
                const cols = document.querySelectorAll(".navigation-tiles .col");
                for (col of cols) {
                    const colCategories = col.getAttribute("data-affiliations").split(" ");
                    if (colCategories.indexOf(this.value) != -1 || this.value === "reset") {
                        col.classList.remove("d-none");
                    } else {
                        col.classList.add("d-none");
                    }
                }
            });
        }
        var clearaffiliations = document.getElementById("clearfilter");
        if (clearaffiliations) {
            clearaffiliations.addEventListener("click", function () {
                var affiliations = document.getElementById('affiliations-input');
                if (affiliations) {
                    document.getElementById("affiliations-input").selectedIndex = null;
                    const cols = document.querySelectorAll(".navigation-tiles .col");
                    for (col of cols) {
                        const colCategories = col.getAttribute("data-affiliations").split(" ");
                        col.classList.remove("d-none");
                    }
                }
            });

        }
    });

    /** 
     * Search cards
     */

    var StartSearch = () => {
        const input = document.getElementById("title-search");
        if (input) {
            const cols = document.querySelectorAll(".navigation-tiles .col");
            let filter = input.value.toLowerCase();
            var affiliations = document.getElementById('affiliations-input');
            if (affiliations) {
                document.getElementById("affiliations-input").selectedIndex = null;
            }
            for (let i = 0; i < cols.length; i++) {
                let body = cols[i].querySelector(".card-body");
                let title = cols[i].querySelector(".card-header");
                if (title.innerText.toLowerCase().indexOf(filter) > -1 || body.innerText.toLowerCase().indexOf(filter) > -1) {
                    cols[i].classList.remove("d-none");
                } else {
                    cols[i].classList.add("d-none");
                }
            }
        }
    }
    $(document).ready(function () {
        var clearsearch = document.getElementById("clearsearch");
        if (clearsearch) {
            clearsearch.addEventListener("click", function () {
                var search = document.getElementById('title-search')
                if (search) {
                    search.value = ''
                    const cols = document.querySelectorAll(".navigation-tiles .col");
                    for (col of cols) {
                        col.classList.remove("d-none");
                    }
                }
            });
        }
    });

</script>