{#
/**
* @file
* Default theme implementation to display a 'image-background' 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_library('paragraphs_bundles/paragraphs-bundles') }}
{{ attach_library('paragraph_bundle_image_background/paragraph-bundle-image-background') }}

{% set paragraph_id = 'pb__image-bg-' ~ paragraph.id.value %}
{% set classes_inner = 'paragraph__inner pb__image-bg__inner pb__content-full' %}
{% 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 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 pb_image_position = content.pb_display_image_alignment|render|striptags|trim|capitalize %}
{% set pb_image_position = pb_image_position|replace({'_': ' '}) %}
{% set pb_image_position = pb_image_position|split(' ') %}
{% set pb_image_position = pb_image_position|first|capitalize ~ ' ' ~ pb_image_position|last|capitalize %}
{% set pb_image_repetition = content.pb_display_image_repetition|render|striptags|trim %}
{% set pb_image_repetition = pb_image_repetition|replace({'_': '-'}) %}
{% set pb_display_bg = content.pb_display_bg|render|striptags|trim %}
{% set pb_image_url = content.pb_display_background_image|render|striptags|trim %}
{% set pb_image_alt = content.pb_display_background_image['#attributes']['alt']|default('') %}
{% set pb_image_title = content.pb_display_background_image['#attributes']['title']|default('') %}
{% set pb_image_url_sm = content.pb_display_background_image_sm|render|striptags|trim %}
{% set pb_background_attachment = content.pb_display_background_attachment|render|striptags|trim %}
{% set pb_image_sizing = content.pb_display_image_sizing|render|striptags|trim %}
{% set pb_min_height = content.pb_display_image_min_height|render|striptags|trim %}

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

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

{# Checking if an image for small screen is provided #}
{% if pb_image_url_sm %}
  {% set pb_breakpoint = content.pb_display_image_breakpoint|render|striptags|trim %}
  {% set pb_breakpoint = pb_breakpoint ?: 'pb__992' %} {# Default to pb__992 if no value is provided #}
  {% set breakpoints = {
    'pb__576': 576,
    'pb__768': 768,
    'pb__992': 992,
    'pb__1200': 1200,
    'pb__1400': 1400
  } %}
  {% set breakpoint_value = breakpoints[pb_breakpoint] %}

  <div {{ attributes.addClass(classes).setAttribute('id', paragraph_id) }}
       data-breakpoint="{{ breakpoint_value }}"
       data-image-big="{{ pb_image_url }}"
       data-image-small="{{ pb_image_url_sm }}"
       {% if pb_image_title %} data-image-title="{{ pb_image_title }}"{% endif %}
       {% if pb_image_alt %} data-image-alt="{{ pb_image_alt }}"{% endif %}
       style="
         background-attachment: {{ pb_background_attachment }};
         background-position: {{ pb_image_position }};
         background-repeat: {{ pb_image_repetition }};
         background-size: {{ pb_image_sizing }};
         {% if pb_min_height %} min-height: {{ pb_min_height }}px;{% endif %}">
{% else %}
  <div {{ attributes.addClass(classes).setAttribute('id', paragraph_id) }}
       data-image-big="{{ pb_image_url }}"
       {% if pb_image_title %} data-image-title="{{ pb_image_title }}"{% endif %}
       {% if pb_image_alt %} data-image-alt="{{ pb_image_alt }}"{% endif %}

       style="
         background-image: url('{{ pb_image_url }}');
         background-attachment: {{ pb_background_attachment }};
         background-position: {{ pb_image_position }};
         background-repeat: {{ pb_image_repetition }};
         background-size: {{ pb_image_sizing }};
         {% if pb_min_height %} min-height: {{ pb_min_height }}px;{% endif %}">
{% endif %}

{% if pb_display_bg %}
  <div class="img-color-overlay" style="background-color: rgba({{ pb_display_bg }}, {{ pb_bg_opacity }});"></div>
{% endif %}

<div class="{{ classes_inner }}">
  {{ content.pb_content_main }}
</div>
</div>
