{% extends 'grid-gallery.twig' %}

{% macro label(label, for) %}
    <label for="{{ for }}">{{ label }}</label>
{% endmacro %}

{% block header %}
    <nav id="supsystic-breadcrumbs" class="supsystic-breadcrumbs" style="float: left; padding-top: 20px;">
        {#
            <ul class="supsystic-bar-controls">
                <li>
                    <a class="button button-primary" target="_blank"
                       href="{{ environment.generateUrl('galleries', 'preview', { 'gallery_id': gallery.id }) }}">
                        <i class="fa fa-fw fa-eye"></i>
                        {{ environment.translate('Preview') }}
                    </a>
                </li>

                <li>
                    <button class="button button-primary" id="btnSave">
                        <i class="fa fa-fw fa-check"></i>
                        {{ environment.translate('Save') }}
                    </button>
                </li>
            </ul>
        #}
        <a href="{{ environment.generateUrl('galleries') }}">{{ translate('Gallery by Supsystic') }}</a>
        <i class="fa fa-angle-right"></i>
        <a href="{{ environment.generateUrl('galleries') }}">{{ translate('Galleries') }}</a>
        <i class="fa fa-angle-right"></i>
        <a href="{{ environment.generateUrl('galleries', 'view', { 'gallery_id': gallery.id }) }}">{{ gallery.title|raw }}</a>
    </nav>

    <h2 class="form-tabs">
        <a class="nav-tab change-tab" href="area">
            <i class="fa fa-home"></i>
            {{ translate('Main') }}
        </a>

        <a class="nav-tab change-tab" href="overlay">
            <i class="fa fa-info"></i>
            {{ translate('Captions') }}
        </a>

        <a class="nav-tab change-tab" href="cats">
            <i class="fa fa-bookmark-o"></i>
            {{ translate('Categories') }}
        </a>

        <a class="nav-tab change-tab" href="post">
            <i class="fa fa-columns"></i>
            {{ translate('Posts') }}
        </a>

        {% block tabs %}{% endblock %}
    </h2>
{% endblock %}

{% block preview %}
    {% import '@galleries/shortcode/style.twig' as style %}
    {% import '@galleries/helpers/attachment.twig' as attachment %}

    <div id="preview" class="gallery-preview">
        <section class="supsystic-bar-preview" id="single-gallery-toolbar">
            <ul class="supsystic-bar-controls">
                {#<li>
                    <a class="button button-primary"
                       href="{{ environment.generateUrl('galleries', 'addImages', { 'gallery_id': gallery.id }) }}">
                        <i class="fa fa-upload fa-fw"></i>
                        {{ environment.translate('Add images') }}
                    </a>
                </li>#}

                <li title="{{ translate('Upload new images') }}">
                    <button class="button button-primary gallery import-to-gallery" data-gallery-id="{{ gallery.id }}">
                        <i class="fa fa-fw fa-camera"></i>
                        {{ translate('Add Images') }}
                    </button>
                </li>

                <li>
                    <a class="button"
                       href="{{ environment.generateUrl('galleries', 'view', { 'gallery_id': gallery.id }) }}">
                        <i class="fa fa-list fa-fw"></i>
                        {{ translate('Images list') }}
                    </a>
                </li>

                <li>
                    <a class="button button-primary" target="_blank"
                       href="{{ environment.generateUrl('galleries', 'preview', { 'gallery_id': gallery.id }) }}">
                        <i class="fa fa-fw fa-eye"></i>
                        {{ translate('Preview') }}
                    </a>
                </li>

                <li>
                    <button class="button button-primary" id="btnSave">
                        <i class="fa fa-fw fa-check"></i>
                        {{ translate('Save') }}
                    </button>
                </li>
            </ul>
        </section>
        {% if gallery.photos is not empty %}
            <div style="
            {% if gallery.settings.area.photo_width_unit == 0 and gallery.settings.area.photo_width is not empty %}
                width:{{ gallery.settings.area.photo_width }}px;
            {% endif %}
            margin: 10px auto;
            max-width: 380px;
            clear:both;
            ">
                <figure class="grid-gallery-caption" data-grid-gallery-type="center" style="float: none !important;">
                   {% set width, height, crop = 0, 0, 0 %}

                    {% if settings.area.photo_width_unit == 0 %}
                        {% set width = settings.area.photo_width %}
                    {% endif %}

                    {% if settings.area.photo_height_unit == 0 %}
                        {% set height = settings.area.photo_height %}
                    {% endif %}

                    {% if settings.area.grid == 0 or settings.area.grid == '2' or settings.area.grid == '3' %}
                        {% set crop = 1 %}
                    {% else %}
                        {% set height = null %}
                    {% endif %}

                    {% if settings.thumbnail.cropQuality is defined %}
                        {% set cropQuality = settings.thumbnail.cropQuality %}
                    {% else %}
                        {% set cropQuality = null %}
                    {% endif %}
                    <img src="{{ get_attachment(gallery.photos[0].attachment.id, width, height, crop, cropQuality) }}" data-src="{{ 'holder.js/350x250?theme=simple&text=' ~ gallery.title|raw }}" alt="{{ gallery.title|raw }}" style="width: auto; height: auto;"/>
                    <figcaption style="{{ figcaptionStyle|trim }}">
                        <div style="display: table; height: 100%; width: 100%;">
                            <div class="grid-gallery-figcaption-wrap" style="display: table-cell;">
                                <span>Gallery by Supsystic</span>
                            </div>
                        </div>
                    </figcaption>
                </figure>
            </div>
        {% else %}
            <div style="clear: both;"></div>
            <h2 style="text-align: center;">
                {{ translate("There're no images in the gallery.") }}<br>
                <a class="import-to-gallery" href="#">Add Images</a>
            </h2>
        {% endif %}

        <div style="clear: both;"></div>

        <div class="shortcode-wrap" style="margin-top: 20px">
            <div class="shortcode">{{ translate('Shortcode:') }} <input type="text" id="shortcode" class="gallery-shortcode" value="[{{ environment.config.get('shortcode_name') }} id={{ gallery.id }}]" onclick="this.select();" size="42" style="font-size: 12px;" readonly></div>
            <div class="shortcode">{{ translate('PHPCode:') }} <input type="text" id="shortcode" class="gallery-shortcode" value="{{ '<?php echo do_shortcode(\'[supsystic-gallery id=' ~ gallery.id ~ ']\') ?>' }}" onclick="this.select();" size="42" style="font-size: 12px;" readonly></div>
        </div>

        <small style="left:25px;position:absolute;top:10px;display:none;">Oops! Transparency doesn't work in live preview. </small>
        <div class="separator"></div>

        <div style="margin: 20px 0">
            <a class="button" id="openSettingsImportDialog" href=""><i class="fa fa-copy"></i> {{ translate('Import settings') }}</a>
        </div>
    </div>
{% endblock %}

{% block content %}
    {% import '@core/form.twig' as form %}
    {% import _self as f %}

    <div class="settings-wrap" data-leave-confirm="{{ translate('Your changes not saved. You really want to leave without saving?') }}">
        {{ form.open('post', environment.generateUrl('galleries', 'saveSettings', { 'gallery_id': gallery.id }), { 'id': 'form-settings' }) }}
        <input id="currentPresetTitle" name="title" type="hidden" value="{{ settings.title|default('') }}"/>
        <input name="previewImage" type="hidden" value="{{ gallery.settings.previewImage }}"/>

        <div data-tab="area">
            {% block area %}
                <table class="form-table" name="area">
                    <thead>
                        {{ form.row(translate('Gallery Type'),
                        form.select('area[grid]', ['Fixed', 'Vertical', 'Horizontal', 'Fixed Columns'], settings.area.grid, { 'style': 'width: auto;' }), 'grid-type', 'gallery-types', 'columns') }}
        				
                        <tr id="generalColumnsRow" hidden>
                            <th scope="row">
                                <label style="margin: 0 !important;">
                                    {{ translate('Number of Columns') }}
        							{{ form.show_tooltip('columns') }}
        							<br />
        							<label><a href="http://supsystic.com/fixed-columns-gallery-example/" style="color: #0074a2; font-size: 10px; text-decoration: none;">More Info</a> </label>
                                </label>
                            </th>
                            <td>
                                <input type="number" name="general[columns][number]" value="{{ settings.general.columns.number|default(3) }}">
                            </td>
                        </tr>

                        {{ form.row(translate('Responsive columns'),
                        form.input('number', 'general[responsiveColumns][desktop][width]',settings.general.responsiveColumns.desktop.width|default(1200), { 'style': { 'width': '60px;' } }) ~ form.span('', 'px') ~
                        form.input('number', 'general[responsiveColumns][desktop][columns]', settings.general.responsiveColumns.desktop.columns|default(settings.general.columns.number|default(3)), { 'style': { 'width': '40px;' } }) ~ form.span('', 'columns') ~
                        '<br>' ~
                        form.input('number', 'general[responsiveColumns][tablet][width]', settings.general.responsiveColumns.tablet.width|default(768), { 'style': { 'width': '60px;' } }) ~ form.span('', 'px') ~
                        form.input('number', 'general[responsiveColumns][tablet][columns]', settings.general.responsiveColumns.tablet.columns|default(settings.general.columns.number|default(3)), { 'style': { 'width': '40px;' } }) ~ form.span('', 'columns') ~
                        '<br>' ~
                        form.input('number', 'general[responsiveColumns][mobile][width]',
                        settings.general.responsiveColumns.mobile.width|default(320), { 'style': { 'width': '60px;' } }) ~ form.span('', 'px') ~
                        form.input('number', 'general[responsiveColumns][mobile][columns]', settings.general.responsiveColumns.mobile.columns|default(settings.general.columns.number|default(3)), { 'style': { 'width': '40px;' } }) ~ form.span('', 'columns'), 'responsive-columns') }}

                        {#{{ form.row(environment.translate('Position'),
                        form.select('area[position]', ['Center', 'Left', 'Right'], settings.area.position, { 'style': 'width: 300px;' }), 'grid-type') }}#}
    					
    					{{ form.row(translate('Gallery Name:'),
                        form.input('text', 'title', gallery.title|raw, { 'style': { 'width': '232px;' } })
                        , 'title') }}

                        {{ form.row(environment.translate('Gallery Position'),
                        form.select('area[position]', ['Left', 'Center', 'Right'], settings.area.position|default(1), { 'style': 'width: 100px;' })) }}


                        {{ form.row(translate('Images distance'),
                        form.input('number', 'area[distance]', settings.area.distance, { 'style': { 'width': '140px;' } })
                        ~ form.span('', 'pixels'), 'distance') }}

                        {{ form.row(translate('Gallery width'),
                        form.input('number', 'area[width]', settings.area.width, { 'style': { 'width': '140px' } })
                        ~ form.select('area[width_unit]', ['pixels', 'percents'], settings.area.width_unit, { 'style': 'margin-top: -2px; height: 27px;' }), 'area-width') }}

                        {# Setting gallery to full width of window  #}
                        {{ form.row(translate('Full screen width'),
                            form.checkbox(
                            'fullscreen',
                            '1',
                            settings.fullscreen ? {'checked':'checked'} : {}
                            ),
                            'enabled')
                        }}

                        {{ form.row(translate('Gallery padding'),
                        form.input('number', 'area[padding]', settings.area.padding|default(0), { 'style': { 'width': '140px' } }) ~ form.span('', 'pixels'), 'area-padding') }}

                        {#
                            {{ form.row(environment.translate('Gallery height'),
                            form.input('number', 'area[height]', settings.area.height, { 'style': { 'width': '205px'} })
                            ~ form.select('', ['pixels', 'percents'], null, { 'disabled': 'disabled', 'style': 'margin-top: -2px; height: 27px' }), 'area-height') }}
                        #}

                        {{ form.row(translate('Image width'),
                        form.input('number', 'area[photo_width]', settings.area.photo_width, { 'style': { 'width': '140px'} })
                        ~ form.select('area[photo_width_unit]', ['pixels', 'percents'], settings.area.photo_width_unit, { 'style': 'margin-top: -2px; height: 27px; width: 85px;' }), 'photo-width') }}


                        {{ form.row(translate('Image height'),
                        form.input('number', 'area[photo_height]', settings.area.photo_height, { 'style': { 'width': '140px'} })
                        ~ form.select('area[photo_height_unit]', ['pixels'], settings.area.photo_height_unit, { 'style': 'margin-top: -2px; height: 27px; width: 85px;' }), 'photo-height') }}

                        {{ form.row(translate('Image radius'),
                        form.input('number', 'thumbnail[border][radius]', settings.thumbnail.border.radius, { 'style': { 'width': '140px'} })
                        ~ form.select('thumbnail[border][radius_unit]', ['pixels', 'percents'], settings.thumbnail.border.radius_unit, { 'style': 'margin-top: -2px; height: 27px; width: 85px;' }), 'border-radius') }}
                   
                        {# set crop quality #}
                        {% set qualityList = {
                            "100":"100%",
                            "90":"90%", 
                            "80":"80%", 
                            "70":"70%", 
                            "60":"60%", 
                            "50":"50%", 
                            "40":"40%", 
                            "30":"30%",
                            "20":"20%",
                            "10":"10%"
                        }%}
                        {{ form.row(translate('Image crop quality'),
                            form.select(
                                'thumbnail[cropQuality]',
                                qualityList,
                                settings.thumbnail.cropQuality|default('100')
                            ),
                            'cropQuality')
                        }}

                        {{ form.row(translate('Display only first image'),
                        form.checkbox('displayFirstPhoto', 'on', settings.displayFirstPhoto == 'on' ? {'checked':'checked'} : {}), 'display-first-photo') }}

                        {% block openByLink %}
                            {{ form.rowpro(translate('Open by link in popup'),
                            'utm_source=plugin&utm_medium=open-by-link&utm_campaign=gallery',
                            'open-by-link',
                            form.checkbox(
                            'openByLink', 'on',{'disabled':'disabled'}))
                            }}
                        {% endblock %}


                        {% block disableRightClick %}
                        {% endblock %}
                    </thead>
                </table>
                <div class="separator"></div>
            {% endblock %}

            {% block socialSharing %}
                <table class="form-table">
                    <thead>
                    {{ form.row(translate('Social Sharing'),
                    form.radio('socialSharing[enabled]', true, {'id':'social-sharing-enable'}|merge(settings.socialSharing.enabled ? {'checked':'checked'} : {})) ~
                    f.label(translate('Enable'), 'social-sharing-enable') ~
                    form.radio('socialSharing[enabled]', false, {'id':'social-sharing-disable'}|merge(settings.socialSharing.enabled ? {} : {'checked':'checked'})) ~
                    f.label(translate('Disable'), 'social-sharing-disable'), 'social-sharing', true) }}
                    </thead>
                    <tbody style="display: none;">
                    {% if settings.socialSharing.pluginInstalled %}
                        {% if settings.socialSharing.projectsList|length %}


                            {{ form.row(translate('Social Buttons Project'),
                            form.select('socialSharing[projectId]',
                            settings.socialSharing.projectsList,
                            settings.socialSharing.projectId,
                            {'style': 'width: 200px'}),
                            'social-buttons-project') }}

                            {{ form.row(translate('Gallery Sharing'),
                            form.checkbox('socialSharing[gallerySharing][enabled]', true, settings.socialSharing.gallerySharing.enabled ? {'checked':'checked'} : {}), 'gallery-social-sharing') }}

                            {{ form.row(translate('Buttons position'),
                            form.select('socialSharing[gallerySharing][buttonsPosition]',
                            {
                                'top': 'top',
                                'bottom': 'bottom',
                                'all': 'top and bottom',
                            },
                            settings.socialSharing.gallerySharing.buttonsPosition,
                            {'style': 'width: 200px'}),
                            'gallery-sharing-buttons-position') }}

                            {{ form.row('',
                            form.checkbox('socialSharing[imageSharing][enabled]','0', {'checked':'checked'}),'image-sharing-hidden') }}

                            {% set enabled = settings.socialSharing.imageSharing.enabled %}
                            {{ form.row(translate('Image Sharing'),
                            form.checkbox('socialSharing[imageSharing][enabled]', true, enabled != '0' ? {'checked':'checked'} : {}), 'image-social-sharing') }}

                            {{ form.row(translate('Buttons position'),
                            form.select('socialSharing[imageSharing][buttonsPosition]',
                            {
                                'top': 'top',
                                'bottom': 'bottom',
                                'left': 'left',
                                'right ': 'right ',
                            },
                            settings.socialSharing.imageSharing.buttonsPosition,
                            {'style': 'width: 200px'}),
                            'image-sharing-buttons-position') }}

                            {{ form.row(translate('Buttons align'),
                            form.select('socialSharing[imageSharing][buttonsAlignHorizontal]',
                            {
                                'left': 'left',
                                'center': 'center',
                                'right': 'right',
                            },
                            settings.socialSharing.imageSharing.buttonsAlignHorizontal,
                            {'style': 'width: 200px'}),
                            'image-sharing-buttons-align-horizontal') }}

                            {{ form.row(translate('Buttons align'),
                            form.select('socialSharing[imageSharing][buttonsAlignVertical]',
                            {
                                'top': 'top',
                                'middle': 'middle',
                                'bottom': 'bottom',
                            },
                            settings.socialSharing.imageSharing.buttonsAlignVertical,
                            {'style': 'width: 200px'}),
                            'image-sharing-buttons-align-vertical') }}

                            {{ form.row('',
                            form.checkbox('socialSharing[popupImageSharing][enabled]','0', {'checked':'checked'}),'popup-sharing-hidden') }}

                            {% set enabled = settings.socialSharing.popupImageSharing.enabled %}
                            {{ form.row(translate('Popup Image Sharing'),
                            form.checkbox('socialSharing[popupImageSharing][enabled]', true, enabled != '0' ? {'checked':'checked'} : {}), 'popup-social-sharing') }}

                            {{ form.row(translate('Buttons position'),
                            form.select('socialSharing[popupImageSharing][buttonsPosition]',
                            {
                                'top': 'top',
                                'bottom': 'bottom',
                                'left': 'left',
                                'right ': 'right ',
                            },
                            settings.socialSharing.popupImageSharing.buttonsPosition,
                            {'style': 'width: 200px'}),
                            'popup-sharing-buttons-position') }}

                            {{ form.row(translate('Buttons align'),
                            form.select('socialSharing[popupImageSharing][buttonsAlignHorizontal]',
                            {
                                'left': 'left',
                                'center': 'center',
                                'right': 'right',
                            },
                            settings.socialSharing.popupImageSharing.buttonsAlignHorizontal,
                            {'style': 'width: 200px'}),
                            'popup-sharing-buttons-align-horizontal') }}

                            {{ form.row(translate('Buttons align'),
                            form.select('socialSharing[popupImageSharing][buttonsAlignVertical]',
                            {
                                'top': 'top',
                                'middle': 'middle',
                                'bottom': 'bottom',
                            },
                            settings.socialSharing.popupImageSharing.buttonsAlignVertical,
                            {'style': 'width: 200px'}),
                            'popup-sharing-buttons-align-vertical') }}

                        {% else %}
                            <tr>
                                <td colspan="2">
                                    <span>{{ translate('You have no Social Sharing projects for now.')}} </span>
                                    <a href="/wp-admin/admin.php?page=supsystic-social-sharing&module=projects&action=add"
                                       target="_blank" rel="noopener noreferrer"
                                    >{{ translate('Create your first project')}}</a>
                                    <span> {{ translate('then just reload page with your Gallery settings, and you will see list with available Social Projects for your Gallery.')}}</span>
                                </td>
                            </tr>
                        {% endif %}
                    {% else %}
                        <tr>
                            <td colspan="2">
                                <span>{{ translate('You need to install Social Share Buttons by Supsystic to use this feature.')}} </span>
                                <a target="_blank" rel="noopener noreferrer" href="/wp-admin/plugin-install.php?tab=search&type=term&s=Social+Share+Buttons+by+Supsystic"
                                >{{ translate('Install plugin')}}</a>
                                <span> {{ translate("from your admin area, or visit it's official page on Wordpress.org") }} </span>
                                <a target="_blank" rel="noopener noreferrer" href="https://wordpress.org/plugins/social-share-buttons-by-supsystic/"> {{ translate('here.')}}</a>
                            </td>

                        </tr>
                    {% endif %}
                    </tbody>
                </table>
                <div class="separator"></div>
            {% endblock %}

            {% block horizontalScroll %}
                <table class="form-table">
                    <thead>
                        {% set horizontalScrollEnabled = settings.horizontalScroll.enabled|default('false') == 'true' %}
                        {{ form.row(translate('Horizontal Scroll'),
                            form.radio('horizontalScroll[enabled]', 'true', {'id':'horizontal-scroll-enable'}|merge(horizontalScrollEnabled ? {'checked':'checked'} : {})) ~
                            f.label(translate('Enable'), 'horizontal-scroll-enable') ~
                            form.radio('horizontalScroll[enabled]', 'false', {'id':'horizontal-scroll-disable'}|merge(horizontalScrollEnabled ? {} : {'checked':'checked'})) ~
                            f.label(translate('Disable'), 'horizontal-scroll-disable'), 'horizontal-scroll', true) }}
                    </thead>
                    <tbody>
                        {{ form.row(translate('Scroll Bar Color'),
                            form.text('horizontalScroll[color]', settings.horizontalScroll.color, {'class':'gg-color-picker'}), 'horizontal-scroll-color') }}

                        {{ form.row(translate('Scroll Bar Transparency'),
                            form.select('horizontalScroll[transparency]',
                                {
                                    '0': '0%',
                                    '10': '10%',
                                    '20': '20%',
                                    '30': '30%',
                                    '40': '40%',
                                    '50': '50%',
                                    '60': '60%',
                                    '70': '70%',
                                    '80': '80%',
                                    '90': '90%',
                                    '100': '100%',
                                },
                                settings.horizontalScroll.transparency|default('60'), {'style': 'width: auto'}),
                        'horizontal-scroll-transparency') }}

                        {% block horizontalScrollAfter %}
                        {% endblock %}
                    </tbody>
                </table>
                <div class="separator"></div>
            {% endblock %}

            <div class="load-more-button-preview">
                <h1 style="line-height: 1;">
                    {{ translate("Load more gallery images with scroll or button") }}
                    </br>
                    <a class="button get-pro" href="{{ getProUrl('utm_source=plugin&utm_medium=show-more&utm_campaign=gallery') }}" target="_blank">{{ environment.translate('Get PRO') }}</a>
                </h1>
                <div>
                    <a href="{{ getProUrl('utm_source=plugin&utm_medium=show-more&utm_campaign=gallery') }}" target="_blank">
                        <img src="{{ environment.module('galleries').getLocationUrl() }}/assets/img/load_more_button_pro.jpg" />
                    </a>
                </div>
                <div class="separator"></div>
            </div>

            <div class="custom-buttons-preview">
                <table class="form-table">
                    <thead>
                        {{ form.row(translate('Custom Buttons'),
                            form.button('buttons-presets-editor-preview', 'Show preset Editor', {'class': 'button button-primary'}), 'custom-buttons-preview', true)}}
                    </thead>
                </table>
                <div class="separator"></div>
            </div>

            {% block border %}
                <table class="form-table" name="border">
                    <thead>
                        {% set borderTypes = {
                            'solid': 'Solid',
                            'dotted': 'Dotted',
                            'dashed': 'Dashed',
                            'double': 'Double',
                            'groove': 'Groove',
                            'ridge': 'Ridge',
                            'inset': 'Inset',
                            'outset': 'Outset',
                            'none': 'None'
                        } %}

                        {#
                            <tr id="useBorderRow">
                                <th scope="row">
                                    <h3 style="margin: 0 !important;">
                                        {{ environment.translate('Border') }}
                                    </h3>
                                </th>
                                <td>
                                    <input type="radio" id="showBorder" name="thumbnail[border][use]" value="1" {% if settings.thumbnail.border.use == '1' %}checked{% endif %}>
                                        {{ environment.translate('Available') }}
                                    <input type="radio" id="hideBorder" name="thumbnail[border][use]" value="0" {% if settings.thumbnail.border.use != '1' %}checked{% endif %}>
                                        {{ environment.translate('Disable') }}
                                </td>
                            </tr>
                        #}

                        {{ form.row(translate('Border Type'),
                        form.select('thumbnail[border][type]', borderTypes, settings.thumbnail.border.type, { 'style': 'width: auto;' })
                        ~ form.input('text', 'border-type', 'Example', { 'style': 'margin-top: -2px; height: 27px; width: 70px; border: 1px solid black; display:none;' }), 'border-type', 'gallery-borders') }}

                        {{ form.row(translate('Border color'),
                        form.input('text', 'thumbnail[border][color]', settings.thumbnail.border.color, { 'class': 'gg-color-picker' }), 'border-color') }}

                        {{ form.row(translate('Border width'),
                        form.input('number', 'thumbnail[border][width]', settings.thumbnail.border.width, { 'style': { 'width': '140px;'} })
                        ~ form.span('', 'pixels'), 'border-width') }}
                    </thead>
                </table>
                <div class="separator"></div>
            {% endblock %}

            {% block shadow %}
                <table class="form-table" name="shadow">
                    <thead>
                        <tr id="useShadowRow">
                            <th scope="row">
                                <h3 style="margin: 0 !important;">
                                    {{ translate('Shadow') }}
                                </h3>
                            </th>
                            <td>
                                <input type="radio" id="showShadow" name="use_shadow" value="1" {% if settings.use_shadow == '1' %}checked{% endif %}>
                                    {{ translate('Enable') }}
                                <input type="radio" id="hideShadow" name="use_shadow" value="0" {% if settings.use_shadow != '1' %}checked{% endif %}>
                                    {{ translate('Disable') }}
                            </td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <th scope="row">
                                {{ translate('Shadow preset') }}
                            </th>
                            <td>
                                <button id="chooseShadowPreset" class="button bordered" type="button">
                                    {{ translate('Choose preset') }}
                                </button>
                            </td>
                        </tr>

                        <tr id="useMouseShadowRow">
                            <th scope="row">
                                {{ translate('When mouse is over') }}
                            </th>
                            <td>
                                <select id="useMouseOverShadow" style="width: auto;" name="mouse_shadow">
                                    <option value="0" {% if settings.mouse_shadow == '0' %}selected="selected"{% endif %}>
                                        {{ translate('Off') }}
                                    </option>
                                    <option value="1" {% if settings.mouse_shadow == '1' %}selected="selected"{% endif %}>
                                        {{ translate('Show mouse on') }}
                                    </option>
                                    <option value="2" {% if settings.mouse_shadow == '2' %}selected="selected"{% endif %}>
                                        {{ translate('Hide mouse on') }}
                                    </option>
                                </select>
                            </td>
                        </tr>

                        {{ form.row(translate('Overlay image with shadow'),
                        form.select('thumbnail[shadow][overlay]', ['Off', 'On'], settings.thumbnail.shadow.overlay, { 'style': 'width: auto;' }), 'overlay-type') }}

                        {{ form.row(translate('Shadow color'),
                        form.text('thumbnail[shadow][color]', settings.thumbnail.shadow.color, { 'style': { 'width': '300px' }, 'class':'gg-color-picker' }), 'shadow-color') }}

                        {{ form.row(translate('Shadow blur'),
                        form.input('number', 'thumbnail[shadow][blur]', settings.thumbnail.shadow.blur, { 'style': { 'width': 'auto' } }), 'shadow-blur') }}

                        {{ form.row(translate('Shadow X'),
                        form.input('number', 'thumbnail[shadow][x]', settings.thumbnail.shadow.x, { 'style': { 'width': 'auto' } }), 'shadow-x') }}

                        {{ form.row(translate('Shadow Y'),
                        form.input('number', 'thumbnail[shadow][y]', settings.thumbnail.shadow.y, { 'style': { 'width': 'auto' } }), 'shadow-y') }}
                    </tbody>
                </table>
                <div class="separator"></div>
            {% endblock %}

            {% block popup %}
                <table class="form-table">
                    <thead>
                        {# Enable/Disable popup #}
                        {% set popUpEnabled = settings.box.enabled|default('true') == 'true' %}
                        {{ form.row(translate('Pop-up Image'),
                            form.radio(
                                'box[enabled]',
                                'true',
                                {'id':'box-enable'}|merge(popUpEnabled ? {'checked':'checked'} : {})
                            ) ~
                            f.label(
                                translate('Enable'),
                                'box-enable'
                            ) ~
                            form.radio(
                                'box[enabled]',
                                'false',
                                {'id':'box-disable'}|merge(popUpEnabled ? {} : {'checked':'checked'})
                            ) ~
                            f.label(
                                translate('Disable'),
                                'box-disable'
                            ), 'box', true) 
                        }}
                    </thead>
                    <tbody>
                        {# Select popup theme #}
                        {{ form.row(translate('Popup box theme'),
                            form.button(
                                'chooseTheme',
                                translate('Choose theme'),
                                {'class': 'button bordered', 'id': 'chooseTheme'}
                            ) ~
                            form.hidden(
                                'box[type]',
                                settings.box.type
                            ) ~
                            form.hidden(
                                'box[theme]',
                                settings.box.theme,
                                {'id':'bigImageTheme'}
                            )) 
                        }}

                        {# Enable/Disable popup on mobile devices #}
                        {{ form.row(translate('Disable on mobile'),
                            form.checkbox(
                                'box[mobile]',
                                'on',
                                settings.box.mobile == 'on' ? {'checked':'checked'} : {}
                            ),
                            'mobile')
                        }}

                        {# Chose popup text #}
                        {{ form.row(translate('Popup Image Text'),
                        form.select(
                        'box[imageText]',
                        {
                            'data-caption': translate('Caption'),
                            'data-title': translate('Title'),
                            'alt': translate('Alt text'),
                            'title': translate('Description'),
                        },
                        settings.box.imageText|default('title'),
                        {'style': 'width: 150px'}
                        ))
                        }}

                        {# Hide popup captions #}
                        {{ form.row(translate('Hide Popup Captions'),
                            form.checkbox(
                                'box[captions]',
                                'on',
                                settings.box.captions == 'on' ? {'checked':'checked'} : {}
                            ),
                            'captions')
                        }}

                        {# Popup overlay bg-color #}
                        {{ form.row(translate('Background color'),
                            form.text(
                                'box[background]',
                                settings.box.background,
                                {'class':'gg-color-picker'}
                            ),
                            'box-background')
                        }}
                        
                        {# Popup overlay transparency #}
                        {{ form.row(translate('Transparency'),
                            form.select(
                                'box[transparency]',
                                {
                                    '0': '0%',
                                    '10': '10%',
                                    '20': '20%',
                                    '30': '30%',
                                    '40': '40%',
                                    '50': '50%',
                                    '60': '60%',
                                    '70': '70%',
                                    '80': '80%',
                                    '90': '90%',
                                    '100': '100%',
                                },
                                settings.box.transparency|default(30), {'style': 'width: auto'}
                            ),
                            'box-transparency')
                        }}

                        {# Enable/Disable popup slideshow #}
                        {{ form.row(translate('Slideshow'),
                            form.select(
                                'box[slideshow]',
                                {'true': translate('Enable'), 'false': translate('Disable')},
                                settings.box.slideshow|default('false'),
                                {'style': 'width: auto'}
                            ),
                            'slideshow')
                        }}

                        {# Popup slideshow speed #}
                        {{ form.row(translate('Slideshow speed'),
                            form.input(
                                'number',
                                'box[slideshowSpeed]',
                                settings.box.slideshowSpeed|default(2500),
                                {'style': {'width': 'auto'}},
                                'box-slideshowSpeed'
                            ))
                        }}

                        {# Popup slideshow mouse hover stop #}
                        {{ form.row(translate('Slideshow pause on hover'),
                            form.select(
                                'box[popupHoverStop]',
                                {'true':  translate('Yes'),'false': translate('No')},
                                settings.box.popupHoverStop|default('false'),
                                {'style': 'width: auto'},
                                'box-popupHoverStop'
                            ),
                            'popupHoverStop') 
                        }}

                        {# Popup slideshow autostart #}
                        {{ form.row(translate('Slideshow autostart'),
                            form.select(
                                'box[slideshowAuto]',
                                {'true':  translate('Yes'),'false': translate('No')},
                                settings.box.slideshowAuto|default('false'),
                                {'style': 'width: auto'},
                                'box-slideshowAuto'
                            )) 
                        }}

                        {# Popup image size #}
                        {{ form.row(translate('Popup Image size'),
                            form.input(
                                'number',
                                'box[popupwidth]',
                                settings.box.popupwidth,
                                {'style': { 'width': '60px' }}
                            )
                            ~ form.span('', 'x')
                            ~ form.input(
                                'number',
                                'box[popupheight]',
                                settings.box.popupheight,
                                { 'style': { 'width': '60px' } }
                            )
                            ~ form.span('', 'pixels'),
                            'box-popupsize') 
                        }}

                        {# Popup pro-option present #}
                        {% block popupAfter %}
                            {# Popup video size #}
                           open

                            {# Popup autoplay video #}
                            {{ form.rowpro(translate('Autoplay video'),
                                'utm_source=plugin&utm_medium=video&utm_campaign=gallery',
                                'video.autoplay',
                                form.select(
                                    'popup[video][autoplay]', 
                                    {'false':translate('No'), 'true':translate('Yes')}, 
                                    settings.popup.video.autoplay|default('false'),
                                    {'disabled':''}
                                )) 
                            }}
                            
                            {# Popup when video ends #}
                            {{ form.rowpro(translate('When video ends'),
                                'utm_source=plugin&utm_medium=video&utm_campaign=gallery',
                                'video.onEnd',
                                form.select(
                                    'popup[video][onEnd]', 
                                    {
                                        '0':translate('Do nothing'),
                                        '1':translate('Open next slide'), 
                                        '2':translate('Close popup')
                                    }, 
                                    settings.popup.video.onEnd|default('0'),
                                    {'disabled':''}
                                )) 
                            }}
                        {% endblock %}
                    </tbody>
                </table>
                <div class="separator"></div>
            {% endblock %}

            {% block preload %}
                <table class="form-table" name="preload">
                    <thead>
                        {% set preloadEnabled = settings.preload.enabled|default('true') == 'true' %}
                        {{ form.row(translate('Gallery Loader'),
                            form.radio('preload[enabled]', 'true', {'id':'preload-enable'}|merge(preloadEnabled ? {'checked':'checked'} : {})) ~
                            f.label(translate('Enable'), 'preload-enable') ~
                            form.radio('preload[enabled]', 'false', {'id':'preload-disable'}|merge(preloadEnabled ? {} : {'checked':'checked'})) ~
                            f.label(translate('Disable'), 'preload-disable'), 'preload', true) }}
                    </thead>
                {% if not environment.isPro() %}
                    <tbody>
                        <tr id="preload-background">
                            <th scope="row">
                                <label style="margin: 0 !important;">
                                    {{ translate('Background color') }}
                                    <br />
                                    <label><a href="{{ getProUrl('utm_source=plugin&utm_medium=loader&utm_campaign=gallery') }}" target="_blank" style="color: #0074a2; font-size: 10px; text-decoration: none;">PRO Option</a> </label>
                                </label>
                            </th>
                            <td>
                                {{ form.text('preload[background]', "#0073AA", {'class':'gg-color-picker', 'id': 'preloadColor-free'}) }}
                            </td>
                        </tr>
                        {% set piconImg %}
                            <div class="gallery-loading">
                                <div class="blocks">
                                    <div class="block"></div>
                                    <div class="block"></div>
                                    <div class="block"></div>
                                    <div class="block"></div>
                                </div>
                            </div>
                        {% endset %}

                        <tr>
                            <th scope="row">
                                <label style="margin: 0 !important;">
                                    {{ translate('Choose Icon') }}
                                    <br />
                                    <label><a href="{{ getProUrl('utm_source=plugin&utm_medium=loader&utm_campaign=gallery') }}" target="_blank" style="color: #0074a2; font-size: 10px; text-decoration: none;">PRO Option</a> </label>
                                </label>
                            </th>
                            <td>
                                {{ form.button('buttons-preload-icon', 'Choose Icon', {'class': 'button button-primary', 'id': 'choosePreicon-free'}) }}
                                {{ piconImg }}
                            </td>
                        </tr>
                    </tbody>
                {% endif %}
                </table>
            {% endblock %}
        </div>

        {% block post %}
            <div data-tab="post">
                <h1 style="line-height: 1;">
                    {{ translate("Show Posts and Pages") }}
                    </br>
                    <a class="button get-pro"
                       href="{{ getProUrl('?utm_source=plugin&utm_medium=postfeed&utm_campaign=gallery') }}">Get
                        PRO for 29$</a>
                </h1>

                <div>
                    <a href="{{ getProUrl('?utm_source=plugin&utm_medium=postfeed&utm_campaign=gallery') }}">
                        <img src="{{ environment.module('galleries').getLocationUrl() }}/assets/img/posts_pro.jpg" />
                    </a>
                </div>
            </div>
        {% endblock %}

        <div data-tab="overlay">
            <table class="form-table" name="captions">
                <thead>
                    {# Init effects variables #}
                    {% set effects = {
                        'none': 'None',
                        'center': 'Middle',
                        'quarter-appear': 'Appear',
                        'quarter-slide-up': 'Quarter Slide Up',
                        'quarter-slide-side': 'Quarter Slide Side',
                        'quarter-fall-in': 'Quarter Fall in',
                        'quarter-two-step': 'Quarter Two-step',
                        'quarter-zoom': 'Quarter Caption Zoom',
                        'cover-fade': 'Cover Fade',
                        'cover-push-right': 'Cover Push Right',
                        'revolving-door-left': 'Revolving Door Left',
                        'revolving-door-right': 'Revolving Door Right',
                        'revolving-door-top': 'Revolving Door Top',
                        'revolving-door-bottom': 'Revolving Door Bottom',
                        'cover-slide-top': 'Cover Slide Top',
                        'offset': 'Caption Offset',
                        'guillotine-reverse': 'Guillotine Reverse',
                        'half-slide': 'Half Slide',
                        'sqkwoosh': 'Sqkwoosh',
                        'tunnel': 'Tunnel',
                        'direction-aware': 'Direction Aware',
                        'phophorus-rotate': 'Phophorus Rotate',
                        'phophorus-offset': 'Phophorus Offset',
                        'phophorus-scale': 'Phophorus Scale',
                        'cube': 'Cube',
                        'polaroid': 'Polaroid',
                        '3d-cube' : '3D Cube'
                    }%}
                    {% set iconsWithCaptionsEffects = {
                        'icons': 'Default',
                        'icons-scale': 'Scale',
                        'icons-sodium-left': 'Sodium Left',
                        'icons-sodium-top': 'Sodium Top',
                        'icons-nitrogen-top': 'Nitrogen Top'
                    }%}
                    {% set enableCaptions = settings.thumbnail.overlay.enabled|default('true') == 'true' %}
                    {% set polaroidIsEnable = settings.thumbnail.overlay.effect == 'polaroid' ? 'true' : 'false' %}

                    {# Enable/Disable Caption Effects #}
                    {{ form.row(translate('Captions'),
                        form.radio(
                            'thumbnail[overlay][enabled]',
                            'true',
                            {'id':'showCaptions'}|merge(enableCaptions ? {'checked':'checked'} : {})
                        ) ~
                        f.label(
                            translate('Enable'), 
                            'showCaptions'
                        ) ~
                        form.radio(
                            'thumbnail[overlay][enabled]',
                            'false',
                            {'id':'hideCaptions'}|merge(enableCaptions ? {} : {'checked':'checked'})
                        ) ~
                        f.label(
                            translate('Disable'),
                            'hideCaptions'
                        ),
                        '', true, 'useCaptions') 
                    }}

                    {# Choise effect #}
                    {{ form.row(translate('Effect'),
                        form.button(
                            '', 
                            translate('Choose effect'), 
                            {'id': 'chooseEffect', 'class': 'button bordered'}
                        ) ~
                        form.hidden(
                            'thumbnail[overlay][effect]', 
                            settings.thumbnail.overlay.effect|default('quarter-appear'), 
                            {'id': 'overlayEffect'}
                        ),
                        'chooseEffect')
                    }}

                    {# Show personal caption #}
                    {{ form.row(translate('Personal captions'),
                        form.select(
                            'thumbnail[overlay][personal]',
                            {'true': translate('Enable'), 'false': translate('Disable')},
                            settings.thumbnail.overlay.personal|default('false'),
                            { 'style': 'width: auto;' }
                        ),
                        'overlay-personal')
                    }}

                    {# Enable/Disable polaroid effect #}
                    {{ form.row(translate('Polaroid Style'),
                        form.select(
                            '',
                            {'true': translate('Enable'), 'false': translate('Disable')},
                            polaroidIsEnable,
                            {'style': 'width: auto;'}
                        ),
                        'polaroid-effect')
                    }}

                    {# Enable/Disable polaroid animation #}
                    {{ form.row(translate('Polaroid Image Animation'),
                        form.select(
                            'thumbnail[overlay][polaroidAnimation]',
                            {'true': translate('Enable'), 'false': translate('Disable')},
                            settings.thumbnail.overlay.polaroidAnimation | default('true'),
                            { 'style': 'width: auto;' }
                        ),
                        'polaroid-animation')
                    }}

                    {# Enable/Disable polaroid scattering #}
                    {{ form.row(translate('Polaroid Image Scattering '),
                        form.select(
                            'thumbnail[overlay][polaroidScattering]',
                            {'true': translate('Enable'), 'false': translate('Disable')},
                            settings.thumbnail.overlay.polaroidScattering | default('true'),
                            { 'style': 'width: auto;' }
                        ),
                        'polaroid-scattering')
                    }}

                    {# Polaroid frame width #}
                    {{ form.row(translate('Polaroid Frame Width'),
                        form.input(
                            'number',
                            'thumbnail[overlay][polaroidFrameWidth]',
                            settings.thumbnail.overlay.polaroidFrameWidth|default(20),
                            { 'style': { 'width': '140px'} }
                        ),
                        'polaroid-frame-width')
                    }}

                    {# Caption bg-color #}
                    {{ form.row(translate('Background color'),
                        form.text(
                            'thumbnail[overlay][background]',
                            settings.thumbnail.overlay.background,
                            {'class':'gg-color-picker'}
                        ),
                        'overlay-background')
                    }}

                    {# Caption text color #}
                    {{ form.row(translate('Text color'),
                        form.text(
                            'thumbnail[overlay][foreground]',
                            settings.thumbnail.overlay.foreground,
                            {'class':'gg-color-picker'}
                        ),
                        'overlay-foreground')
                    }}

                    {# Caption bg transparency #}
                    {{ form.row(translate('Transparency'),
                        form.select(
                            'thumbnail[overlay][transparency]',
                            ['0%', '10%', '20%', '30%', '40%', '50%', '60%', '70%', '80%', '90%', '100%'],
                            settings.thumbnail.overlay.transparency|default(9),
                            { 'style': 'width: auto;' }
                        ),
                        'overlay-transparency')
                    }}

                    {# Caption text size #}
                    {{ form.row(translate('Text size'),
                        form.input(
                            'number',
                            'thumbnail[overlay][text_size]',
                            settings.thumbnail.overlay.text_size,
                            { 'style': { 'width': '140px'} }
                        )
                        ~ form.select(
                            'thumbnail[overlay][text_size_unit]',
                            ['pixels', 'percents', 'ems'],
                            settings.thumbnail.overlay.text_size_unit,
                            { 'style': 'margin-top: -2px; height: 27px' }
                        ),
                        'text-size')
                    }}

                    {# Caption text horizontal align #}
                    {{ form.row(translate('Text horizontal align'),
                        form.select(
                            'thumbnail[overlay][text_align]',
                            {'left': 'Left', 'right': 'Right', 'center': 'Center', 'auto': 'Auto'},
                            settings.thumbnail.overlay.text_align,
                            { 'style': 'width: auto;' }
                        ),
                        'text-align')
                    }}

                    {# Caption text vertical align #}
                    {{ form.row(translate('Text vertical align'),
                        form.select(
                            'thumbnail[overlay][position]',
                            {'top': 'Top', 'middle': 'Middle', 'bottom': 'Bottom'},
                            settings.thumbnail.overlay.position,
                            { 'style': 'width: auto;' }
                        ),
                        'overlay-position')
                    }}

                    {# Caption text font family #}
                    {{ form.row(translate('Font family'),
                        form.selectv(
                            'thumbnail[overlay][font_family]',
                            fontList, 
                            settings.thumbnail.overlay.font_family,
                            { 'style': 'width: auto;' }
                        ),
                        'font-family')
                    }}
                </thead>

                {# Hide image tooltip(browser default tooltip) #}
                {{ form.row(translate('Hide image title tooltip'),
                    form.select(
                        'thumbnail[tooltip]',
                        {'false': translate('No'), 'true': translate('Yes')},
                        settings.thumbnail.tooltip,
                        { 'style': 'width: auto;' }
                    ),
                    'tooltip')
                }}

                {# Mobile - show always caption(show none effect in mobile devices) #}
                {{ form.row(translate('Mobile - show always caption'),
                    form.select(
                        'thumbnail[isMobile]', 
                        {'false': translate('No'), 'true': translate('Yes')},
                        settings.thumbnail.isMobile|default('false')
                    ),
                    'ismobile')
                }}
            </table>

            <div class="separator"></div>

            {% block icons %}
                <table class="form-table" name="icons">
                    <thead>
                        {% set iconsEnabled = settings.icons.enabled|default('false') == 'true' %}
                        {{ form.row(translate('Show icons'),
                            form.radio('icons[enabled]', 'true', {'id':'icons-enable'}|merge(iconsEnabled ? {'checked':'checked'} : {})) ~
                            form.label(translate('Enable'), 'icons-enable') ~
                            form.radio('icons[enabled]', 'false', {'id':'icons-disable'}|merge(iconsEnabled ? {} : {'checked':'checked'})) ~
                            form.label(translate('Disable'), 'icons-disable'), 'photo-icon', true) }}
                    </thead>
                    <tbody>
                        {{ form.row(translate('Select effect'),
                            form.button(null, translate('Animation'), {'class': 'button bordered', 'id': 'selectIconsEffect'}) ~
                            form.hidden('icons[effect]', settings.icons.effect, {'id':'iconsEffectName'})
                        ) }}
                        <tr>
                            <th scope="row">
                                <label for="iconsColor">
                                    {{ translate('Icons color') }}
                                </label>
                            </th>
                            <td>
                                <input type="text" id="iconsColor" class="gg-color-picker" value="{{ settings.icons.color }}" name="icons[color]"/>
                            </td>
                        </tr>
                        <tr>
                            <th scope="row">
                                <label for="iconsHoverColor">
                                    {{ translate('Icons hover color') }}
                                </label>
                            </th>
                            <td>
                                <input type="text" id="iconsHoverColor" class="gg-color-picker" value="{{ settings.icons.hover_color }}" name="icons[hover_color]"/>
                            </td>
                        </tr>
                        <tr>
                            <th scope="row">
                                <label for="iconsBackgroundColor">
                                    {{ translate('Background color') }}
                                </label>
                            </th>
                            <td>
                                <input type="text" id="iconsBackgroundColor" class="gg-color-picker" value="{{ settings.icons.background }}" name="icons[background]"/>
                            </td>
                        </tr>
                        <tr>
                            <th scope="row">
                                <label for="iconsBackgroundHoverColor">
                                    {{ translate('Background hover color') }}
                                </label>
                            </th>
                            <td>
                                <input type="text" id="iconsBackgroundHoverColor" class="gg-color-picker" value="{{ settings.icons.background_hover }}" name="icons[background_hover]"/>
                            </td>
                        </tr>
                        <tr>
                            <th scope="row">
                                <label for="iconsSize">
                                    {{ translate('Icons size') }}
                                </label>
                            </th>
                            <td>
                                <input type="number" pattern="[0-9]" id="iconsSize"  name="icons[size]" value="{{ settings.icons.size }}"/>
                            </td>
                        </tr>
                        <tr>
                            <th scope="row">
                                <label for="iconsMargin">
                                    {{ translate('Distance between icons') }}
                                </label>
                            </th>
                            <td>
                                <input type="number" pattern="[0-9]" id="iconsMargin"  name="icons[margin]" value="{{ settings.icons.margin }}"/>
                            </td>
                        </tr>
                        <tr>
                            <th scope="row">
                                <label for="iconsOverlay">
                                    {{ translate('Show overlay') }}
                                </label>
                            </th>
                            <td>
                                <select id="iconsOverlay" name="icons[overlay_enabled]" style="width: auto;">
                                    <option value="true" {{ form.selected(settings.icons.overlay_enabled, 'true') }}>
                                        {{ translate('Yes') }}
                                    </option>
                                    <option value="false" {{ form.selected(settings.icons.overlay_enabled, 'false') }}>
                                        {{ translate('No') }}
                                    </option>
                                </select>
                            </td>
                        </tr>
                        <tr class="icons-overlay-toggle">
                            <th scope="row">
                                <label for="iconsOverlayColor">
                                    {{ translate('Overlay color') }}
                                </label>
                            </th>
                            <td>
                                <input type="text" id="iconsOverlayColor" class="gg-color-picker" value="{{ settings.icons.overlay_color }}" name="icons[overlay_color]"/>
                            </td>
                        </tr>
                        <tr class="icons-overlay-toggle">
                            <th scope="row">
                                <label for="iconsOverlayTransparency">
                                    {{ translate('Overlay transparency') }}
                                </label>
                            </th>
                            <td>
                                <select id="iconsOverlayTransparency" name="icons[overlay_transparency]" style="width: auto;">
                                    <option value="0" {{ form.selected(settings.icons.overlay_transparency, 0) }}>0%</option>
                                    <option value="1" {{ form.selected(settings.icons.overlay_transparency, 1) }}>10%</option>
                                    <option value="2" {{ form.selected(settings.icons.overlay_transparency, 2) }}>20%</option>
                                    <option value="3" {{ form.selected(settings.icons.overlay_transparency, 3) }}>30%</option>
                                    <option value="4" {{ form.selected(settings.icons.overlay_transparency, 4) }}>40%</option>
                                    <option value="5" {{ form.selected(settings.icons.overlay_transparency, 5) }}{% if settings.icons.overlay_transparency is not defined %}selected="selected"{% endif %}>50%</option>
                                    <option value="6" {{ form.selected(settings.icons.overlay_transparency, 6) }}>60%</option>
                                    <option value="7" {{ form.selected(settings.icons.overlay_transparency, 7) }}>70%</option>
                                    <option value="8" {{ form.selected(settings.icons.overlay_transparency, 8) }}>80%</option>
                                    <option value="9" {{ form.selected(settings.icons.overlay_transparency, 9) }}>90%</option>
                                    <option value="10" {{ form.selected(settings.icons.overlay_transparency, 10) }}>100%</option>
                                </select>
                            </td>
                        </tr>
                    </tbody>
                </table>
            {% endblock %}
        </div>

        {% block categories %}
            <div data-tab="cats">
                <h1 style="line-height: 1;">
                    {{ translate('Categorize images in the gallery') }}
                    </br>
                    <a class="button get-pro"
                       href="{{ getProUrl('?utm_source=plugin&utm_medium=categories&utm_campaign=gallery') }}">Get PRO</a>
                </h1>

                <div>
                    <a href="{{ getProUrl('?utm_source=plugin&utm_medium=categories&utm_campaign=gallery') }}">
                        <img src="{{ environment.module('galleries').getLocationUrl() }}/assets/img/cats_pro.jpg" />
                    </a>
                </div>
                {% block pagination %}
                    <h1 style="line-height: 1;">
                        {{ translate('Let user switch gallery pages') }}
                        </br>
                        <a class="button get-pro"
                           href="{{ getProUrl('?utm_source=plugin&utm_medium=pages&utm_campaign=gallery') }}">Get PRO</a>
                    </h1>
                    <div name="pagination">
                        <div>
                            <a href="{{ getProUrl('?utm_source=plugin&utm_medium=pages&utm_campaign=gallery') }}">
                                <img src="{{ environment.module('galleries').getLocationUrl() }}/assets/img/pagination_pro.jpg" />
                            </a>
                        </div>
                    </div>
                {% endblock %}
            </div>
        {% endblock %}

        {% block form %}
        {% endblock %}

        {{ form.close() }}

        <div id="saveDialog" title="{{ translate('Save settings as preset') }}">
            <div>
                <label for="presetTitle">
                    {{ translate('Preset title:') }}
                </label>
            </div>
            <div>
                <input id="presetTitle" type="text" name="title" style="width:100%;" value="{{ preset.title }}"/>
                <input id="settingsId" type="hidden" name="settings_id" value="{{ id }}"/>
            </div>
        </div>

        <div id="deletePreset" title="{{ translate('Delete preset') }}">
            <p>
                {{ translate('Are you really want to delete preset "%s"?')|format(preset.title) }}
            </p>
            <input type="hidden" id="presetId" value="{{ preset.id }}">
        </div>

        <div id="loadPreset" title="{{ translate('Load settings from presets') }}">
            <div>
                <label for="presetList">{{ translate('Select preset:') }}</label>
            </div>
            <div>
                <select id="presetList" name="presetList" style="width:100%"></select>
            </div>
            <div id="presetListError">
                <p id="presetLoadingFailed" style="display:none">
                    {{ translate('Failed to load the presets.') }}
                </p>

                <p id="presetEmpty" style="display:none">
                    {{ translate('Currently you have no presets.') }}
                </p>
            </div>
        </div>

        <div id="themeDialog" title="{{ translate('Select "Big image" theme') }}">
            <h1>
                {{ translate('Select a theme') }}
            </h1>
            <div>
                {% set bigImageThemes = {
                'theme_1': 'Theme 1',
                'theme_2': 'Theme 2',
                'theme_3': 'Theme 3',
                'theme_4': 'Theme 4',
                'theme_5': 'Theme 5',
                'theme_6': 'Theme 6',
                'theme_7': 'Theme 7',
                } %}

                {% if environment.isPro() %}
                    {% set bigImageThemes = bigImageThemes|merge({'theme_1_pro': 'Fullscreen popup'}) %}
                {% endif %}

                {% for value, name in bigImageThemes %}
                    <div class="grid-gallery-caption">
                        <img data-name="{{ name }}" data-val="{{ value }}" class="theme dialog-image"
                             src="{{ environment.getModule('colorbox').getThemeScreenshotUrl(value) }}" alt="{{ name }}"
                             title="{{ name }}"/>
                        <div class="select-element">
                            <h3>{{ translate('Select') }}</h3>
                        </div>
                    </div>
                {% endfor %}

            </div>
        </div>

        <div id="effectDialog" title="{{ translate('Select overlay effect') }}">
            <div id="effectsPreview" style="margin-top: 10px;">
                {% for type, name in effects %}
                    {% if type == 'direction-aware' %}
                        <figure class="grid-gallery-caption" data-grid-gallery-type="{{ type }}">
                            <div class="box">
                                <div class="box__right">Right → Left</div>
                                <div class="box__left">Left → Right</div>
                                <div class="box__top">Top → Bottom</div>
                                <div class="box__bottom">Bottom → Top</div>
                                <div class="box__center">
                                </div>
                                <img data-src="holder.js/150x150?theme=industrial&text={{ name }}" class="dialog-image">
                            </div>
                            <div class="select-element">
                                {{ translate('Select') }}
                            </div>
                        </figure>
                    {% elseif type == '3d-cube' %}
                        <figure class="grid-gallery-caption" data-grid-gallery-type="{{ type }}">
                            <div class="box-3d-cube-scene" style="perspective: 300px;-webkit-perspective: 300px">
                                <div class="box-3d-cube"
                                     style="
                                         transform-origin:50% 50% -75px;
                                         -ms-transform-origin: 50% 50% -75px;
                                         -webkit-transform-origin: 50% 50% -75px;
                                         width:150px; height:150px
                                     "
                                >
                                    <div class="face front" style="width:150px; height:150px">
                                        <img data-src="holder.js/150x150?theme=industrial&text={{ name }}" class="dialog-image">
                                    </div>
                                    <div style="{{ figcaptionStyle|trim }}width:150px; height:150px" class="face back">
                                        <div class="grid-gallery-figcaption-wrap">
                                            <span>{{ name }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="select-element">
                                {{ translate('Select') }}
                            </div>
                        </figure>
                    {% else %}
                        <figure class="grid-gallery-caption" data-grid-gallery-type="{{ type }}">
                            <img data-src="holder.js/150x150?theme=industrial&text={{ name }}" class="dialog-image">
                            <figcaption style="{{ figcaptionStyle|trim }}">
                                <div class="grid-gallery-figcaption-wrap" style="width:100%;height:100%;top:0;">
                                    <div style="display:table;width:100%;height:100%;">
                                        <span style="display:table-cell;font-size:{{ settings.thumbnail.overlay.text_size }}{{ settings.thumbnail.overlay.text_size_unit|replace(['px', '%', 'em']) }};padding:10px;vertical-align:{{ settings.thumbnail.overlay.position }};">Caption</span>
                                    </div>
                                </div>
                            </figcaption>
                            <div class="select-element">
                                {{ translate('Select') }}
                            </div>
                        </figure>
                    {% endif %}
                {% endfor %}
                <div class="grid-gallery-clearfix" style="clear: both;"></div>
                <div class="captions-effect-with-icons" data-confirm="{{ translate('This effect requires icons be enabled. Enable Icons?') }}">
                    <h3>Captions effects with icons</h3>
                    {% block iconsEffects %}
                        {% for type, name in iconsWithCaptionsEffects %}
                            <figure class="grid-gallery-caption" data-type="icons" data-grid-gallery-type="{{ type }}">
                                <img data-src="holder.js/150x150?theme=industrial&text={{ name }}" class="dialog-image"/>
                                <figcaption style="{{ figcaptionStyle|trim }}">
                                    <div class="hi-icon-wrap" style="width: 48px; height: 48px; margin-top: 30%; position:relative;">
                                        <a href="#" class="hi-icon icon-link" style="border:1px solid #ccc; border-radius:50%;margin:auto;position:absolute;left:0;right:0;top: 0;bottom: 0;">
                                        </a>
                                    </div>
                                </figcaption>
                                <div class="caption-with-{{ type }}">
                                    <div style="display: table; height:100%; width:100%;">
                                        <span style="padding: 10px;display:table-cell;font-size:{{ settings.thumbnail.overlay.text_size }}
                                        vertical-align:{{ settings.thumbnail.overlay.position }};">
                                            Caption
                                        </span>
                                    </div>
                                </div>
                                <div class="select-element">
                                    {{ translate('Select') }}
                                </div>
                            </figure>
                        {% endfor %}
                    {% endblock %}
                </div>
            </div>
        </div>

        <div id="shadowDialog" title="{{ translate('Select shadow preset') }}">
            <h1>
                {{ translate('Select shadow') }}
            </h1>
            <div class="shadow-dialog-wrapper">
                {% set shadowPresets = {
                'effect_1': {
                    'name': 'Effect 1',
                    'offset_x': '8',
                    'offset_y': '8',
                    'blur': '6',
                    'color': 'rgba(0, 0, 0, 0.58)'
                },
                'effect_2': {
                    'name': 'Effect 2',
                    'offset_x': '-8',
                    'offset_y': '-8',
                    'blur': '6',
                    'color': 'rgba(0, 0, 0, 0.58)'
                },
                'effect_3': {
                    'name': 'Effect 3',
                    'offset_x': '-8',
                    'offset_y': '8',
                    'blur': '6',
                    'color': 'rgba(0, 0, 0, 0.58)'
                },
                'effect_4': {
                    'name': 'Effect 4',
                    'offset_x': '8',
                    'offset_y': '-8',
                    'blur': '6',
                    'color': 'rgba(0, 0, 0, 0.58)'
                },
                'effect_5': {
                    'name': 'Effect 5',
                    'offset_x': '8',
                    'offset_y': '0',
                    'blur': '6',
                    'color': 'rgba(0, 0, 0, 0.58)'
                },
                'effect_6': {
                    'name': 'Effect 6',
                    'offset_x': '-8',
                    'offset_y': '0',
                    'blur': '6',
                    'color': 'rgba(0, 0, 0, 0.58)'
                },
                'effect_7': {
                    'name': 'Effect 7',
                    'offset_x': '0',
                    'offset_y': '-8',
                    'blur': '6',
                    'color': 'rgba(0, 0, 0, 0.58)'
                },
                'effect_8': {
                    'name': 'Effect 8',
                    'offset_x': '0',
                    'offset_y': '8',
                    'blur': '6',
                    'color': 'rgba(0, 0, 0, 0.58)'
                },
                'effect_9': {
                    'name': 'Effect 9',
                    'offset_x': '0',
                    'offset_y': '4',
                    'blur': '10',
                    'color': 'rgba(0, 0, 0, 1.0)'
                },
                'effect_10': {
                    'name': 'Effect 10',
                    'offset_x': '0',
                    'offset_y': '-4',
                    'blur': '8',
                    'color': 'rgba(0, 0, 0, 1.0)'
                }
                } %}


                {% for value, effect in shadowPresets %}
                    <div class="grid-gallery-caption" style="float: left; margin-left: 15px; cursor: pointer;">
                        <div class="shadow-preset" data-offset-x="{{ effect.offset_x }}" data-offset-y="{{ effect.offset_y }}" data-blur="{{ effect.blur }}" data-color="{{ effect.color }}"
                             style="margin: 20px; box-shadow: {{ effect.offset_x }}px {{ effect.offset_y }}px {{ effect.blur }}px {{ effect.color }};">
                            <img data-src="holder.js/150x150?theme=industrial&text={{ effect.name }}" class="dialog-image"/>
                        </div>
                        <div class="select-element">
                            {{ translate('Select') }}
                        </div>
                    </div>
                {% endfor %}

            </div>
        </div>

        <div id="reviewNotice" title="Review" hidden>
            <h3>Hey, I noticed you just use Gallery by Supsystic over a week – that’s awesome!</h3>
            <p>Could you please do me a BIG favor and give it a 5-star rating on WordPress? Just to help us spread the word and boost our motivation.</p>

            <ul style="list-style: circle; padding-left: 30px;">
                <li>
                    <button class="button button-primary"><a href="//wordpress.org/support/view/plugin-reviews/gallery-by-supsystic?rate=5#postform" target="_blank" class="bupSendStatistic" data-statistic-code="is_shown" style="color:#000000 !important;">Ok, you deserve it</a></button>
                </li>
                <li>
                    <button class="button button-primary"><span class="toeLikeLink bupSendStatistic" data-statistic-code="is_shown">Nope, maybe later</span></button>
                </li>
                <li>
                    <button class="button button-primary"><span class="toeLikeLink bupSendStatistic" data-statistic-code="is_shown">I already did</span></button>
                </li>
            </ul>
        </div>

        <div id="settingsImportDialog" title="Import" hidden>
            <div class="import">
                <p>{{ translate('Import settings from gallery') }}</p>
                <select class="list"></select>
            </div>
            <div class="import-not-available" style="display:none">
                <p>{{ translate('Here you can import settings from other galleries, but right now, you have only one gallery, create more - and see how it works') }}</p>
            </div>
        </div>

        {% import '@galleries/shortcode/import.twig' as importTypes %}
        <div id="importDialog" title="{{ translate('Select source to import from') }}" style="display: none;">
            {{ importTypes.show(400, gallery.id) }}
        </div>

        <div class="buttons-edit-preset-dialog-preview" title="{{ translate('Buttons preset editor for Paginations, Categories and Load More buttons') }}">
            <a href="{{ getProUrl('utm_source=plugin&utm_medium=show-more&utm_campaign=gallery') }}" target="_blank">
                <img src="{{ environment.module('galleries').getLocationUrl() }}/assets/img/custom_button_icon_pro.jpg" />
            </a>
        </div>
        <div class="loader-dialog-preview" title="{{ translate('Improve free version') }}" style="line-height: 200%;">
            Please be advised that this option is available only in <u>Pro version</u>. You can
            <a  href="{{ getProUrl('utm_source=plugin&utm_medium=loader&utm_campaign=gallery') }}" target="_blank" class="button">
                Get PRO
            </a>
            today and get this and other PRO options for Galleries!
        </div>
    </div>

    {% block modals %}
        <div id="iconsPreview" title="{{ translate('Select icons effects') }}">
            {%
                set iconsEffects = {
                    'hi-icon-effect-1a': { 'padding': '0', 'bg': '41ab6b'},
                    'hi-icon-effect-1b': { 'padding': '0', 'bg': '41ab6b'},
                    'hi-icon-effect-2a': { 'padding': '0', 'bg': 'eea303'},
                    'hi-icon-effect-2b': { 'padding': '0', 'bg': 'eea303'},
                    'hi-icon-effect-3a': { 'padding': '0', 'bg': 'f06060'},
                    'hi-icon-effect-3b': { 'padding': '0', 'bg': 'f06060'},
                    'hi-icon-effect-5a': { 'padding': '0', 'bg': '702fa8'},
                    'hi-icon-effect-5b': { 'padding': '0', 'bg': '702fa8'},
                    'hi-icon-effect-5c': { 'padding': '0', 'bg': '702fa8'},
                    'hi-icon-effect-5d': { 'padding': '0', 'bg': '702fa8'},
                    'hi-icon-effect-7a': { 'padding': '0', 'bg': 'd54f30'},
                    'hi-icon-effect-7b': { 'padding': '0', 'bg': 'd54f30'},
                    'hi-icon-effect-9a': { 'padding': '0', 'bg': '96a94b'},
                    'hi-icon-effect-9b': { 'padding': '0', 'bg': '96a94b'},
                }
            %}
            {% for name, p in iconsEffects %}
                <div class="hi-icon-wrap {{ name[0:length-1] }} {{ name }} holderjs" style="display: inline-block; padding: {{ p.padding }}; width: 150px; height: 150px; background: no-repeat; overflow: hidden;" data-background-src="holder.js/150x150?theme=industrial&text=\t">
                    <a href="#" class="hi-icon icon-link" data-effect="{{ name }}" title="{{ translate('Click on the icon to select effect') ~ " " ~ name }}">Select</a>
                </div>
            {% endfor %}
        </div>
        <style>
            .hi-icon {
                color: {{ settings.icons.color }} !important;
                background: {{ settings.icons.background }} !important;
            }
            .hi-icon:hover {
                color: {{ settings.icons.hover_color }} !important;
                background: {{ settings.icons.background_hover }} !important;
            }
            .hi-icon {
                width: {{ settings.icons.size * 2 }}px !important;
                height: {{ settings.icons.size * 2 }}px !important;
            }
            .hi-icon:before {
                font-size: {{ settings.icons.size|default(16) }}px !important;
                line-height: {{ settings.icons.size * 2 }}px !important;
            }
        </style>
    {% endblock %}
{% endblock %}