{#
/**
 * @file
 * Theme override to display a block.
 *
 * Available variables:
 * - plugin_id: The ID of the block implementation.
 * - label: The configured label of the block if visible.
 * - configuration: A list of the block's configuration values.
 *   - label: The configured label for the block.
 *   - label_display: The display settings for the label.
 *   - provider: The module or other provider that provided this block plugin.
 *   - Block plugin specific settings will also be stored here.
 * - content: The content of this block.
 * - attributes: array of HTML attributes populated by modules, intended to
 *   be added to the main container tag of this template.
 *   - id: A valid HTML ID and guaranteed unique.
 * - title_attributes: Same as attributes, except applied to the main title
 *   tag that appears in the template.
 * - title_prefix: Additional output populated by modules, intended to be
 *   displayed in front of the main title tag that appears in the template.
 * - title_suffix: Additional output populated by modules, intended to be
 *   displayed after the main title tag that appears in the template.
 *
 * @see template_preprocess_block()
 */
#}
{% set classes = [
  'block',
  'block-' ~ configuration.provider|clean_class,
  'block-' ~ plugin_id|clean_class,
  'small-y-statistics-block',
  style
] %}

{{ attach_library('ws_small_y_statistics/small_y_statistics') }}
{% set statistic_id = 'lb-statistics-' ~ configuration['block_revision_id'] %}

<div{{ attributes.addClass(classes).setAttribute('id', plugin_id|clean_class ~ configuration['block_revision_id']) }}>
  {{ title_prefix }}
  {{ title_suffix }}
  {% block content %}
    {% if block_content.field_section_title or block_content.field_body %}
      <div class="statistics-header">
        <div class="container">
          <div class="statistics-header--wrapper">
            {% if block_content.field_section_title %}
              <h2 class="statistics-header--title col-12">{{ block_content.field_section_title.value }}</h2>
            {% endif %}
            {% if block_content.field_body %}
              <p class="statistics-header--description col-12 col-lg-6">{{ block_content.field_body.value }}</p>
            {% endif %}
          </div>
          {% block chevron %}
            <div class="chevron">
              {% include "@small_y_hero/chevron_mask.html.twig" %}
            </div>
            <div class="chevron lighter">
              {% include "@small_y_hero/chevron_mask.html.twig" %}
            </div>
          {% endblock %}
        </div>
      </div>
    {% endif %}
    <div class="statistics-content container">
      <div class="statistics-content--wrapper stats row" id="{{ statistic_id }}">
        {% if items %}
          {% for key, item in items %}
            {% set safe_hash = configuration['block_revision_id'] ~ '--' ~ loop.index %}
            {% set pp_attr = create_attribute() %}
            {% set pp_classes = [
              'statistics-content-item',
              'col-12',
              'col-lg-6',
            ] %}

            <div{{ pp_attr.addClass(pp_classes) }}>
              <div class="inner">
                {% if item.number %}
                  <div class="g-0 h2 statistics-content-item--count">
                    {# Optionally add: data-duration="" to change the count speed from the default 3000ms. #}
                    {{ item.prefix }}<span class="js-count" data-count="{{ item.number }}">0</span>{{ item.suffix }}
                  </div>
                {% endif %}
                <div class="statistics-content-item--wrapper">
                  {% if item.title %}
                    <p class="statistics-content-item--title">{{ item.title }}</p>
                  {% endif %}
                  {% if item.description %}
                    <p class="statistics-content-item--description">{{ item.description|raw }}</p>
                  {% endif %}
                </div>
              </div>
            </div>
          {% endfor %}
        {% endif %}
      </div>
    </div>
  {% endblock %}
</div>
