{%- assign actual_training = nil %}

{%- if page.keywords %}
    {%- assign actual_training = 1 %}
{%- endif %}

{%- if page.page_id and site.theme_variables.headings.resource-table-all-collapse%}
{%- assign tools = site.data.tool_and_resource_list | where:"related_pages", page.page_id %}
{%- unless tools.size == 0 %}
{%- assign actual_tools = 1 %}
{%- endunless %}
{%- assign country_pages = site.pages | where_exp: "item", "item.search_exclude != true" | where_exp:"item","item.national_resources != nil" %}
{%- unless country_pages.size == 0 %}
{%- assign tool_matches_total = 0 %}
{%- assign query = "related_pages." | append: page.type %}
{%- for country_page in country_pages %}
{%- assign tool_matches = country_page.national_resources | where_exp:"resource","resource.related_pages != nil" | where: query, page.page_id %}
{%- assign tool_matches_total = tool_matches_total | plus: tool_matches.size %}
{%- endfor %}
{%- endunless %}
{%- unless tool_matches_total == 0 %}
{%- assign actual_nat_tools = 1 %}
{%- endunless %}
{%- endif %}

{%- if actual_training %}
<!-- Training -->
<h2 class="mb-4">Training</h2>
    <div class="row">
        {%- for training in site.training %}
<!--            <h3  class="mb-0 flex-grow-1 mt-3 text-dark">{{ training.name }}</h3>-->
                {%- assign registry = training.name | downcase %}
                {% assign search_url = training.url %}
                {%- if registry | contains "tess" %}
                    {% assign search_query = page.keywords | join: " OR " | url_encode %}
                    {% assign search_url = search_url | append: "/search?q=" | append: search_query %}
                {% endif %}
                {%- if registry contains "tess"%}
                <!-- Show TeSS search results in a preview widget plus an external link to link to search results in TeSS -->
                <link rel="stylesheet" property="stylesheet" href="https://elixirtess.github.io/TeSS_widgets/css/tess-widget.css"/>
                <div><strong>{{ training.name }} search results:</strong></div>
                <div id="tess-widget-materials-list" class="tess-widget tess-widget-list"></div>
                <script>
                    function initTeSSWidgets() {

                        class SimpleListWithLinkRenderer extends TessWidget.Renderers.SimpleList {
                            initialize () {
                                super.initialize();
                                this.link = document.createElement('a');
                                this.link.target = '_blank';
                                this.container.appendChild(this.link);
                            }

                            render (errors, data, response) {
                                super.render(errors, data, response);
                                this.link.innerHTML = ''; // Clear link.
                                if (data.meta['results-count'] > 0) {
                                    this.link.href = response.req.url;
                                    this.link.textContent = `View ${data.meta['results-count']} ${data.meta['results-count'] > 1 ? 'results' : 'result'} on ${this.widget.instanceName}`;
                                }
                            }
                        }

                        TessWidget.Materials(document.getElementById('tess-widget-materials-list'),
                            SimpleListWithLinkRenderer,
                            {
                                opts: {
                                    enableSearch: false
                                },
                                params: {
                                    pageSize: 5,
                                    q: '{{ page.keywords | join: " OR " }}'
                                },
                                baseUrl: '{{ training.url }}',
                                instanceName: '{{ training.name }}'
                            });
                    }
                </script>
                <script async="" defer="" src="https://elixirtess.github.io/TeSS_widgets/js/tess-widget-standalone.js" onload="initTeSSWidgets()"></script>
                {% else %}
                    <div class=" row-cols-1 row-cols-md-2 gy-2 gx-4 info-links">
                        <a class="btn d-grid h-100" href="{{ search_url }}">
                            <div class="row g-1">
                                <div class="col-2 d-flex align-items-center justify-content-center">
                                    {%- if registry contains "tess" %}
                                        <img alt="TeSS logo" class="img-fluid" src="{{ 'assets/img/tess_logo.svg' | relative_url }}">
                                    {%- elsif registry == "zenodo" %}
                                        <img alt="Zenodo logo" class="img-fluid" src="{{ 'assets/img/zenodo_logo.svg' | relative_url }}">
                                    {%- elsif registry == "youtube" %}
                                        <img alt="YouTube logo" class="img-fluid" src="{{ 'assets/img/youtube_logo.svg' | relative_url }}">
                                    {%- elsif registry == "carpentries" %}
                                        <img alt="Carpentries" class="img-fluid" src="{{ 'assets/img/carpentries_logo.svg' | relative_url }}">
                                    {%- elsif registry == "github" %}
                                        <i class="fa-brands fa-github text-dark fa-2xl my-3"></i>
                                    {%- else %}
                                        <i class="fa-solid fa-external-link-alt text-primary fa-lg my-3"></i>
                                    {%- endif %}
                                </div>
                                <div class="col-10 d-flex align-items-center">
                                    <span class="text-start">{{training.name}}</span>
                                </div>
                            </div>
                        </a>
                    </div>
                {%endif %}
        {%- endfor %}
        </div>
{%- endif %}