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

{% macro putPreset(data) %}
    <div class="preset {% if environment.isPro() == false and data.pro %}disabled{% endif %}"
         data-preset="{{ data.value }}">
        <img src="{{ environment.getModule('galleries').getLocationUrl() }}/assets/img/{{ data.image }}" alt=""/>
        {% if data.pro and environment.isPro() == false %}
            <a class="button button-primary" href="http://supsystic.com/plugins/photo-gallery/" style="position: absolute; top: 50%; left: 30%; background-color: #ffffff;">
                Available in PRO
            </a>
        {% else %}
            <div style="position: absolute; top: 50%; left: 50%; transform:translate(-50%, -50%); display:table;">
                <a class="button button-primary button-select" style="background-color: #ffffff;">
                    Select
                </a>
                <span class="selected-preset">{{ translate('Selected') }}</span>
            </div>
        {% endif %}
        <div class="preset-overlay">
            <h3>{{ data.title|title }}</h3>
        </div>
    </div>
{% endmacro %}

{% block header %}
    <nav id="supsystic-breadcrumbs" class="supsystic-breadcrumbs">
        <a href="{{ environment.generateUrl('galleries') }}">{{ translate('Gallery by Supsystic') }}</a>
        <i class="fa fa-angle-right"></i>
        <a href="{{ environment.generateUrl('galleries', 'showPresets') }}">{{ translate('Create new gallery') }}</a>
    </nav>
{% endblock %}

{% block content %}
    <h3 style="margin-left: 10px;padding-bottom: 10px !important;border-bottom: 1px solid;">{{ translate('Choose Gallery Template. You can change template and settings on the next step.') }}</h3>
    <div id="gg-create-gallery-text">
        <h3 style="float: left; margin: 10px !important;">{{ translate('Gallery Name:') }}</h3>
        <input name="title" type="text" style="float: left; width: 60%;"/>
        <button id="gallery-create" class="button button-primary" type="button">
            <i class="fa fa-check"></i>
            {{ translate('Save') }}
        </button>
        {#<button id="gallery-cancel" class="button button-primary" type="button">
            {{ environment.translate('Cancel') }}
        </button>#}

        <div class="clear"></div>
        <input id="presetValue" name="preset" type="hidden" value="1"/>
    </div>
    {#<h1 style="margin-left: 10px;padding-bottom: 10px !important;border-bottom: 1px solid;">{{ environment.translate('Choose Gallery Template.') }}</h1>#}
    <div id="gg-create-gallery-text">
        <div class="presetSelect">
            {% import _self as preset %}

            {% set presets = [
            {'title':'Standard Gallery', 'image':'template1.jpg', 'pro': false, 'value': 1},
            {'title':'Vertical Gallery', 'image':'template2.jpg', 'pro': false, 'value': 2},
            {'title':'Rounded Gallery', 'image':'template3.jpg', 'pro': false, 'value': 3},
            {'title':'Horizontal Gallery', 'image':'template4.jpg', 'pro': false, 'value': 4},
            {'title':'Categories and Icons', 'image':'template5.jpg', 'pro': true, 'value': 5},
            {'title':'Post feed and Pagination', 'image':'template6.jpg', 'pro': true, 'value': 6},
            {'title':'Post feed Slide Up', 'image':'template7.jpg', 'pro': true, 'value': 7},
            {'title':'Post feed Description', 'image':'template8.jpg', 'pro': true, 'value': 8}
            ] %}

            {#Pro presets#}
            {#{'title':'Categories', 'image':'4-categories.jpg', 'pro': true, 'value': 4},
            {'title':'Icons', 'image':'5-icons.jpg', 'pro': true, 'value': 5},
            {'title':'Pagination', 'image':'6-pagination_circle-gallery.jpg', 'pro': true, 'value': 6}#}

            {% for data in presets %}
                {{ preset.putPreset(data) }}
            {% endfor %}
        </div>
    </div>
    <div id="gg-create-gallery-loader" style="display: none;">
        <p class="gg-centered">

        <div class="gg-inline-loader gg-centered"></div>
        </p>
    </div>
{% endblock %}