{% if editmode %}
<div class="settings">
<div class="position-relative settings-button-border">
<strong class="settings-header">Settings</strong><button class="toggle-settings"><i class="fa fa-plus"></i></button>
<div class="settings_container">
<div class="row middle-lg middle-md middle-sm middle-xs" style="gap: 10px">
<div>Spacer Height</div>
<div>{{ pimcore_numeric("spacerHeight") }}</div>
</div>
<div class="row middle-lg middle-md middle-sm middle-xs" style="gap: 10px">
<div>Add divider line?</div>
<div>{{ pimcore_checkbox("dividerLine") }}</div>
</div>
<div class="row middle-lg middle-md middle-sm middle-xs" style="gap: 10px">
<div>Set mobile height on spacer?</div>
<div>{{ pimcore_checkbox("spacerHeightMobile") }}</div>
</div>
</div>
<div style="position: absolute; top: 10px; right: 0; font-weight: bold; text-transform: uppercase;">
Spacer
</div>
</div>
</div>
{% endif %}
{% set spacerHeight = pimcore_numeric("spacerHeight").getData() %}
{% set spacerNoDivider = not pimcore_checkbox("dividerLine").isChecked() ? 'height:' ~ spacerHeight ~ 'px' : '' %}
{% set dividerLine = pimcore_checkbox("dividerLine").isChecked() ? 'border-top-width:1px;border-top-style:solid;border-top-color:#c9c9c9;margin-top:' ~ spacerHeight ~ 'px;margin-bottom:' ~ spacerHeight ~ 'px;' : '' %}
{% set settingsSet = spacerNoDivider or dividerLine ? ' style=' : '' %}
{% set spacerHeightMobile = pimcore_checkbox("spacerHeightMobile").isChecked() ? ' spacer-mobile-height' : '' %}
<div class="spacer{{spacerHeightMobile}}"{{ settingsSet }}{{ spacerNoDivider }}{{ dividerLine }}> </div>