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

{% block header %}
    <nav id="supsystic-breadcrumbs" class="supsystic-breadcrumbs">
        <a href="{{ environment.generateUrl('galleries') }}">{{ translate('Galleries') }}</a>
        <i class="fa fa-angle-right"></i>
        <a href="{{ environment.generateUrl('galleries', 'settings', { 'gallery_id': gallery.id }) }}">{{ gallery.title }}</a>
        <i class="fa fa-angle-right"></i>
        <a href="{{ environment.generateUrl('galleries', 'view', { 'gallery_id': gallery.id }) }}">{{ translate('Images List') }}</a>
    </nav>

    <section class="supsystic-bar sgg-all-img-info-sect" id="single-gallery-toolbar" style="padding-bottom:0;">
    	<div class="gg-settings-row">
    		<div class="gg-settings-block">
		    	<ul class="supsystic-bar-controls">
		            <li title="{{ translate('Upload new images') }}">
		                <button class="button button-primary gallery import-to-gallery">
		                    <i class="fa fa-fw fa-upload"></i>
		                    {{ translate('Add Images') }}
		                </button>
		            </li>
		            <li>
		            	<a href="{{ environment.generateUrl('galleries', 'settings', { 'gallery_id': gallery.id }) }}"
		                	class="button">
		                    <i class="fa fa-fw fa-cogs"></i>
							{{ translate('Settings') }}
		                </a>
		            </li>
		            <li>
		                <a target="_blank"
		                   href="{{ environment.generateUrl('galleries', 'preview', { 'gallery_id': gallery.id }) }}"
		                   class="button" data-button="preview">
		                    <i class="fa fa-fw fa-eye"></i>
		                    {{ translate('Preview') }}
		                </a>
		            </li>
		            <li class="separator">|</li>
		        </ul>
		    	<ul class="supsystic-bar-controls gg-checked-options gg-flat-view-only">
		            <li id="checkedDoLi" data-delete-confirm="{{ translate('Are you sure you want to delete photo from this gallery?') }}">
						<select name="checkedDo" style="height: 34px;">
							<option value="rotate-clock">{{ translate('Rotate Clockwise') }}</option>
							<option value="rotate-cclock">{{ translate('Rotate Counter-Clockwise') }}</option>
							<option value="copy">{{ translate('Copy to') }}</option>
							<option value="move">{{ translate('Move to') }}</option>
							<option value="crop">{{ translate('Crop') }}</option>
							<option value="delete">{{ translate('Delete selected') }}</option>
							{% if(environment.isPro() == true) %}
								<option value="new-category">{{ translate('New Category') }}</option>
								<option value="add-category">{{ translate('Add Category') }}</option>
								<option value="del-category">{{ translate('Delete Category') }}</option>
							{% endif %}
							{% if environment.isPro() == true and settings.attributes is defined and settings.attributes.order|length > 0 %}
								<optgroup label="Add Attributes">
									{% for index, name in settings.attributes.order %}
										<option data-attribute value="{{ index }}">{{ name }}</option>
									{% endfor %}
								</optgroup>
							{% endif %}
						</select>
					</li>
					{% if(environment.isPro() == true) %}
						<li class="gg-checked-container gg-checked-attributes ggSettingsDisplNone">
							<select id="gg-attribute-values" style="height: 34px; width: 150px;" data-values="{{ gallery.attributes|json_encode }}">
							</select>
						</li>
						<li class="gg-checked-container gg-checked-new-category ggSettingsDisplNone">
							<input type="text" id="gg-new-category" style="width: 150px; height:34px;" value="" placeholder="Category name...">
			 			</li>
						<li class="gg-checked-container gg-checked-add-category ggSettingsDisplNone">
							<select id="gg-categories-list" style="height: 34px;">
								{% if(gallery.tags|length > 0) %}
									{% for value, title in gallery.tags %}
										<option value="{{ title }}">{{ title }}</option>
									{% endfor %}
								{% endif %}
							</select>
						</li>
						<li class="gg-checked-container gg-checked-del-category ggSettingsDisplNone">
							<select id="gg-categories-del" style="height: 34px;">
								{% if(gallery.tags|length > 0) %}
									{% for value, title in gallery.tags %}
										<option value="{{ title }}">{{ title }}</option>
									{% endfor %}
									<option value="allcat">{{ translate('All Categories') }}</option>
								{% endif %}
							</select>
						</li>
					{% endif %}
					<li class="gg-checked-copy gg-checked-move gg-checked-container ggSettingsDisplNone">
						<select id="gg-galleries-list" style="height: 34px;">
							{% for obj in galleries %}
								{% if obj.id != gallery.id %}
									<option value="{{ obj.id }}">{{ obj.title }}</option>
								{% endif %}
							{% endfor %}
						</select>
					</li>
					<li class="gg-checked-crop gg-checked-container ggSettingsDisplNone">
						{% set cropPositionList = {
                            "left-top":"Top Left",
                            "center-top":"Top Center",
                            "right-top":"Top Right",
                            "left-center":"Center Left",
                            "center-center":"Center Center",
                            "right-center":"Center Right",
                            "left-bottom":"Bottom Left",
                            "center-bottom":"Bottom Center",
                            "right-bottom":"Bottom Right"
                        } %}
						<select id="gg-crop-positions" style="height: 34px;">
                            {% for value, title in cropPositionList %}
                                <option value="{{ value }}">{{ title }}</option>
                            {% endfor %}
                        </select>
					</li>
					<li>
						<button class="button button-primary" data-button="checkedbtn" {% if recordsTotal < 1 %}disabled{% endif %}>
							<i class="fa fa-fw fa-check"></i>
							{{ translate('Apply') }}
						</button>
					</li>
		        </ul>
        	</div>

	        <div class="gg-settings-block">
		        <ul class="supsystic-bar-controls">
					<li class="gg-flat-view-only">
						<input id="find-by-caption" type="text" style="height:34px; width: 150px;" placeholder="{{ translate('Search') }}">
					</li>
					<li class="separator gg-flat-view-only">|</li>
				</ul>

		        <ul class="supsystic-bar-controls">
		            <li class="gg-flat-view-only" title="{{ translate('Sort By: ') }}">
						{{  translate('Sort By: ') }}
		                <select name="sortby" style="height: 34px;">
		                    <option value="position" {% if sort == 'position' %}selected{% endif %}>Position</option>
		                    <option value="adate" {% if sort == 'adate' %}selected{% endif %}>Add date</option>
		                    <option value="date" {% if sort == 'date' %}selected{% endif %}>Create date</option>
		                    <option value="size" {% if sort == 'size' %}selected{% endif %}>Size</option>
		                    <option value="name" {% if sort == 'name' %}selected{% endif %}>Name</option>
		                    <option value="filename" {% if sort == 'filename' %}selected{% endif %}>File name</option>
							{% if(environment.isPro() == true) %}<option value="tags" {% if sort == 'tags' %}selected{% endif %}>Tags</option>{% endif %}
		                    <option value="randomly" {% if sort == 'randomly' %}selected{% endif %}>Randomly</option>
		                </select>
		            </li>
					<li id="sortToLi" class="gg-flat-view-only" title="{{ translate('Sort To: ') }}" style="{% if sort == 'randomly' %} display:none; {% endif %}">
						<button class="button button-invisible" data-button="sortbtn">
							<i class="fa fa-fw fa-arrow-{% if dir == 'asc' %}up{% else %}down{% endif %}"></i>
						</button>
					</li>
					<li class="separator gg-flat-view-only">|</li>
					{% if environment.isPro() == true %}
						<li>
							<button class="button" data-button="show-categories">
								<i class="fa fa-fw fa-tags"></i>
								{{ translate('Show Categories') }}
							</button>
							<button class="button ggSettingsDisplNone" data-button="hide-categories">
								<i class="fa fa-fw fa-eye-slash"></i>
								{{ translate('Hide Categories') }}
							</button>
						</li>
						<li class="separator">|</li>
					{% endif %}
					<li class="gg-flat-view-only" title="{{ translate('Tile size') }}">
						<div class="gg-tile-size-control" data-value="m">
							<button type="button" class="gg-tile-size-btn" data-tile-size="s">S</button>
							<button type="button" class="gg-tile-size-btn" data-tile-size="m">M</button>
							<button type="button" class="gg-tile-size-btn" data-tile-size="l">L</button>
							<button type="button" class="gg-tile-size-btn" data-tile-size="xl">XL</button>
						</div>
					</li>
				</ul>

		        <ul class="supsystic-bar-controls">
					<li class="gg-pagination">
						<div class="gg-pagination-info" id="gg-pagination-info"></div>
						<div class="gg-pagination-controls">
							<button type="button" class="gg-page-btn" data-page-action="prev" title="{{ translate('Previous') }}">
								<i class="fa fa-angle-left"></i>
							</button>
							<span class="gg-page-numbers" id="gg-page-numbers"></span>
							<button type="button" class="gg-page-btn" data-page-action="next" title="{{ translate('Next') }}">
								<i class="fa fa-angle-right"></i>
							</button>
							<select id="gg-per-page">
								<option value="20" {% if perPage == 20 %}selected{% endif %}>20</option>
								<option value="50" {% if perPage == 50 %}selected{% endif %}>50</option>
								<option value="100" {% if perPage == 100 %}selected{% endif %}>100</option>
								<option value="200" {% if perPage == 200 %}selected{% endif %}>200</option>
								<option value="all" {% if perPage == 'all' %}selected{% endif %}>{{ translate('All') }}</option>
							</select>
						</div>
					</li>
				</ul>
			</div>
		</div>

    </section>

