{% extends 'base.twig' %}

{% macro renderSlider(slider) %}
    {% if environment.getModule(slider.plugin) %}
        <div class="gg-item gg-slider" id="slider-{{ slider.id }}">
            <h3>{{ slider.title|capitalize }}</h3>
            <div class="image">
                {% if slider.images|length > 0 %}
                    <img src="{{ slider.images[0]|image_size('350', '220') }}" alt="{{ slider.title }}" title="{{ slider.title }}" width="350" height="220" />
                {% else %}
                    <img src="http://placehold.it/350x220&text={{ slider.title }}" alt="{{ slider.title }}" title="{{ slider.title }}" width="350" height="220"/>
                {% endif %}
            </div>
            <div class="buttons-wrap" style="display: inline-block; height: auto;">
                <ul class="gg-control-btn">
                    <li>
                        <a href="{{ environment.generateUrl('slider', 'view', { 'id': slider.id }) }}" class="button">
                            <i class="fa fa-gear"></i>
                            {{ translate('Properties') }}
                        </a>
                    </li>
                    <li>
                        <a href="{{ environment.generateUrl('slider', 'view', { 'id': slider.id }) }}&showPreview=show" class="button">
                            <i class="fa fa-eye"></i>
                            {{ translate('Preview') }}
                        </a>
                    </li>
                    <li>
                        <a class="delete-gallery button" href="{{ environment.generateUrl('slider', 'delete', { 'id': slider.id }) }}">
                            <i class="fa fa-trash-o"></i>
                            {{ translate('Delete Slider') }}
                        </a>
                    </li>
                </ul>
                <div class="gg-counter">
                    <i class="fa fa-picture-o"></i>
                    {{ translate('Total images: ') }}
                    <span style="font-weight: 200;">{{ slider.images|length|default(0) }}</span>
                </div>
                {% if environment.isPro() %}
                    <br />
                    <div class="gg-counter">
                        <i class="fa fa-video-camera"></i>
                        {{ translate('Total videos: ') }}
                        <span style="font-weight: 200;">{{ slider.videos|length|default(0) }}</span>
                    </div>
                {% endif %}
            </div>
            {#<div class="ui-helper-clearfix"></div>#}
            {#<div class="regular-text" id="propsShortcode" style="margin-left: 20px;">
                <h4 style="display: inline-block;"> {{ translate('Shortcode: ') }} </h4>
                [supsystic-slider id={{ slider.id }} position="center"]
                </br>
                <h4 style="display: inline-block;"> {{ translate('PhpCode: ') }} </h4>
                <label style="font-size: 13px;">{{ '<?php echo do_shortcode(\'[supsystic-slider id=' ~ slider.id ~ ' position="center"]\') ?>' }}</label>
            </div>#}
            <div class="shortcode-wrap">
                <div class="rs-shortcode">
                    Shortcode:<br /><br />
                    <span class="rsCopyTextCode">[supsystic-slider id={{ slider.id }} position="center"]</span><br /><br />
                    PhpCode:<br /><br />
                    <span class="rsCopyTextCode">{{ '<?php echo'|e }} do_shortcode('[supsystic-slider id={{slider.id}} position="center"]'); ?></span><br /><br />
                </div>
            </div>
        </div>
    {% endif %}
{% endmacro %}

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

    <!-- Template: {{ environment.getModule('slider').getLocation() }}/views/index.twig -->
    <h1 class="toolbar-title">{{ translate('Sliders List') }}</h1>
    <!-- End of Template: {{ environment.getModule('slider').getLocation() }}/views/index.twig -->
{% endblock %}

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

    {{ parent() }}

    <!-- Template: {{ environment.getModule('slider').getLocation() }}/views/index.twig -->
    {{ breadcrumbs.item(environment.generateUrl('slider'), translate('Sliders')) }}
    <!-- End of Template: {{ environment.getModule('slider').getLocation() }}/views/index.twig -->
{% endblock %}

{% block content %}

    {% import _self as self %}

    <!-- Template: {{ environment.getModule('slider').getLocation() }}/views/index.twig -->
    <section class="gg-galleries">
        <div class="gg-galleries-grid">
            {% for slider in sliders %}
                {{ self.renderSlider(slider) }}
            {% else %}
                <h2 class="header-muted">{{ translate('You haven\'t any sliders yet') }}</h2>
            {% endfor %}
        </div>
    </section>

    <div id="newSliderDialog" data-width="900" data-auto-open="false">
        <h3 style="border-bottom: 1px solid rgba(0, 0, 0, 0.21); padding-bottom: 20px;">{{ translate('Choose Slider Template. You can change it later.') }}</h3>
        <form id="newSliderDialogForm" style="padding-top: 10px;">
            <div class="new-slider" style="width: 100%;">
                <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="caption">{{ value.description }}</div>
                            {% if value.pro == 'true' and environment.isPro() != 'true' %}
                                <a class="button" href="{{ value.link }}" style="opacity: 0.0;">Get Pro</a>
                            {% 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>
    </div>
    <!-- End of Template: {{ environment.getModule('slider').getLocation() }}/views/index.twig -->
{% endblock %}