{#
/**
 * @file
 * Default theme implementation for a viewfield
 *
 * To override output, copy the "viewfield.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:
 * - viewfield--node--field-foo--article.html.twig
 * - viewfield--node--field-foo.html.twig
 * - viewfield--node--article.html.twig
 * - viewfield--field-foo.html.twig
 * - viewfield--text-with-summary.html.twig
 * - viewfield.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 viewfield items.
 * - entity: The entity to which the field belongs.
 * - entity_type: The entity type to which the field belongs.
 * - bundle: The entity bundle to which the field belongs.
 * - field_name: The name of the field.
 * - label_display: The display settings for the label.
 *
 *
 * @see template_preprocess_viewfield()
 */
#}
{%
  set classes = [
    'field',
    'field--name-' ~ field_name|clean_class,
    'field--type-' ~ field_type|clean_class,
    'field--label-' ~ label_display,
  ]
%}
{%
  set title_classes = [
    'field__label',
    label_display == 'visually_hidden' ? 'visually-hidden',
  ]
%}

<div{{ attributes.addClass(classes) }}>
  {{ title_prefix }}
  {% if not label_hidden %}
    <div{{ title_attributes.addClass(title_classes) }}>{{ label }}</div>
  {% endif %}
  {{ title_suffix }}
  {% if multiple %}
<div class="tabbing-wrapper">
  <ul class="nav nav-tabs" id="viewTab" role="tablist">
    {% for item in items %}
      <li class="nav-item">
        {% set title = item['#title']|replace(" ", "-") %}
        {% set title2 = title|replace("'", "-") %}
        {% if loop.index0 == 0 %}
          <a class="nav-link active fs-16 fs-md-20" href="#{{ title2|lower }}" id="{{ title2|lower }}-tab" data-toggle="tab" role="tab" aria-controls="{{ title|lower }}" aria-selected="true">{{ item['#title'] }}</a>
        {% else %}
          <a class="nav-link fs-16 fs-md-20" href="#{{ title2|lower }}" id="{{ title2|lower }}-tab" data-toggle="tab" role="tab" aria-controls="{{ title|lower }}" aria-selected="false">{{ item['#title'] }}</a>
        {% endif %}
      </li>
    {% endfor %}
  </ul>
</div>

  {% endif %}
  <div class="tab-content" id="viewTabContent">
    {% for item in items %}
      {% set title = item['#title']|replace(" ", "-") %}
      {% set title2 = title|replace("'", "-") %}
      {% if loop.index0 == 0 %}
        <div id="{{ title2|lower }}" class="tab-container tab-pane fade active show" role="tabpanel" aria-labelledby="{{ title2|lower }}">
      {% else %}
        <div id="{{ title2|lower }}" class="tab-container tab-pane fade" role="tabpanel" aria-labelledby="{{ title2|lower }}">
      {% endif %}

          {{ item }}
        </div>
    {% endfor %}
  </div>
  {% if multiple %}

  {% endif %}
</div>