{#
/**
* @file
* Default theme implementation to display a 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('w3css_paragraphs/w3css-paragraphs') }}

{% set classes = [
  'w3-row',
  'p-container',
  '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
] %}

{# Merge width and custom w3.css classes to all classes. #}
{% if content.w3css_display_width|render %}
  {% set container_w_input = content.w3css_display_width|render|striptags|trim %}
  {% set container_width = 'p-container-width-' ~ container_w_input %}
  {% set classes = classes|merge([container_width]) %}
{% endif %}

{% if content.w3css_display_bg_color|render %}
  {% set w3css_bg_color = content.w3css_display_bg_color|render|striptags|trim %}
  {% set w3css_bg_color =  w3css_bg_color|slice(3) %}
  {% set w3css_bg_color =  w3css_bg_color|replace({'-':','}) %}
    {% if content.w3css_display_opacity|render %}
      {% set w3css_bg_opacity = content.w3css_display_opacity|render|striptags|trim %}
      {% set w3css_bg_opacity = '0.' ~ w3css_bg_opacity %}
    {% else %}
      {% set w3css_bg_opacity = '100' %}
    {% endif %}
  {% set w3css_bg_color = w3css_bg_color ~ ',' ~  w3css_bg_opacity %}
{% endif %}

{% if content.w3css_display_hover_bg|render %}
  {% set w3css_hover_bg = content.w3css_display_hover_bg|render|striptags|trim %}
  {% set w3css_image_classes = w3css_hover_bg %}
{% endif %}

{% if content.w3css_display_text_color|render %}
  {% set w3css_txt_color = content.w3css_display_text_color|render|striptags|trim %}
  {% set w3css_image_classes = w3css_image_classes ~ ' ' ~ w3css_txt_color %}
{% endif %}

{% if content.w3css_display_hover_text|render %}
  {% set w3css_hover_txt = content.w3css_display_hover_text|render|striptags|trim %}
  {% set w3css_image_classes = w3css_image_classes ~ ' ' ~ w3css_hover_txt %}
{% endif %}

{% if content.w3css_display_border|render %}
  {% set w3css_border = content.w3css_display_border|render|striptags|trim %}
  {% set w3css_image_classes = w3css_image_classes ~ ' ' ~ w3css_border %}
{% endif %}

{% if content.w3css_display_round|render %}
  {% set w3css_round = content.w3css_display_round|render|striptags|trim %}
  {% set w3css_image_classes = w3css_image_classes ~ ' ' ~ w3css_round %}
{% endif %}

{% if content.w3css_display_border_color|render %}
  {% set w3css_border_color = content.w3css_display_border_color|render|striptags|trim %}
  {% set w3css_image_classes = w3css_image_classes ~ ' ' ~ w3css_border_color %}
{% endif %}

{% if content.w3css_display_hover_border|render %}
  {% set w3css_hover_border = content.w3css_display_hover_border|render|striptags|trim %}
  {% set w3css_image_classes = w3css_image_classes ~ ' ' ~ w3css_hover_border %}
{% endif %}

{% if content.w3css_display_card|render %}
  {% set w3css_card = content.w3css_display_card|render|striptags|trim %}
  {% set w3css_image_classes = w3css_image_classes ~ ' ' ~ w3css_card %}
{% endif %}

{# margin and padding only for child div #}
{% if content.w3css_display_margin|render %}
  {% set w3css_margin = content.w3css_display_margin|render|striptags|trim %}
  {% set w3css_margin_padding = w3css_margin %}
{% endif %}

{% if content.w3css_display_padding|render %}
  {% set w3css_padding = content.w3css_display_padding|render|striptags|trim %}
  {% set w3css_margin_padding = w3css_margin_padding ~ ' ' ~ w3css_padding %}
{% endif %}

{# Image and link #}
{% if content.w3css_content_link|render is not empty %}
  {% set w3css_link = content.w3css_content_link.0['#url'] %}
  {% if content.w3css_content_link_title_attr|render|striptags|trim %}
    {% set w3css_link_title_attr = content.w3css_content_link_title_attr|render|striptags|trim %}
  {% endif %}
{% endif %}

{% if content.w3css_content_image|render is not empty %}
  {% set w3css_image = content.w3css_content_image %}
{% endif %}

{% set paragraph_id = 'w3-image-' ~ paragraph.id.value %}

<div id="{{ paragraph_id }}" {{ attributes.addClass(classes) }}>
  <div {% if w3css_bg_color %}style="background-color: rgba( {{ w3css_bg_color }} )" {% endif %} class="w3-row p-container-inner{{ w3css_image_classes == '' ? '' : ' ' ~ w3css_image_classes }}">

    {% if w3css_margin_padding %}
    <div class="w3-row {{ w3css_margin_padding }}">
    {% endif %}

      {% if content.w3css_content_title|render %}
      <h3 class="content-title">{{ content.w3css_content_title }}</h3>
      {% endif %}

      {% if w3css_link %}
      <a href="{{ w3css_link }}" class="w3-row w3css-link" {% if w3css_link_title_attr %} title="{{ w3css_link_title_attr }}" {% endif %}>
      {% endif %}

        <div class="w3-row w3-img-wrapper {{ w3css_round == '' ? '' : ' ' ~ w3css_round }}{% if content.w3css_content_title|render %} w3-dis-top-left-right {% endif %}{% if w3css_padding %} w3-dis-radius {% endif %}"> {{ w3css_image }}
        </div>

      {% if w3css_link %}
      </a>
      {% endif %}

    {% if w3css_margin_padding %}
    </div>
    {% endif %}

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