{% extends 'base.twig' %}

{% block toolbar %}
    {% import 'macro/toolbar.twig' as toolbar %}

    <h3 style="margin-left: 10px; padding: 20px; border-bottom: 1px solid black;">{{ translate('Choose Slider Template. You can change it later.') }}</h3>
{% endblock %}

{% block breadcrumbs %}
    {% import 'macro/breadcrumbs.twig' as breadcrumbs %}

    {{ parent() }}
    {{ breadcrumbs.item(environment.generateUrl('slider', 'showPresets'), translate('Create new slider')) }}
{% endblock %}

{% block content %}
    <form id="newSliderDialogForm" style="padding-top: 10px;">
        <div id="rs-create-slider-text">
            <h3 style="float: left; margin: 10px !important;">{{ translate('Slider Name:') }}</h3>
            <input id="sliderNameInput" name="title" type="text" style="float: left; width: 60%;"/>
            <button id="add-slider-button" class="button button-primary" type="button">
                <i class="fa fa-check"></i>
                {{ translate('Save') }}
            </button>
        </div>
        <div id="rs-create-slider-text">
            <!--div class="line name">
                <div class="caption" style="width: 140px; display: inline-block;">
                    <h3>{{ translate('Slider Name') }}</h3>
                </div>
                <div style="display: inline-block;">
                    <input id="sliderNameInput" type="text" name="title"/>
                    <input type="button" id="add-slider-button" value="Ok" class="button" style="margin: 0 4px;"/>
                    <input type="button" id="cancel-slider-button" value="Cancel" class="button"/>
                </div>
            </div-->
            {% if available is defined and available is iterable and available|length > 1 %}
                {#<div class="line">
                    <div class="caption" style="display: inline-block;">
                        <h3>{{ environment.translate('Select module') }}</h3>
                    </div>
                    <div style="display: inline-block;">
                        {% for plugin in available %}
                            <label for="plugin-{{ plugin.getModuleName() }}">
                                <input type="radio" name="plugin"
                                       id="plugin-{{ plugin.getModuleName() }}"
                                       {% if loop.first %}checked="checked"{% endif %}
                                       value="{{ plugin.getModuleName() }}"/>
                                <span>{{ plugin.getSliderName() }}</span>
                            </label><br/>
                        {% endfor %}
                    </div>
                </div>#}
                <input id="slider-plugin" type="text" name="plugin" value="bx" data-pro="{{ environment.isPro() }}" hidden>
                <input id="slider-preset" type="text" name="preset" value="" hidden>

                {% if environment.isPro() %}
                    {% set html_plugin = 'jssor' %}
                {% else %}
                    {% set html_plugin = 'bx' %}
                {% endif %}

                {% set presetImages = {
                    'bullets': {
                        'plugin': 'bx',
                        'preset': '',
                        'description': 'Bullets navigation',
                        'pro': 'false'
                    },
                    'slideshow': {
                        'plugin': 'coin',
                        'preset': 'coin-slideshow',
                        'description': 'Slideshow mode',
                        'pro': 'false'
                    },
                    'thumbs': {
                        'plugin': 'bx',
                        'preset': 'thumbs',
                        'description': 'Thumbnails navigation',
                        'pro': 'false'
                    },
                    'posts_pro': {
                        'plugin': 'coin',
                        'preset': '',
                        'description': 'Post feed slider',
                        'pro': 'true',
                        'link' : 'http://supsystic.com/plugins/slider?utm_source=plugin&utm_medium=templatefeed&utm_campaign=slider'
                    },
                    'html_pro': {
                        'plugin': html_plugin,
                        'preset': '',
                        'description': 'HTML content',
                        'pro': 'true',
                        'link': 'http://supsystic.com/plugins/slider?utm_source=plugin&utm_medium=templatehtml&utm_campaign=slider'
                    },
                    'video_pro': {
                        'plugin': 'bx',
                        'preset': '',
                        'description': 'Video slider',
                        'pro': 'true',
                        'link': 'http://supsystic.com/plugins/slider?utm_source=plugin&utm_medium=templatevideo&utm_campaign=slider'
                    }
                } %}
                {% for element, value in presetImages %}
                    <div class="line preset{% if loop.index == 1 %} selected{% endif %}" data-value="{{ value.plugin }}" data-preset="{{ value.preset }}">
                        <img class="preset-image" src="{{ environment.getModule('slider').getLocationUrl() }}/assets/images/{{ element }}.jpg" width="400px" height="228px">
                        <div class="rs-preset-overlay">
                            <h3>{{ value.description }}</h3>
                        </div>
                        {% if value.pro == 'true' and environment.isPro() != 'true' %}
                            <a class="button" href="{{ value.link }}">{{ translate('Get 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;">{{ translate('Select') }}</a>
                                <span class="selected-preset">{{ translate('Selected') }}</span>
                            </div>
                        {% endif %}

                    </div>
                {% endfor %}
            {% else %}
                <input name="plugin" value="{{ environment.getConfig().get('default_slider') }}" type="hidden"/>
            {% endif %}
        </div>
        <input name="action" value="supsystic-slider" type="hidden"/>
        <input name="route[module]" value="slider" type="hidden"/>
        <input name="route[action]" value="create" type="hidden"/>
    </form>
{% endblock %}