{#
  Copyright (C) 2024-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 display_name = (person.given_name ~ " " ~ person.family_name) if (person.given_name and person.family_name) else person.name %}
{%- set title = display_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">
          {{ display_name }}
          <a href="https://orcid.org/{{ orcid }}" target="_blank" rel="noopener noreferrer" style="margin-left: 0.1em;">
            <img src="/static/images/orcid.svg" alt="ORCID" style="height: 0.8em; vertical-align: middle;">
          </a>
        </h2>
      </div>
    </div>

    {# Names (left) + biography and affiliations (right) #}
    <div class="row">

      {# Left column: given/family/other names #}
      <div class="four wide computer sixteen wide tablet column">
        {% if person.given_name or person.family_name or person.additional_names or person.country %}
          <div class="rel-mt-0">
            {% if person.given_name %}
              <div><strong>{{ _("Given names") }}</strong></div>
              <div>{{ person.given_name }}</div>
            {% endif %}
            {% if person.family_name %}
              <div class="rel-mt-1"><strong>{{ _("Family names") }}</strong></div>
              <div>{{ person.family_name }}</div>
            {% endif %}
            {% if person.additional_names %}
              <div class="rel-mt-1"><strong>{{ _("Also known as") }}</strong></div>
              <div>{{ person.additional_names | join(", ") }}</div>
            {% endif %}
            {% if person.country %}
              <div class="rel-mt-1"><strong>{{ _("Country") }}</strong></div>
              <div>{{ person.country | country_name }}</div>
            {% endif %}
          </div>
        {% endif %}

      </div>

      {# Right column: biography, then affiliations #}
      <div class="twelve wide computer sixteen wide tablet column">
        {% if person.description %}
          <h3 class="ui header rel-mt-0 computer only">{{ _("Biography") }}</h3>
          <h3 class="ui header rel-mt-2 tablet mobile only">{{ _("Biography") }}</h3>
          <p>{{ person.description }}</p>
        {% endif %}

        {% if employment %}
          {# Sits flush at the top when there is no biography above it, mirroring
             how the Biography heading handles being first in the column. #}
          <h3 class="ui header {{ 'rel-mt-2' if person.description else 'rel-mt-0' }} computer only" style="margin-bottom: 0;">{{ _("Affiliations") }}</h3>
          <h3 class="ui header rel-mt-2 tablet mobile only" style="margin-bottom: 0;">{{ _("Affiliations") }}</h3>
          {# Line breaks and spacing between organisation / role / dates come
             from .person-affiliations in assets/less/site/elements/list.overrides
             (which also covers .organization-relations),
             not from markup. #}
          <div class="ui list person-affiliations">
            {% for emp in employment %}
              <div class="item">
                <div class="content">
                  {% if emp.id %}
                    <a href="/organizations/{{ emp.id }}">{{ emp.name or emp.id }}</a>
                    <a href="https://ror.org/{{ emp.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>
                  {% else %}
                    {{ emp.name }}
                  {% endif %}
                  {% if emp.role %}
                    <div class="description">{{ emp.role }}</div>
                  {% endif %}
                  {% if emp.start_date_display or emp.end_date_display %}
                    <div class="description">
                      {%- if emp.start_date_display and emp.end_date_display %}{{ emp.start_date_display }} &ndash; {{ emp.end_date_display }}
                      {%- elif emp.start_date_display %}{{ _("Started") }} {{ emp.start_date_display }}
                      {%- else %}{{ _("Ended") }} {{ emp.end_date_display }}{% endif %}
                    </div>
                  {% endif %}
                </div>
              </div>
            {% endfor %}
          </div>
        {% endif %}
      </div>

    </div>

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

  </div>

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

{%- endblock page_body %}