{#
  Copyright (C) 2026 Front Matter.

  Invenio App RDM is free software; you can redistribute it and/or modify it
  under the terms of the MIT License; see LICENSE file for more details.
#}
{%- set title = organization.name %}
{%- extends config.BASE_TEMPLATE %}

{%- block css %}
  {{ super() }}
  {{ webpack['invenio-pidbox-profiles.css'] }}
{%- endblock %}

{%- block javascript %}
  {{ super() }}
  {{ webpack['invenio-app-rdm-search.js'] }}
{%- endblock %}

{%- block page_body %}
  <div class="ui stackable grid container rel-mt-2">

    {# Profile header — full row #}
    <div class="sixteen wide column row">
      <div class="sixteen wide column">
        <h2 class="ui header">
          {{ organization.name }}
          {%- if organization.acronym %} <span class="text-muted">({{ organization.acronym }})</span>{% endif %}
          <a href="https://ror.org/{{ ror }}" target="_blank" rel="noopener noreferrer" style="margin-left: 0.1em;">
            <img src="/static/images/ror.svg" alt="ROR" style="height: 0.8em; vertical-align: middle;">
          </a>
        </h2>
      </div>
    </div>

    {# Alternate names — full width, above the two columns #}
    {% if organization.additional_names %}
      <div class="sixteen wide column row">
        <div class="sixteen wide column">
          <div><strong>{{ _("Also known as") }}</strong></div>
          <div>{{ organization.additional_names | join(", ") }}</div>
        </div>
      </div>
    {% endif %}

    {# Type, location, website and identifiers (left) + relations (right) #}
    <div class="row">

      {# Left column: type, location, website, ISNI/Wikidata/Funder ID #}
      <div class="eight wide computer sixteen wide tablet column">
        {% if organization.types %}
          <div class="rel-mt-0"><strong>{{ _("Type") }}</strong></div>
          <div>{{ organization.types | map("capitalize") | join(", ") }}</div>
        {% endif %}

        {% if location %}
          <div class="rel-mt-1"><strong>{{ _("Location") }}</strong></div>
          <div>
            {%- if location.id -%}
              <a href="{{ location.id }}" target="_blank" rel="noopener noreferrer">{{ location.place }}</a>
            {%- else -%}
              {{ location.place }}
            {%- endif -%}
          </div>
        {% endif %}

        {% if urls %}
          <div class="rel-mt-1"><strong>{{ _("Website") }}</strong></div>
          {% for url in urls %}
            {# Long URLs would otherwise overflow the narrow column. #}
            <div><a href="{{ url.url }}" target="_blank" rel="noopener noreferrer" style="overflow-wrap: anywhere;">{{ url.url }}</a></div>
          {% endfor %}
        {% endif %}

        {% for identifier in identifiers %}
          <div class="rel-mt-1"><strong>{{ identifier.label }}</strong></div>
          <div style="overflow-wrap: anywhere;">
            {%- if identifier.url -%}
              <a href="{{ identifier.url }}" target="_blank" rel="noopener noreferrer">{{ identifier.value }}</a>
            {%- else -%}
              {{ identifier.value }}
            {%- endif -%}
          </div>
        {% endfor %}
      </div>

      {# Right column: related organizations #}
      <div class="eight wide computer sixteen wide tablet column">
        {% if relations %}
          {# First in the column on desktop; on tablet/mobile the columns stack
             below the identity block, so it keeps its top margin there. #}
          <h3 class="ui header rel-mt-0 computer only">{{ _("Related organizations") }}</h3>
          <h3 class="ui header rel-mt-2 tablet mobile only">{{ _("Related organizations") }}</h3>
          {% for group in relations %}
            <div class="rel-mt-1"><strong>{{ group.label }}</strong></div>
            <div class="ui list organization-relations">
              {%- if not group.members %}
                <div class="item">{{ _("None") }}</div>
              {% endif %}
              {%- for member in group.members %}
                <div class="item">
                  <div class="content">
                    <a href="/organizations/{{ member.id }}">{{ member.name }}</a>
                    <a href="https://ror.org/{{ member.id }}" target="_blank" rel="noopener noreferrer" style="margin-left: 0.3em;">
                      <img src="/static/images/ror.svg" alt="ROR" style="height: 0.8em; vertical-align: middle;">
                    </a>
                  </div>
                </div>
              {% endfor %}
            </div>
          {% endfor %}
        {% endif %}
      </div>

    </div>

    {# Metrics — full width below the profile #}
    <div class="sixteen wide column row">
      <div class="sixteen wide column">
        {%- include "invenio_app_rdm/organizations/profile_metrics.html" %}
      </div>
    </div>

  </div>

  {# Search results — full search app pre-filtered to this organization's ROR #}
  <div class="ui container rel-mt-2">
    <div data-invenio-search-config='{{ search_config | tojson }}'></div>
  </div>
{%- endblock page_body %}