{% load i18n %}
{% comment %}
  The record's type as a primary badge in the header. When the registry describes the type, the
  badge is a button that opens that description in a dialog.

  Include with: label (the type's name), info (from `type_info`), id (the dialog's id)
{% endcomment %}
{% if info %}
  <button type="button" class="badge badge-primary badge-sm cursor-pointer" onclick="{{ id }}.showModal()"
          aria-haspopup="dialog" title="{% blocktranslate with type=label %}About {{ type }}{% endblocktranslate %}">{{ label|capfirst }}</button>
  {% blocktranslate with type=label|capfirst asvar about %}About {{ type }}{% endblocktranslate %}
  {% comment %}
    The dialog is written out here, not drawn by `c-modal`, because `c-modal` gives the `<dialog>`
    element no name, and a dialog with no name is announced as nothing at all.
  {% endcomment %}
  <dialog id="{{ id }}" class="modal" aria-label="{{ about }}">
    <div class="modal-box bg-transparent p-0 shadow-none w-11/12 max-w-2xl">
      <c-mvp.card title="{{ about }}" class="w-full h-full">
        <div class="flex flex-col gap-4">
          {% if info.description %}<p class="text-sm">{{ info.description }}</p>{% endif %}
          {% if info.keywords %}
            <ul class="flex flex-wrap gap-1" aria-label="{% translate 'Keywords' %}">
              {% for keyword in info.keywords %}<li class="badge badge-outline badge-sm">{{ keyword }}</li>{% endfor %}
            </ul>
          {% endif %}
          {% if info.authority or info.citation %}
            <div class="flex flex-col gap-1 text-sm text-base-content/70">
              {% if info.authority %}
                <p>{% translate "Recorded to the schema maintained by" %} {% if info.authority.website %}<a href="{{ info.authority.website }}" class="link link-hover">{{ info.authority.name }}</a>{% else %}{{ info.authority.name }}{% endif %}.</p>
              {% endif %}
              {% if info.citation.text %}
                <p>{% translate "Protocol:" %} {% if info.citation.doi %}<a href="{{ info.citation.doi }}" class="link link-hover">{{ info.citation.text }}</a>{% else %}{{ info.citation.text }}{% endif %}</p>
              {% endif %}
            </div>
          {% endif %}
        </div>
      </c-mvp.card>
      <form method="dialog">
        <button class="btn btn-sm btn-circle btn-ghost absolute end-3 top-3" aria-label="{% translate 'Close' %}">✕</button>
      </form>
    </div>
    <form method="dialog" class="modal-backdrop">
      <button aria-label="{% translate 'Close' %}">{% translate "Close" %}</button>
    </form>
  </dialog>
{% else %}
  <span class="badge badge-primary badge-sm">{{ label|capfirst }}</span>
{% endif %}