{#
  SPDX-FileCopyrightText: 2020-2025 CERN.
  SPDX-License-Identifier: MIT
#}
{%- if external_resources -%}
<div class="sidebar-container">
  <h2 class="ui small top attached header">{{ _('External resources')}}</h2>
  <dl id="external-resource" aria-label="{{ _('External resources') }}" class="ui bottom attached segment rdm-sidebar external resource details-list">

    {# dynamically create the list of external resources #}
    {%- for section, external_resources in external_resources | groupby("content.section") -%}
      <dt class="ui tiny header">{{ section }}</dt>
      <ul class="ui list no-bullet m-0">

        {%- for resource in external_resources -%}
          {%- if resource -%}
            {%- if resource.template -%}
              {# It's up to the template to render the `resource` as it wishes #}
              {%- include resource.template %}
            {%- else -%}
              {# Default rendering #}
              <li class="item flex align-items-center">

                {% if resource.content.icon %}
                  <img class="ui image" src="{{ resource.content.icon }}" alt="" width="32">
                {% endif %}

                <div class="content">
                  <a
                    class="header"
                    href="{{resource.content.url}}"
                    target="_blank"
                    rel="noreferrer"
                  >{{ resource.content.title }}
                  </a>

                  {% if resource.content.subtitle %}
                    <p class="description">
                      {{ resource.content.subtitle }}
                    </p>
                  {%- endif -%}

                </div>
              </li>
            {%- endif -%}
          {%- endif -%}
        {%- endfor -%}
      </ul>
    {%- endfor -%}
  </dl>
</div>
{%- endif -%}