{#
/**
 * @file
 * Default theme implementation to display a paragraph.
 *
 * Available variables:
 * - paragraph: Full paragraph entity.
 *   - id: The paragraph ID.
 *   - bundle: The type of the paragraph, for example, "image" or "text".
 *   - authorid: The user ID of the paragraph author.
 *   - createdtime: Formatted creation date. Preprocess functions can
 *     reformat it by calling format_date() with the desired parameters on
 *     $variables['paragraph']->getCreatedTime().
 * - 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
 */
#}

{% set transparent_class = '' %}
{% set width_class = '' %}
{% set overlay_class = '' %}
{% set sidebar_class = '' %}
{% set sidebar_width_class = '' %}
{% set style = '' %}
{% set extra_classes = '' %}
{% set additinal_class = '' %}

{% if paragraph.bundle == 'general'  %}
	{% set additional_class = 'paragraph--type--default' %}
{% endif %}

{% set overlay_attributes = create_attribute() %}
{% set overlay_style = '' %}

{% if paragraph.field_bg_image.value  %}
	{% set transparent_class = 'transparent' %}
{% endif %}
{% if paragraph.field_section_bg_overlay.value == '0'  %}
	{% set overlay_class = 'without-overlay' %}
{% endif %}
{% if paragraph.field_extra_classes.value %}
	{% set extra_classes = paragraph.field_extra_classes.value %}
{% endif %}


{% if paragraph.field_sidebar_text.value  %}
	{% if paragraph.field_sidebar_width.value  %}
		{% set sidebar_class = 'sidebar-' ~ paragraph.field_sidebar_position.value %}
	{% endif %}
	{% if paragraph.field_sidebar_width.value  %}
		{% set sidebar_width_class = 'sidebar-' ~ paragraph.field_sidebar_width.value %}
	{% endif %}
{% endif %}

{% if paragraph.field_section_width.value  %}
	{% set width_class = 'width-' ~ paragraph.field_section_width.value %}
{% endif %}

{% if paragraph.field_bg_color.color %}
	{% set style = 'background-color:' ~  paragraph.field_bg_color.color %}
{% endif %}

{% if content.field_section_bg_overlay_color|render %}
	{% set overlay_style = 'background:' ~  content.field_section_bg_overlay_color[0]['#markup'] %}
{% endif %}

{%
set classes = [
'paragraph',
'paragraph--type--' ~ paragraph.bundle|clean_class,
view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
transparent_class,
overlay_class,
width_class|clean_class,
sidebar_class|clean_class,
sidebar_width_class|clean_class,
extra_classes|clean_class
]
%}

<div{{attributes.addClass(classes).addClass(additional_class).setAttribute('style',style)}} js-field-bi>
	{% if paragraph.field_bg_image.value  %}
		<div class="bg-wrapper inview">
			<noscript>{{ content.field_bg_image }}</noscript>
			<span{{overlay_attributes.addClass('overlay').setAttribute('style',overlay_style)}}></span>
		</div>
	{% endif %}
	<div class="container inner">
		{{ title_prefix }}
		{{ title_suffix }}
		<div class="col-md-12">
			{% if paragraph.field_sidebar_position.value  %}
				{% if paragraph.field_sidebar_position.value == 'hidden'  %}
					<div class="content">
						{{ content|without('field_bg_image','field_sidebar_text', 'field_section_bg_overlay_color') }}
					</div>
				{% endif %}
				{% if paragraph.field_sidebar_position.value == 'right'  %}
					<div class="content">
						{{ content|without('field_bg_image','field_sidebar_text', 'field_section_bg_overlay_color') }}
					</div>
					<div class="sidebar">
						{{ content.field_sidebar_text }}
					</div>
				{% endif %}
				{% if paragraph.field_sidebar_position.value == 'left'  %}
					<div class="sidebar">
						{{ content.field_sidebar_text }}
					</div>
					<div class="content">
						{{ content|without('field_bg_image','field_sidebar_text', 'field_section_bg_overlay_color') }}
					</div>
				{% endif %}
			{% else %}
				<div class="content">
					{{ content|without('field_bg_image', 'field_section_bg_overlay_color') }}
				</div>
			{% endif %}
		</div>
	</div>
</div>