{#
/**
* @file
* Default theme implementation to display a 'image-overlay' 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_image_overlay/paragraph-bundle-image-overlay') }}

{# Set the paragraph id. #}
{% set paragraph_id  = 'pb__image-overlay-' ~ paragraph.id.value %}
{# Set the inner classes for the paragraph. #}
{% set classes_inner = 'paragraph__inner pb__image-overlay__inner pb__content-full' %}

{# 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,
  paragraph_id
] %}

{# Set the color styles for the paragraph. #}
{% set pb_styles = {
  'pb-bg': 'pb_display_bg',
  'pb-tx': 'pb_display_text',
} %}

{# 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_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 %}
    {# In case widget was changed. #}
      {% set pb_style_attributes = pb_style_attributes|merge(['--' ~ key ~ ':rgb(' ~ style ~ ');']) %}
    {% endif %}

  {% endif %}
{% endfor %}

{# Set the overlay classes for the paragraph. #}
{% set pb_image_overlay = content.pb_display_image_overlay|render|striptags|trim %}
{% if pb_image_overlay %}
  {% set pb_image_overlay = 'pb__image-overlay-' ~ pb_image_overlay %}
  {% set classes = classes|merge([pb_image_overlay]) %}
{% endif %}


{# Title and link #}
{% set pb_link = content.pb_content_image_link.0['#url'] %}
{% set pb_link_title = content.pb_content_image_link_title|render|striptags|trim %}
{% set pb_title  = content.pb_content_title|render|striptags|trim %}

{# Radius and padding #}
{% set br_color         = content.pb_display_border_color|render|striptags|trim %}
{% set pb_br_radius     = content.pb_display_border_radius|render|striptags|trim %}
{% set pb_padding       = content.pb_display_padding|render|striptags|trim %}
{% set pb_br_color      = br_color ? 'border-color:rgb(' ~ br_color ~ ')' : '' %}
{% set pb_overlay_class = pb_br_radius ? 'pb__overlay-container ' ~ pb_br_radius : 'pb__overlay-container' %}
{% set pb_overlay_style = pb_style_attributes|length > 0 ? pb_style_attributes|join(' ') : '' %}
{% set pb_title_class   = pb_padding ? 'pb__content-title pb__overlay-title ' ~ pb_padding : 'pb__content-title pb__overlay-title' %}
{% set pb_title_style   = pb_image_overlay == 'pb__image-overlay-title' and pb_style_attributes|length > 0 ? pb_style_attributes|join(' ') : '' %}

{# Render the paragraph. #}
<div {{ attributes.addClass(classes).setAttribute('id', paragraph_id) }}>
  <div {% if classes_inner is not empty %}class="{{ classes_inner }}"{% endif %} {% if pb_br_color is not empty %}style="{{ pb_br_color }}"{% endif %}>

    <div class="pb__img-wrapper">
      {{ content.pb_content_image }}
    </div>

    <div {% if pb_overlay_class is not empty %}class="{{ pb_overlay_class }}"{% endif %} {% if pb_overlay_style is not empty %}style="{{ pb_overlay_style }}"{% endif %}>

      {% if pb_link %}
      <a href="{{ pb_link }}" class="pb__row pb__link" title="{{ pb_link_title }}">
      {% endif %}

      <div class="pb__row">
        {% if pb_title %}
        <h3 {% if pb_title_class is not empty %}class="{{ pb_title_class }}"{% endif %} {% if pb_title_style is not empty %}style="{{ pb_title_style }}"{% endif %}>
          {{ content.pb_content_title }}
        </h3>
        {% endif %}
      </div>

      {% if pb_link %}
      </a>
      {% endif %}
    </div>

  </div>
</div> {# End of main wrapper #}