{% endblock %}

{% block content %}
    {% import '@galleries/shortcode/import.twig' as importTypes %}
	{% import '@core/form.twig' as form %}

    {% if gallery is not defined or gallery is null %}
        <p>{{ translate('The gallery is does not exists') }}</p>
    {% else %}
        {% if recordsTotal < 1 %}
            <h2 style="text-align: center; color: #bfbfbf; margin: 50px 0 25px 0;">
                <span style="margin-bottom: 20px; display: block;">
                    {{ translate('Currently this gallery has no images') }}
                </span>
                {{ importTypes.show('1000', gallery.id) }}
            </h2>
        {% else %}
            {# Read by Pro's Toast UI image editor (photos.js) to know which gallery an edited image belongs to. #}
            <form id="gallery-editor-hidden" style="display: none;">
                <input name="gallery_id" value="{{ gallery.id }}" type="hidden"/>
            </form>

            <div id="gg-tile-grid" data-gallery-id="{{ gallery.id }}" data-page="{{ page }}" data-per-page="{{ perPage }}"
                 data-sort="{{ sort }}" data-dir="{{ dir }}" data-records-total="{{ recordsTotal }}">
                {% include '@ui/includes/tile_grid.twig' with {'photos': gallery.photos} %}
            </div>

            {% if environment.isPro() == true %}
                <div id="gg-tile-categories" class="ggSettingsDisplNone" data-category-order="{{ settings.categoryOrder|default([])|json_encode|e }}">
                    {% for category in gallery.tags %}
                        <div class="gg-category ggImgVertMoveCol">
                            <div class="gg-category-caption">
                                <i class="fa fa-arrows-v ggImgVerticalMove" title="{{ translate('Drag to reorder categories') }}" aria-hidden="true"></i>
                                <a href="#gg-rename" class="gg-rename-category">{{ category }}</a>:{{ ' ' }}<label data-count>0</label>{{ ' ' ~ translate('media') }}
                            </div>
                            <ul class="gg-tile-grid-list gg-tile-category-bin" data-category="{{ category }}"></ul>
                        </div>
                    {% endfor %}
                    <div class="gg-category gg-category-uncategorized">
                        <div class="gg-category-caption">
                            <label>{{ translate('No category') }}:</label>{{ ' ' }}<label data-count>0</label>{{ ' ' ~ translate('media') }}
                        </div>
                        <ul class="gg-tile-grid-list gg-tile-category-bin" data-category=""></ul>
                    </div>
                </div>
                <div id="ggRenameCategory" title="{{ translate('Rename Category') }}" style="display:none;">
                    <label>{{ translate('New Name') }}: </label>
                    <input id="newCategoryName" type="text" value="">
                </div>
            {% endif %}
        {% endif %}
    {% endif %}

    {{ importTypes.view_dialogs(gallery.id) }}

    {# ---- Per-image option popups: one shared instance per option, populated from the clicked tile's data-entity-info when opened. ---- #}

    <div id="ggImageCaptionDialog" class="supsystic-plugin gg-option-dialog" title="{{ translate('Caption') }}" style="display:none;">
        <textarea class="gg-dialog-field" name="caption" rows="3" placeholder="{{ translate('Caption') }}"></textarea>
        {% if environment.isPro() == false %}
            <div class="gg-dialog-pro-hint">
                <textarea disabled rows="5" placeholder="{{ translate('Description') }}"></textarea>
                <button type="button" class="gg-pro-read-more" data-gg-pro-title="{{ translate('Description')|striptags }}"
                        data-gg-pro-desc="{{ '<p>' ~ translate('Add a longer description shown alongside the caption.') ~ '</p><p><a class="button button-primary" target="_blank" href="' ~ getProUrl('?utm_source=plugin&utm_medium=images_caption_description&utm_campaign=gallery') ~ '">' ~ translate('Get PRO') ~ '</a></p>' }}">
                    {{ translate('Available in PRO') }}
                </button>
            </div>
        {% else %}
            <textarea class="gg-dialog-field" name="captionDescription" rows="5" placeholder="{{ translate('Description') }}"></textarea>
        {% endif %}
        <div class="gg-dialog-actions">
            <button type="button" class="button button-primary gg-dialog-save">{{ translate('Save') }}</button>
        </div>
    </div>

    <div id="ggImageSeoDialog" class="supsystic-plugin gg-option-dialog" title="{{ translate('SEO Alt / Title') }}" style="display:none;">
        <textarea class="gg-dialog-field" name="alt" rows="2" placeholder="{{ translate('SEO Alt') }}"></textarea>
        <textarea class="gg-dialog-field" name="description" rows="5" placeholder="{{ translate('Title') }}"></textarea>
        <div class="gg-dialog-actions">
            <button type="button" class="button button-primary gg-dialog-save">{{ translate('Save') }}</button>
        </div>
    </div>

    <div id="ggImageTransferDialog" class="supsystic-plugin gg-option-dialog" title="" style="display:none;">
        <select class="gg-dialog-field" id="ggTransferGallerySelect" style="width:100%;">
            {% for obj in galleries %}
                {% if obj.id != gallery.id %}
                    <option value="{{ obj.id }}">{{ obj.title }}</option>
                {% endif %}
            {% endfor %}
        </select>
        <div class="gg-dialog-actions">
            <button type="button" class="button button-primary gg-dialog-save">{{ translate('Apply') }}</button>
        </div>
    </div>

    <div id="ggImageLinkDialog" class="supsystic-plugin gg-option-dialog" title="{{ translate('Link') }}" style="display:none;">
        <input type="text" class="gg-dialog-field" name="link" style="width: 100%;" placeholder="{{ translate('http://example.com/') }}"/>
        <label><input type="checkbox" class="gg-dialog-field" name="target" value="_blank"/> {{ translate('Open in new window') }}</label>
        <label><input type="checkbox" class="gg-dialog-field" name="rel[]" value="nofollow"/> {{ translate('Add nofollow attribute') }}</label>
        <label><input type="checkbox" class="gg-dialog-field" name="rel[]" value="noopener"/> {{ translate('Add noopener attribute') }}</label>
        <label><input type="checkbox" class="gg-dialog-field" name="rel[]" value="noreferrer"/> {{ translate('Add noreferrer attribute') }}</label>
        <div class="gg-dialog-actions">
            <button type="button" class="button button-primary gg-dialog-save">{{ translate('Save') }}</button>
        </div>
    </div>

    <div id="ggImageRotateDialog" class="supsystic-plugin gg-option-dialog" title="{{ translate('Rotate') }}" style="display:none;">
        <select class="gg-dialog-field" id="ggRotateSelect" style="width:100%;">
            <option value="clockwise">{{ translate('Rotate Clockwise') }}</option>
            <option value="counter">{{ translate('Rotate Counter-Clockwise') }}</option>
        </select>
        <div class="gg-dialog-actions">
            <button type="button" class="button button-primary gg-dialog-save">{{ translate('Apply') }}</button>
        </div>
    </div>

    <div id="ggImageCropDialog" class="supsystic-plugin gg-option-dialog" title="{{ translate('Crop') }}" style="display:none;">
        {% set cropPositionList = {
            "left-top":"Top Left", "center-top":"Top Center", "right-top":"Top Right",
            "left-center":"Center Left", "center-center":"Center Center", "right-center":"Center Right",
            "left-bottom":"Bottom Left", "center-bottom":"Bottom Center", "right-bottom":"Bottom Right"
        } %}
        <select class="gg-dialog-field" id="ggCropPositionSelect" style="width:100%;">
            {% for value, title in cropPositionList %}
                <option value="{{ value }}">{{ title }}</option>
            {% endfor %}
        </select>
        <div class="gg-dialog-actions">
            <button type="button" class="button button-primary gg-dialog-save">{{ translate('Save') }}</button>
        </div>
    </div>

    {% if environment.isPro() == true %}
        <div id="ggImageVideoDialog" class="supsystic-plugin gg-option-dialog" title="{{ translate('Video') }}" style="display:none;">
            <input type="text" class="gg-dialog-field" name="video" style="width: 100%;" placeholder="{{ translate('Video URL') }}"/>
            <div class="gg-dialog-actions">
                <button type="button" class="button button-primary gg-dialog-save">{{ translate('Save') }}</button>
            </div>
        </div>

        <div id="ggImageCategoriesDialog" class="supsystic-plugin gg-option-dialog" title="{{ translate('Categories') }}" style="display:none;">
            <input type="text" id="ggCategoriesInput" style="width:100%;" placeholder="{{ translate('Categories, separated by commas') }}"/>
            <div class="gg-dialog-actions">
                <button type="button" class="button button-primary gg-dialog-close">{{ translate('Done') }}</button>
            </div>
        </div>
    {% endif %}

    <div id="linkedImagesDialog" title="{{ translate('Linked Images') }}" style="display:none;">
        <div class="linked-images-action-buttons">
            <button class="button add">{{ translate('Add images') }}</button>
            <button class="button remove">{{ translate('Remove selected') }}</button>
        </div>
        <div class="linked-attachments-list">

        </div>
        <div class="loading-container">
            <i class="fa fa-spinner fa-spin fa-2x"></i>
        </div>
    </div>

    <div id="effectDialog" title="{{ translate('Select overlay effect') }}" style="display:none;">
        <div id="effectsPreview" style="margin-top: 10px;">
            {% set effects = {
                'none': 'None',
                'center': 'Middle',
                'quarter-appear': 'Appear',
				'quarter-disappear': 'Disappear',
                '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',
				'revolving-door-original-left': 'Revolving Door Original Left',
				'revolving-door-original-right': 'Revolving Door Original Right',
				'revolving-door-original-top': 'Revolving Door Original Top',
				'revolving-door-original-bottom': 'Revolving Door Original Bottom',
                'cover-slide-top': 'Cover Slide Top',
                'offset': 'Caption Offset',
                'guillotine-reverse': 'Guillotine Reverse',
                'half-slide': 'Half Slide',
                'sqkwoosh': 'Skwoosh',
                'tunnel': 'Tunnel',
                'direction-aware': 'Direction Aware',
				'phophorus-rotate': 'Phosphorus Rotate',
				'phophorus-offset': 'Phosphorus Offset',
				'phophorus-scale': 'Phosphorus Scale',
                'cube': 'Cube',
                'polaroid': 'Polaroid',
				'3d-cube': '3D Cube',
				'show-on-hover' : 'Show on Hover',
				'swing': 'Swing',
            } %}
            {% set iconsWithCaptionsEffects = {
                'icons': 'Default',
                'icons-scale': 'Scale',
                'icons-sodium-left': 'Sodium Left',
                'icons-sodium-top': 'Sodium Top',
                'icons-nitrogen-top': 'Nitrogen Top'
            } %}
            {% set figcaptionStyle %}
                border-radius: {{ settings.thumbnail.border.radius ~ settings.thumbnail.border.radius_unit|unitReplace(['px', '%']) }};
                {% if environment.isPro() and settings.icons is defined and settings.icons.enabled == 'true' %}
                    {% if settings.icons.overlay_enabled == 'true' %}
                        background-color:{{ settings.icons.overlay_color|default('#3498db') }};
                    {% endif %}
                {% else %}
                    color:{{ settings.thumbnail.overlay.foreground }};
                    background-color:{{ settings.thumbnail.overlay.background }};
                    font-size:{{ settings.thumbnail.overlay.text_size }}{{ settings.thumbnail.overlay.text_size_unit|unitReplace(['px', '%', 'em']) }};
                    {% if settings.thumbnail.overlay.text_align != 3 %}
                        text-align:{{ settings.thumbnail.overlay.text_align|replace(['left', 'right', 'center']) }};
                    {% endif %}
                    {% if settings.thumbnail.overlay.effect == 'none' or settings.thumbnail.overlay.enabled == 'false' %}
                        bottom:0;
                    {% endif %}
                {% endif %}
            {% endset %}

			{% block settingsCaptionsView %}
				{% if (gallery.settings.icons.enabled == 'false') %}
					{% block settingsCaptionsIconsEnabledView %}
						{% 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 in ['show-on-hover', 'fade-in', 'grow', 'shrink', 'rotate-z', 'square-to-circle',] %}
								{% block captionEffectInPro %}
								<figure class="grid-gallery-caption available-in-pro" data-grid-gallery-type="{{ type }}">
									<a target="_blank" href="{{ getProUrl('?utm_source=plugin&utm_medium=caption-show-on-hover&utm_campaign=gallery') }}" class="caption-available-in-pro-link">
										<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 {% if settings.rtl == true %}dir="rtl" class="ggRtlClass"{% endif %} style="display:table-cell;font-size:{{ settings.thumbnail.overlay.text_size }}{{ settings.thumbnail.overlay.text_size_unit|unitReplace(['px', '%', 'em']) }};padding:10px;vertical-align:{{ settings.thumbnail.overlay.position }};">Caption</span>
												</div>
											</div>
										</figcaption>
										<div class="get-in-pro-element">
											{{ translate('Pro Feature') }}
										</div>
									</a>
								</figure>
								{% endblock %}
							{% 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">
											<span>{{ name }}</span>
										</div>
									</figcaption>
									<div class="select-element">
										{{ translate('Select') }}
									</div>
								</figure>
							{% endif %}
						{% endfor %}
						<div class="grid-gallery-clearfix" style="clear: both;"></div>
					{% endblock %}
				{% else %}
					{% block settingsCaptionsIconsDisabledView %}
						<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 }}{{ settings.thumbnail.overlay.text_size_unit|unitReplace(['px', '%', 'em']) }};vertical-align:{{ settings.thumbnail.overlay.position }};">
													Caption
												</span>
											</div>
										</div>
										<div class="select-element">
											{{ translate('Select') }}
										</div>
									</figure>
								{% endfor %}
							{% endblock %}
						</div>
					{% endblock %}
				{% endif %}
			{% endblock %}
        </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|numDefault(0) * 2 }}px !important;
                height: {{ settings.icons.size|numDefault(0) * 2 }}px !important;
            }
            .hi-icon:before {
                font-size: {{ settings.icons.size|numDefault(16) }}px !important;
                line-height: {{ settings.icons.size|numDefault(0) * 2 }}px !important;
            }
        </style>
		{% block settingsOtherPro %}
		{% endblock %}
    </div>

	<div id="ggImageMetaDialog" title="{{ translate('Meta Data') }}" style="display:none;">
        <div class="image-meta-list">
        </div>
    </div>

    {% if environment.isPro() == true %}
    	<div id="ggImageAttributesDialog" class="supsystic-plugin" title="{{ translate('Custom Attributes') }}" data-image-id="" style="display:none;">
        	<div>
        		<table>
        			{% if settings.attributes is defined and settings.attributes.order|length > 0 %}
	   					{% for index, name in settings.attributes.order %}
	   						<tr style="height:auto">
	   							<td>
	   								{{ name }}
	   								<input class="gg-attribute-names" type="hidden" value="{{ name }}">
	   							</td>
	   							<td>
	   								<select class="gg-attribute-values" data-attribute="{{ index }}" style="height: 30px; width: 200px;">
									</select>
	   							</td>
	   							<td>
	   								<input class="gg-attribute-new" type="text" data-attribute="{{ index }}" style="height:30px; width: 100%;" placeholder="{{ translate('New value') }}">
	   							</td>
	   						</tr>
						{% endfor %}
        			{% else %}
	        			<tr>
							{% if settings.attributes.enabled != 'false' %}
								<td colspan="3">
									{{ translate('No custom attributes have been specified for the gallery.') }}
								</td>
							{% else %}
								<td colspan="3" style="color:red;">
									{{ translate('You need enable attribute in gallery settings.') }}
								</td>
							{% endif %}
	        			</tr>
        			{% endif %}
        			<tr style="height:auto">
        				<td colspan="3">
        					<hr>
        				</td>
        			</tr>
        			<tr>
        				<td>
        					<span style="font-weight: bold">{{ translate('Button Link') }}</span>
        				</td>
        				<td>
        					<input id="ggButtonLinkUrl" type="text" style="height:30px; width: 100%;" placeholder="{{ translate('Url') }}">
        				</td>
        				<td>
        					<input id="ggButtonLinkTitle" type="text" style="height:30px; width: 100%;" placeholder="{{ translate('Title') }}">
        				</td>
        			</tr>
        			<tr>
        				<td>
        					<span style="font-weight: bold">{{ translate('Keywords') }}</span>
        				</td>
        				<td colspan="2">
        					<input id="ggImageKeywords" type="text" style="height:30px; width: 100%;">
        				</td>
        			</tr>
        		</table>
        	</div>
    	</div>
    {% endif %}

{% endblock %}