{#
/**
* @file
* Default theme implementation to display a 'slideshow' paragraph.
*
* Available variables:
* - paragraph: Full paragraph entity.
*   Only method names starting with "get", "has", or "is" and a few common
*   methods such as "id", "label", and "bundle" are available. For example:
*   - paragraph.getCreatedTime() will return the paragraph creation timestamp.
*   - paragraph.id(): The paragraph ID.
*   - paragraph.bundle(): The type of the paragraph, for example, "image" or "text".
*   - paragraph.getOwnerId(): The user ID of the paragraph author.
*   See Drupal\paragraphs\Entity\Paragraph for a full list of public properties
*   and methods for the paragraph object.
* - content: All paragraph items. Use {{ content }} to print them all,
*   or print a subset such as {{ content.field_example }}. Use
*   {{ content|without('field_example') }} to temporarily suppress the printing
*   of a given child element.
* - attributes: HTML attributes for the containing element.
*   The attributes.class element may contain one or more of the following
*   classes:
*   - paragraphs: The current template type (also known as a "theming hook").
*   - paragraphs--type-[type]: The current paragraphs type. For example, if the paragraph is an
*     "Image" it would result in "paragraphs--type--image". Note that the machine
*     name will often be in a short form of the human readable label.
*   - paragraphs--view-mode--[view_mode]: The View Mode of the paragraph; for example, a
*     preview would result in: "paragraphs--view-mode--preview", and
*     default: "paragraphs--view-mode--default".
* - view_mode: View mode; for example, "preview" or "full".
* - logged_in: Flag for authenticated user status. Will be true when the
*   current user is a logged-in member.
* - is_admin: Flag for admin user status. Will be true when the current user
*   is an administrator.
*
* @see template_preprocess_paragraph()
*
* @ingroup themeable
#}

{# Attach the necessary library. #}
{{ attach_library('paragraphs_bundles/paragraphs-bundles') }}
{{ attach_library('paragraph_bundle_slideshow/paragraph-bundle-slideshow') }}

{# Set paragraph id #}
{% set paragraph_id = 'pb__slide-wrap-' ~ paragraph.id.value %}
{% set slide_id = 'pb__slideshow-' ~ paragraph.id.value %}

{# Set the inner classes for the paragraph. #}
{% set classes_inner = 'paragraph__inner pb__slide-wrap__inner' %}
{# Slideshow fields #}
{% set pb_prev_next = content.pb_display_slide_prev_next|render|striptags|trim %}
{% set pb_bottom_nav = content.pb_display_bottom_navigation|render|striptags|trim %}
{% set pb_animated_tab = content.pb_display_slide_animated_slides|render|striptags|trim %}
{% set pb_slide_time = content.pb_display_slide_play_stop|render|striptags|trim|default('0') %}
{% set pb_title  = content.pb_content_title|render|striptags|trim %}
{% set has_bottom_nav = pb_bottom_nav != '' %}

{# Set the classes for the paragraph. #}
{% set classes = [
  'paragraph',
  'paragraph--type--' ~ paragraph.bundle|clean_class,
  view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
  not paragraph.isPublished() ? 'paragraph--unpublished',
  'paragraph--id--' ~ paragraph.id.value,
  has_bottom_nav ? 'has-bottom-nav',
  paragraph_id,
] %}

{# Set the color styles for the paragraph. #}
{% set pb_styles = {
  'pb-bg': 'pb_display_bg',
  'pb-bg-h': 'pb_display_bg_hover',
  'pb-br': 'pb_display_border_color',
  'pb-br-h': 'pb_display_border_hover',
  'pb-tx': 'pb_display_text',
  'pb-tx-h': 'pb_display_text_hover',
  'pb-bt-a': 'pb_display_slide_active_item'
} %}

{# Set the display properties for the paragraph. #}
{% set pb_displays = [
  'pb_display_width',
  'pb_display_border',
  'pb_display_border_radius',
  'pb_display_margin',
  'pb_display_padding',
  'pb_display_shadow',
] %}

{# Add display properties to the inner classes if they exist. #}
{% for pb_display in pb_displays %}
  {% set display_value = content[pb_display]|render|striptags|trim %}
  {% set classes_inner = display_value ? classes_inner ~ ' ' ~ display_value : classes_inner %}
{% endfor %}

{# Set the background opacity for the paragraph. #}
{% set pb_bg_opacity = content.pb_display_bg_opacity|render|striptags|trim %}
{% if pb_bg_opacity != 100 %}
  {% set pb_bg_opacity = '0.' ~ "%02d"|format(pb_bg_opacity) %}
{% endif %}

{# Set the style attributes for the paragraph. #}
{% set pb_style_attributes = [] %}
{% for key, value in pb_styles %}
  {% set style = content[value]|render|striptags|trim %}
  {% if style %}

    {% if value == 'pb_display_bg' %}
      {% set pb_style_attributes = pb_style_attributes|merge(['--' ~ key ~ ':rgba(' ~ style ~ ', ' ~ pb_bg_opacity ~ ');']) %}
    {% elseif style starts with '#' %}
      {% set pb_style_attributes = pb_style_attributes|merge(['--' ~ key ~ ':' ~ style ~ ';']) %}
    {% else %}
      {% set pb_style_attributes = pb_style_attributes|merge(['--' ~ key ~ ':rgb(' ~ style ~ ');']) %}
    {% endif %}

  {% endif %}
{% endfor %}

{# Main wrapper #}
<div {{ attributes.addClass(classes).setAttribute('id', paragraph_id) }}>
  <div class="{{ classes_inner }}" {% if pb_style_attributes|length > 0 %}style="{{ pb_style_attributes|join(' ') }}"{% endif %}>
    <div class="pb__content-full">
      {% if pb_title %}
        <h3 class="pb__content-title">{{ content.pb_content_title }}</h3>
      {% endif %}

      {% set total_slides = 0 %}
      <div id="{{ slide_id }}" class="pb__slideshow-inner{{ pb_bottom_nav ? ' ' ~ pb_bottom_nav }}{{ pb_slide_time == 0 ? ' zero' : ' not-zero' }}" data-slide-time="{{ pb_slide_time }}">
        <div id="pb__slides-{{ paragraph.id.value }}" class="pb__slides">
          {% for key, item in content.pb_content_slideshow_section %}
            {% if key|first != '#' %}
              {% set total_slides = total_slides + 1 %}

              <div id="pb__slide-item-{{ paragraph.id.value }}-{{ key + 1 }}" role="tabpanel" data-index="{{ key }}" aria-hidden="{% if key == 0 %}false{% else %}true{% endif %}" {% if pb_bottom_nav %}aria-labelledby="pb__slide-bottom-btn-{{ (key + 1) }}"{% endif %} class="pb__row pb__slide-item">
                <div class="pb__row pb__slide-item-inner{{ pb_animated_tab == '' ? '' : ' ' ~ pb_animated_tab }}" id="{{ slide_id }}-{{ key + 1 }}-pane">
                  {% for body_key, body_item in item['#paragraph'].pb_content_slideshow_body %}
                    {% set section_body = item %}
                    {% set lang = section_body['#paragraph'].langcode[0].value %}
                    {% if section_body['#paragraph'].pb_content_slideshow_body[body_key].entity.hasTranslation(lang) %}
                      {% set section_translation = section_body['#paragraph'].pb_content_slideshow_body[body_key].entity.getTranslation(lang) %}
                    {% else %}
                      {% set section_translation = section_body['#paragraph'].pb_content_slideshow_body[body_key].entity %}
                    {% endif %}
                    {% set section_body = section_body|merge({'#paragraph': section_translation}) %}
                    {% set section_body = section_body|merge({'#cache': {}}) %}
                    {{ section_body }}
                  {% endfor %}
                  {% if item['#paragraph'].pb_content_slideshow_title.value %}
                    <div class="pb__row pb__slide-title">{{ item['#paragraph'].pb_content_slideshow_title.value|decode_entities }}</div>
                  {% endif %}
                </div>
              </div>

            {% endif %}
          {% endfor %}
        </div>
        <div class="pb__announcer visually-hidden" aria-live="polite"></div>

        {% set show_play_button = pb_bottom_nav in ['dot', 'nav', 'play'] and pb_slide_time > 0 %}
        {% set show_navigation_buttons = pb_bottom_nav in ['dot', 'nav', 'dot_play', 'nav_play'] %}

        {% if show_play_button or show_navigation_buttons %}
          <div id="pb__slide-nav-{{ paragraph.id.value }}" role="tablist" aria-label="{{ 'Slideshow Tabs'|t }}" class="pb__slide-nav pb__slide-number {{ pb_bottom_nav }}">

            {# Play button if enabled #}

            {% if show_play_button %}
              <button id="btn-{{ paragraph.id.value }}" type="button" role="tab"
                      aria-label="{{ 'Pause slideshow'|t }}"
                      class="pb__button pb__play is-playing {% if pb_slide_time == 0 %} hide-{{ pb_slide_time }}{% endif %}"
                      aria-live="polite">
                <span class="visually-hidden">{{ 'Play and Stop Slideshow'|t }}</span>
                <span>{{ include('@paragraph_bundle_slideshow/svg/svg-pause.svg') }}</span>
              </button>
            {% endif %}

            {# Navigation dots or numbers #}
            {% if show_navigation_buttons %}
              {% for key, item in content.pb_content_slideshow_section %}
                {% if key|first != '#' %}
                  <button id="pb__slide-bottom-btn-{{ key + 1 }}" type="button" role="tab"
                          aria-label="{{ 'Slide '|t ~ (key + 1) }}"
                          aria-selected="{{ key == 0 ? 'true' : 'false' }}"
                          aria-controls="pb__slide-item-{{ paragraph.id.value }}-{{ key + 1 }}"
                          class="pb__button pb__slide-bottom-btn{{ key == 0 ? ' pb__active' : '' }}"
                          {% if key != 0 %}tabindex="-1"{% endif %}>
                    <span>{{ key + 1 }}</span>
                  </button>
                {% endif %}
              {% endfor %}
            {% endif %}
          </div>
        {% endif %}

        {% if pb_prev_next == "On" %}
          <div id="pb__slide-arrows-{{ paragraph.id.value }}" class="pb__bar pb__slide-arrows pb__prev-next-arrow-{{ pb_prev_next }}" role="navigation" aria-label="{{ 'Slideshow Navigation'|t }}">
            <button class="pb__prev pb__button" role="button" aria-controls="pb__slides-{{ paragraph.id.value }}" aria-label="{{ 'Previous Slide'|t }}">
              <span class="visually-hidden">{{ 'Previous Slide'|t }}</span>
              <span>{{ include('@paragraph_bundle_slideshow/svg/svg-prev.svg') }}</span>
            </button>
            <button class="pb__next pb__button" role="button" aria-controls="pb__slides-{{ paragraph.id.value }}" aria-label="{{ 'Next Slide'|t }}">
              <span class="visually-hidden">{{ 'Next Slide'|t }}</span>
              <span>{{ include('@paragraph_bundle_slideshow/svg/svg-next.svg') }}</span>
            </button>
          </div>
        {% endif %}
      </div>
    </div>
  </div>
</div>
