themes/quanthub_tailwindcss/templates/field/field--node--field-metadata--dataset--full.html.twig

{#
/**
 * @file
 * Theme override for a field.
 *
 * To override output, copy the "field.html.twig" from the templates directory
 * to your theme's directory and customize it, just like customizing other
 * Drupal templates such as page.html.twig or node.html.twig.
 *
 * Instead of overriding the theming for all fields, you can also just override
 * theming for a subset of fields using
 * @link themeable Theme hook suggestions. @endlink For example,
 * here are some theme hook suggestions that can be used for a field_foo field
 * on an article node type:
 * - field--node--field-foo--article.html.twig
 * - field--node--field-foo.html.twig
 * - field--node--article.html.twig
 * - field--field-foo.html.twig
 * - field--text-with-summary.html.twig
 * - field.html.twig
 *
 * Available variables:
 * - attributes: HTML attributes for the containing element.
 * - label_hidden: Whether to show the field label or not.
 * - title_attributes: HTML attributes for the title.
 * - label: The label for the field.
 * - multiple: TRUE if a field can contain multiple items.
 * - items: List of all the field items. Each item contains:
 *   - attributes: List of HTML attributes for each item.
 *   - content: The field item's content.
 * - entity_type: The entity type to which the field belongs.
 * - field_name: The name of the field.
 * - field_type: The type of the field.
 * - label_display: The display settings for the label.
 *
 *
 * @see template_preprocess_field()
 */
#}

{{ attach_library('quanthub_download_button/download-button') }}
{{ attach_library('quanthub_metadata_button/metadata-button') }}

{%
  set classes = [
    'field',
    'field--name-' ~ field_name|clean_class,
    'field--type-' ~ field_type|clean_class,
    'field--label-' ~ label_display,
    label_display == 'inline' ? 'clearfix',
  ]
%}
{%
  set title_classes = [
    'field__label',
    label_display == 'visually_hidden' ? 'visually-hidden',
  ]
%}

{% if label_hidden %}
  {% if multiple %}
    <div{{ attributes.addClass(classes, 'field__items metadata') }}>
      {% for item in items %}
        <div{{ item.attributes.addClass('field__item') }}>{{ item.content }}</div>
      {% endfor %}
    </div>
  {% else %}
    {% for item in items %}
      <div{{ attributes.addClass(classes, 'field__item') }}>{{ item.content }}</div>
    {% endfor %}
  {% endif %}
{% else %}
  <div{{ attributes.addClass(classes) }}>
    <div{{ title_attributes.addClass(title_classes) }}>{{ label }}</div>
    {% if multiple %}
      <div class="field__items">
    {% endif %}
    {% for item in items %}
      <div{{ item.attributes.addClass('field__item') }}>{{ item.content }}</div>
    {% endfor %}
    {% if multiple %}
      </div>
    {% endif %}
  </div>
{% endif %}

<ul class="flex gap-4 py-4 border-bottom">
  <li>
    <div class="download_button_id" data-btn-class="primary-button"
         data-urn="{{ quanthub_urn }}"></div>
  </li>
  <li>
    <a href="/{{ langcode }}/explorer?urn={{ quanthub_urn }}"
       class="secondary-button">
      <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
           xmlns="http://www.w3.org/2000/svg">
        <path
          d="M8.00001 1.33333C4.32001 1.33333 1.33334 4.31999 1.33334 8C1.33334 11.68 4.32001 14.6667 8.00001 14.6667C11.68 14.6667 14.6667 11.68 14.6667 8C14.6667 4.31999 11.68 1.33333 8.00001 1.33333ZM8.00001 13.3333C5.06001 13.3333 2.66668 10.94 2.66668 8C2.66668 5.06 5.06001 2.66666 8.00001 2.66666C10.94 2.66666 13.3333 5.06 13.3333 8C13.3333 10.94 10.94 13.3333 8.00001 13.3333ZM4.33334 11.6667L9.34001 9.34L11.6667 4.33333L6.66001 6.66L4.33334 11.6667ZM8.00001 7.26666C8.40668 7.26666 8.73334 7.59333 8.73334 8C8.73334 8.40666 8.40668 8.73333 8.00001 8.73333C7.59334 8.73333 7.26668 8.40666 7.26668 8C7.26668 7.59333 7.59334 7.26666 8.00001 7.26666Z"
          fill="#424A9C" />
      </svg>
      {{ 'Explore'|t }}
    </a>
  </li>
  <li>
    <div class="metadata_button_id" data-btn-class="secondary-button"
         data-urn="{{ quanthub_urn }}"></div>
  </li>
</ul>