{% extends 'areas/col/options.html.twig' %}
{% block view %}
{% if colBackground == "image" and colImage %}
{% set markers = colImage.getMarker() %}
{% set markerX = '' %}
{% set markerY = '' %}
{% set break = false %}
{% for marker in markers %}
{% if not break %}
{% if marker.data == [] and marker.name == '' %}
{% set markerX = marker.left %}
{% set markerY = marker.top %}
{% set break = true %}
{% endif %}
{% endif %}
{% endfor %}
{% if markerX > 0 and markerY > 0 %}
{% set imagePosition = image_marker_position_x_y(markerX, markerY) %}
{% else %}
{% set imagePosition = 'center-center' %}
{% endif %}
{% endif %}
{% if contentInclude is not defined %}
{% set colSizeLgValue = colSizeLgSelect.getData() %}
{% set colSizeMdValue = colSizeMdSelect.getData() %}
{% set colSizeSmValue = colSizeSmSelect.getData() %}
{% set colOpacityValue = colOpacity.getData() %}
{% set colGradientOpacityValue = colGradientOpacity.getData() %}
{% set colMarginSelectValue = colMarginSelect.getData() %}
{% endif %}
{% if colSizeLgValue == '12' %}
{% set thumbnailSize = 'col-12' %}
{% elseif colSizeLgValue == '11' %}
{% set thumbnailSize = 'col-11' %}
{% elseif colSizeLgValue == '10' %}
{% set thumbnailSize = 'col-10' %}
{% elseif colSizeLgValue == '9' %}
{% set thumbnailSize = 'col-9' %}
{% elseif colSizeLgValue == '8' %}
{% set thumbnailSize = 'col-8' %}
{% elseif colSizeLgValue == '7' %}
{% set thumbnailSize = 'col-7' %}
{% elseif colSizeLgValue == '6' and colHeightSelect.text == '' %}
{% set thumbnailSize = 'col-6' %}
{% elseif colSizeLgValue == '6' and colHeightSelect.text > '49' %}
{% set thumbnailSize = 'col-9' %}
{% elseif colSizeLgValue == '5' %}
{% set thumbnailSize = 'col-5' %}
{% elseif colSizeLgValue == '4' %}
{% set thumbnailSize = 'col-4' %}
{% elseif colSizeLgValue == '3' and colHeightSelect.text == '' %}
{% set thumbnailSize = 'col-3' %}
{% elseif colSizeLgValue == '3' and colHeightSelect.text > '49' %}
{% set thumbnailSize = 'col-6' %}
{% else %}
{% set thumbnailSize = 'col-auto' %}
{% endif %}
{% set marginAlign = '' %}
{% if colCreateSpacerSelect.isChecked() == true %}
{% set colWidthSm = 100 %}
{% set colWidthMd = 100 %}
{% set colWidthLg = 100 %}
{% if colSizeSmValue != 'auto' %}
{% set colWidthSm = (100 / 12) * (12 - colSizeSmValue) %}
{% endif %}
{% if colSizeMdValue != 'auto' %}
{% set colWidthMd = (100 / 12) * (12 - colSizeMdValue) %}
{% endif %}
{% if colSizeLgValue != 'auto' %}
{% set colWidthLg = (100 / 12) * (12 - colSizeLgValue) %}
{% endif %}
{% set marginAlign %}
--colMarginSm: {{colWidthSm}}%;
--colMarginMd: {{colWidthMd}}%;
--colMarginLg: {{colWidthLg}}%;
{% endset %}
{% endif %}
{% if colPaddingLeftRightSelect == null or colStickySelect.isChecked() %}
{% set colPaddingLeftRightClass = '' %}
{% else %}
{% set colPaddingLeftRightClass = colPaddingLeftRightSelect %}
{% endif %}
{% if colPaddingTopBottomSelect == null or colStickySelect.isChecked() %}
{% set colPaddingTopBottomClass = '' %}
{% else %}
{% set colPaddingTopBottomClass = colPaddingTopBottomSelect %}
{% endif %}
{#% if colInnerTopBottomSelect == null or colStickySelect.isChecked() %}
{% set colInnerTopBottomClass = '' %}
{% else %}
{% set colInnerTopBottomClass = colInnerTopBottomSelect %}
{% endif %#}
{% set gradientHtml %}
{# gradient #}
{% if (colBackground == 'video' or colBackground == 'image') and colGradientAlignment != 'none' and not editmode %}
{% if colGradientOpacityValue %}
{% set opacity = colGradientOpacityValue / 100 %}
{% endif %}
{% if colGradientColorSelect is not defined or colGradientColorSelect is null %}
{% set colGradientColorSelect = 'dark' %}
{% endif %}
<div class="gradient-{{colGradientAlignment}} gradient-color-{{colGradientColorSelect}} "{% if colGradientOpacity.number %} style="--gradientOpacity: {{opacity}}; --gradientSize: {{colGradientSize}}%;"{% endif %}></div>
{% endif %}
{% endset %}
<div
{% if editmode %}
data-width="{% if colSizeLgValue != 'auto' %}{{colSizeLgValue}}{% elseif colSizeMdValue != 'auto' %}{{colSizeMdValue}}{% elseif colSizeSmValue != 'auto' %}{{colSizeSmValue}}{% endif %}"
{% endif %}
class="c-col {{ colBehaveOffset }} {{colMarginSelectValue}}
{% if colStickySelect.isChecked() != true %}c-col__height--{{colHeightSelect}}{% endif %}
{# Alignment #}
align-self-{{colAlign}}
{# sticky #}
{% if colStickySelect.isChecked() == true and not editmode %}c-col__sticky{% endif %}
{# not equal hight #}
{% if colNotEqualHightSelect.isChecked() == true %}c-col__not-equal{% endif %}
{# grid #}
{% if not editmode %}
col-sm{% if colSizeSmValue != 'auto' %}-{{colSizeSmValue}}{% endif %}
col-md-{% if colSizeMdValue != 'auto' %}{{colSizeMdValue}}{% endif %}
col-lg-{% if colSizeLgValue != 'auto' %}{{colSizeLgValue}}{% endif %}
{% endif %}
{# gradient #}
{% if colStickySelect.isChecked() == true %}
gradient
{% endif %}
{% if colBackground == 'none' %}
background-{{colBackground}}
{% endif %}
"
{# spacer #}
{% if colCreateSpacerSelect.isChecked() == true and not editmode %}
style="{{marginAlign}}"
{% endif %}
>
{% set contentBlock %}
{% if contentInclude is not defined %}
{{ pimcore_areablock('colblock', {
'reload': true,
"allowed": ["wysiwyg", "image", "video", "separator", "accordion", "slider", "map", "html", "filter", "contact", "magazine", "angular-load-offer", "job", "loginbox", "downloadlist", "formular", "password-reset", "password-change", "angulartable", "angularbuttons", "angularkeygen", "angularform", "angularaccordion", "first-login", "first-login-password", "two-factor","angularmessage", "angularbutton-group","two-factor-activate", "two-factor-vm-number"],
"params": {
"colSize": colSizeLgValue
},
"group": {
"Standard": ["wysiwyg", "image", "video", "separator", "accordion", "slider", "map", "html", "formular"],
"Datenobjekte": ["filter", "contact", "magazine", "job", "loginbox", "downloadlist", "password-reset", "password-change", "first-login", "first-login-password","two-factor", "two-factor-activate", "two-factor-vm-number"],
"Erweitert": ["angulartable", "angularbuttons", "angularform", "angularaccordion", "angularkeygen", "angular-load-offer", "angularmessage", "angularbutton-group"]
}
})
}}
{% else %}
{% for componentVar in componentVars %}
{% include 'areas/' ~ componentVar['componentName'] ~ '/view.html.twig' with componentVar %}
{% endfor %}
{% endif %}
{% endset %}
{% if colBackground != 'none' %}
{% if colBackground == "video" and not editmode %} {# and not editmode #}
<div class="c-col__video{% if colStickySelect.isChecked() == true %} c-col__sticky{% endif %}">
{% if editmode %}
{# {{ colVideo | raw }} #}
{% else %}
{{ colVideo | raw }}
{{gradientHtml | raw}}
{% endif %}
</div>
{% endif %}
{# Sticky image background #}
{% if colBackground == "image" and colStickySelect.isChecked() == true and colImage is defined and colImage is not null %} {# and not editmode #}
<div class="c-col__sticky">
<div class="c-col__image" style="background-image: url({{ colImage.getThumbnail(thumbnailSize) }}); background-position: {{imagePosition|replace({'-' : ' '})}}"></div>
{{gradientHtml | raw}}
</div>
{% endif %}
<div class="c-col__wrapper {% if colBackground == 'border' %}border-color-primary-light{% else %}background-{{colBackground}}{% endif %} justify-content-{{colAlignContent}} {{colPaddingLeftRightClass}} {{colPaddingTopBottomClass}} {#{colInnerTopBottomClass}#}"
style="{% if colBackground == "image" and colStickySelect.isChecked() != true and colImage %}
background-image: url({{ colImage.getThumbnail(thumbnailSize) }}); background-position: {{imagePosition|replace({'-' : ' '})}};{% endif %}
{% if colOpacityValue %}
{% set opacity = colOpacityValue / 100 %}
--background-opacity: {{opacity}};
{% endif %}
"
>
{{gradientHtml | raw}}
{{contentBlock}}
</div>
{% else %}
{{contentBlock}}
{% endif %}
{# Border
{% if colBorderSelect.isChecked() == true %}
<div class="c-col__wrapper justify-content-{{colAlignContent}} {{colPaddingLeftRightClass}} {{colInnerTopBottomClass}} border-color-primary-light">
<div class="c-col {{ colBehaveOffset }} {{colMarginSelectValue}} align-self-{{colAlign}}">
{{contentBlock}}
</div>
</div>
{% endif %}#}
</div>
{% endblock %}