{% extends '@slider/index.twig' %}

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

    {{ parent() }}
    {{ breadcrumbs.item(environment.generateUrl('slider', 'view', { 'id': slider.id }), slider.title|title) }}
{% endblock %}

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

    {{ toolbar.primaryUrl('upload-images', environment.generateUrl('slider', 'add', { 'id': slider.id }), environment.translate('Import images'), { 'icon': 'upload' }) }}
    {{ toolbar.button('preview-trigger', environment.translate('Preview'), { 'icon': 'eye' }) }}
    {#{{ toolbar.button('change', environment.translate('Change plugin: ') ~ slider.plugin|title, { 'icon': 'wrench' }) }}#}

    {{ toolbar.separator() }}

    {{ toolbar.icon('delete-element', 'trash-o') }}

    {{ toolbar.separator() }}

    {# {{ toolbar.icon('visual-editor', 'code') }} #}

    {{ toolbar.primary('save', environment.translate('Save'), { 'icon': 'check', 'container': { 'style': {'float': 'right'} }, 'custom': {'form': 'settings'} }) }}
    {{ toolbar.button('delete', environment.translate('Delete'), { 'icon': 'trash-o', 'container': { 'style': {'float': 'right'} }, 'dataset': { 'id': slider.id, 'redirect-uri': environment.generateUrl('slider'), 'confirm': environment.translate('Are you really want to delete ') ~ slider.title ~ '?' } }) }}
{% endblock %}

{% block content %}
    {% import '@ui/type.twig' as view_type %}

    {% set small = 0 %}
    {% for image in slider.images %}
        {% if image.attachment.sizes.full.width < slider.settings.properties.width %}
            {% set small = small + 1 %}
        {% endif %}
    {% endfor %}

    {% if small > 0 %}
        <div class="error">
            <p><strong>Warning:</strong> {{ small }} {% if small > 1 %}photos{% else %}photo{% endif %} is smaller then slider width (<span class="sliderWidth">{{ slider.settings.properties.width }}</span>px)</p>
        </div>
    {% endif %}

    <div id="image-area" class="half-page">
        {% if slider.images is not empty %}
            {{ view_type.list_view(slider) }}
        {% else %}
            <h2 class="header-muted">You haven't any images yet.</h2>
        {% endif %}
    </div>
    <div id="settings-area" class="half-page settings">

        <h2 style="text-align: center;">
            {% import '@slider/macro/tabs.twig' as tabs %}
            {{ tabs.button(environment.translate('Properties'), 'properties') }}
            {% block buttons %}{% endblock %}
        </h2>

        <form id="settings" method="post" action="{{ environment.generateUrl('slider', 'saveSettings') }}">

            <input id="sliderID" name="id" value="{{ slider.id }}" type="hidden"/>

            <table class="form-table">
                <thead>
                <tr data-tab="properties" id="properties">
                    <th scope="row">
                        <label for="propsShortcode">
                            {{ environment.translate('Shortcode') }}
                        </label>
                    </th>
                    <td>
                        <input class="regular-text" type="text" id="propsShortcode" readonly value="[ready-slider id='{{ slider.id }}']" />
                    </td>
                </tr>
                <tr>
                    <th scope="row">
                        <label for="propsSliderWidth">
                            {{ environment.translate('Images width') }}
                        </label>
                    </th>
                    <td>
                        <input class="regular-text" type="number"
                               value="{{ slider.settings.properties.width }}"
                               min="0"
                               step="100"
                               name="properties[width]"
                               id="propsSliderWidth"/>
                    </td>
                </tr>
                <tr>
                    <th scope="row">
                        <label for="propsSliderHeight">
                            {{ environment.translate('Images height') }}
                        </label>
                    </th>
                    <td>
                        <input class="regular-text" type="number"
                               value="{{ slider.settings.properties.height }}"
                               min="0"
                               step="100"
                               name="properties[height]"
                               id="propsSliderHeight"/>
                    </td>
                </tr>
                {% block form %}{% endblock %}
                </thead>
            </table>
        </form>

        <div id="changePluginWindow" title="{{ environment.translate('Change plugin') }}" style="display: none;">
            <form id="changePlugin">
                <input name="id" type="hidden" value="{{ slider.id }}"/>
                <input name="route[module]" value="slider" type="hidden"/>
                <input name="route[action]" value="changePlugin" type="hidden"/>
                <input name="action" value="ready-slider" type="hidden"/>
                <table class="form-table">
                    <thead>
                    <tr>
                        <th scope="row">
                            <label>
                                {{ environment.translate('Select plugin') }}
                            </label>
                        </th>
                        <td>
                            {% for plugin in environment.getModule('slider').getAvailableSliders() %}
                                <label for="plugin-{{ plugin.getModuleName() }}">
                                    <input type="radio" name="plugin"
                                           id="plugin-{{ plugin.getModuleName() }}"
                                           value="{{ plugin.getModuleName() }}"
                                           {% if slider.plugin == plugin.getModuleName() %}checked="checked"{% endif %}/>
                                    <span>{{ plugin.getSliderName() }}</span>
                                    <br/>
                                </label>
                            {% endfor %}
                        </td>
                    </tr>
                    <tr>
                        <th scope="row" colspan="2">
                            <p class="description">
                                {{ environment.translate('Please note:') }}
                                {{ environment.translate('Current settings will be removed without ability to restore.') }}
                            </p>
                        </th>
                    </tr>
                    </thead>
                </table>
            </form>
        </div>
    </div>

    <div id="preview-window" style="display: none;" title="Preview of {{ slider.title }}" data-id="{{ slider.id }}">
        <img src="{{ environment.getConfig().get('admin_url') }}images/wpspin_light.gif" alt="" style="display: block; margin: 10px auto;"/>
    </div>

    <div id="visual-editor-window" style="display: none;" title="{{ environment.translate('Visual editor') }}" data-id="{{ slider.id }}" data-loaded="false">
        <img class="first-start" src="{{ environment.getConfig().get('admin_url') }}images/wpspin_light.gif" alt="" style="display: block; margin: 10px auto;"/>
    </div>
{% endblock %}