{% extends "detail_view.html" %}
{% load i18n static humanize thumbnail %}
{% comment %}
  The overview page every core record shares: project, dataset, sample and measurement.

  One anatomy on all four, so a reader finds the same fact in the same place: notices, the header
  (badges, name, a line placing the record, keywords, actions), a strip of figures, then the
  content in a wide column with the facts a reuser checks in a narrow column beside it. Below
  `lg` the columns stack, content first.

  Each record's own template extends this one and fills blocks. A sample or measurement type
  extends its record's template the same way, using `{{ block.super }}` to add to a block and keep
  what is there. Blocks, in page order:

    overview.notices        alerts above the header, so they are read first
    overview.image          header: the record's image, or its icon
    overview.badges         header: status badges
    overview.name           header: the name inside the heading
    overview.byline         header: the people behind the record (a project's leads, a
                            dataset's creators), avatar and name, no caption
    overview.keywords       header: keywords
    overview.actions        header: buttons (Cite and Share by default, then the Manage menu)
      overview.manage         the Manage menu, drawn by `<c-actions.manage>`; fill it to add
                              entries through the component's slot, and put any button that
                              belongs before the menu in front of it
    overview.figures        the figures strip
    overview.main           the wide column; each record fills it with its own blocks
    overview.side           the facts column, which holds, in this order:
      overview.readiness      what the team still has to add (team only)
      overview.details        what it belongs to, licence, status, dates, how machines reach it
        overview.details_extra  sections inside Details, e.g. a project's timeline
      overview.timeline       key dates in the record's life, where they have their own card
      overview.people         everyone credited, the people named in the header included
      overview.identifiers    DOI, IGSN and the rest, the team's own ID and the portal ID
      overview.funding        funding awards, on records that carry them
      overview.cite           how to cite it
      overview.record_facts   cards particular to the record (a dataset's publications)
    overview.chart_library  the ECharts script; replace it to serve ECharts yourself

  The facts-column blocks draw the shared `c-card.*` components from the context every overview
  plugin provides, so a record's template only overrides them to change what they say.
{% endcomment %}

{% block head %}
  {{ block.super }}
  {% if json_ld %}
    {% comment %}
      schema.org JSON-LD for search engines and harvesters. It carries nothing the viewer can't
      read on this page, and the characters that could end the element are escaped where it is
      built.
    {% endcomment %}
    <script type="application/ld+json">{{ json_ld|safe }}</script>
  {% endif %}
{% endblock head %}

{% block page.title %}
  {% block overview.notices %}{% endblock overview.notices %}

  <c-mvp.card.wrapper class="bg-base-100">
    <div class="card-body gap-4">
      <div class="flex flex-col md:flex-row gap-4 md:items-start">
        <div class="hidden md:block shrink-0">
          {% block overview.image %}
            {% if record.image %}
              <img src="{{ record.image|thumbnail_url:'core_small' }}" alt="" class="w-24 rounded-box object-cover" />
            {% else %}
              <div class="avatar avatar-placeholder">
                <div class="w-24 rounded-box bg-base-200 text-base-content/60 text-4xl">
                  <c-icon name="{{ overview_icon }}" aria-hidden="true" />
                </div>
              </div>
            {% endif %}
          {% endblock overview.image %}
        </div>

        <div class="flex flex-col gap-2 flex-1 min-w-0">
          <div class="flex flex-wrap items-center gap-2">
            {% block overview.badges %}{% endblock overview.badges %}
          </div>

          <h1 class="text-2xl lg:text-3xl font-semibold leading-tight break-words">{% block overview.name %}{{ record_title|default:record.name }}{% endblock overview.name %}</h1>

          {% block overview.byline %}
            {% if header_people %}
              <ul class="flex flex-wrap items-center gap-x-4 gap-y-2 text-sm" aria-label="{{ header_people_label }}">
                {% for person in header_people %}
                  <li>
                    <a href="{{ person.get_absolute_url }}" class="flex items-center gap-2 link link-hover">
                      <c-mvp.avatar :for="person" alt="" size="xs" />
                      <span>{{ person }}</span>
                    </a>
                  </li>
                {% endfor %}
              </ul>
            {% endif %}
          {% endblock overview.byline %}

          {% block overview.keywords %}
            {% with keywords=record.keywords.all %}
              {% if keywords %}
                <ul class="flex flex-wrap gap-1" aria-label="{% translate 'Keywords' %}">
                  {% for keyword in keywords %}
                    <li class="badge badge-primary badge-sm">{{ keyword.display_label }}</li>
                  {% endfor %}
                </ul>
              {% endif %}
            {% endwith %}
          {% endblock overview.keywords %}
        </div>

        <div class="flex flex-wrap gap-2 md:justify-end shrink-0">
          {% block overview.actions %}
            <c-button href="#cite" text="{% translate 'Cite' %}" icon="cite" size="sm" />
            <c-mvp.addons.share-dropdown size="sm" />
            {% block overview.manage %}
              <c-actions.manage :entries="manage_menu" />
            {% endblock overview.manage %}
          {% endblock overview.actions %}
        </div>
      </div>
    </div>
  </c-mvp.card.wrapper>
{% endblock page.title %}

{% block page.content %}
  {% block overview.figures %}{% endblock overview.figures %}

  <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 lg:gap-6">
    <div class="lg:col-span-2 flex flex-col gap-4 lg:gap-6 min-w-0">
      {% block overview.main %}{% endblock overview.main %}
    </div>

    <div class="flex flex-col gap-4 lg:gap-6 min-w-0">
      {% block overview.side %}

        {% block overview.readiness %}
          {% if readiness %}
            <c-card.readiness :readiness="readiness"
                              title="{{ readiness.title }}"
                              summary="{{ readiness.summary }}"
                              about="{{ readiness.about }}" />
          {% endif %}
        {% endblock overview.readiness %}

        {% block overview.details %}
          <c-card.details :rows="details" api_url="{{ api_url|default:'' }}">
            {% block overview.details_extra %}{% endblock overview.details_extra %}
          </c-card.details>
        {% endblock overview.details %}

        {% block overview.timeline %}{% endblock overview.timeline %}


        {% block overview.people %}
          <c-card.people :people="people" all_url="{{ people_url|default:'' }}" />
        {% endblock overview.people %}

        {% block overview.identifiers %}
          <c-card.identifiers :identifiers="identifiers"
                              portal_id="{{ record.uuid }}"
                              local_id="{{ record.local_id|default:'' }}" />
        {% endblock overview.identifiers %}

        {% block overview.funding %}
          {% if funding is not None %}
            <c-card.funding :funding="funding" :can_manage="can_manage" />
          {% endif %}
        {% endblock overview.funding %}

        {% block overview.cite %}
          <c-card.citation title="{{ citation.title }}" text="{{ citation.text }}">
            {{ citation.note }}
            {% if citation.note_url %}<a href="{{ citation.note_url }}" class="link link-primary">{{ citation.note_link }}</a>{% endif %}
          </c-card.citation>
        {% endblock overview.cite %}

        {% block overview.record_facts %}{% endblock overview.record_facts %}

      {% endblock overview.side %}
    </div>
  </div>
{% endblock page.content %}

{% block extra_js %}
  {{ block.super }}
  {% if has_charts %}
    {% block overview.chart_library %}
      <script src="https://cdn.jsdelivr.net/npm/echarts@6.1.0/dist/echarts.min.js"
              integrity="sha384-C2iskrW/uPW46KzOjrvJIQo4YkV8lkD+QS0CrDN18IIPIpT/g2USu8bTP3nvmIAD"
              crossorigin="anonymous"
              referrerpolicy="no-referrer"></script>
    {% endblock overview.chart_library %}
    <script src="{% static 'js/chart-theme.js' %}"></script>
    <script defer src="{% static 'mvp_charts/js/mvp-charts.js' %}"></script>
  {% endif %}
{% endblock extra_js %}