{% extends 'admin/base.html.twig' %}

{% block content %}
    <div class="row">
        <div class="col-md-12">
            <div class="panel">
                <div class="panel-heading">
                    <div class="row">
                        <h4 class="panel-title col-md-9">
                            {{ 'admin.slide.index.title'|trans }}
                        </h4>
                        <div class="col-md-3">
                            <a class="btn btn-success btn-quirk btn-sm pull-right"
                               href="{{ path('admin_slider_create') }}">
                                {{ 'admin.slide.index.create'|trans }}
                            </a>
                        </div>
                    </div>
                </div>
                <div class="panel-body">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                            <tr>
                                <th>{{ 'form.slide.label.name'|trans }}</th>
                                <th>{{ 'form.slide.label.status'|trans }}</th>
                                <th>{{ 'common.label.picture'|trans }}</th>
                                <th>{{ 'form.slide.label.position'|trans }}</th>
                                <th>{{ 'common.action.title'|trans }}</th>
                            </tr>
                            </thead>
                            {% for slide in slides %}
                                <tr>
                                    <td>
                                        <a href="{{ path('admin_slider_edit',{'id': slide.id}) }}">
                                            {{ slide.name }}
                                        </a>
                                    </td>
                                    <td>{{ ('common.status.' ~ slide.status)|trans }}</td>
                                    <td>
                                        <img class="img-responsive-ib" src="{{ slide|image('file', 'thumb_home') }}"
                                             alt="{{ slide.file.originalFilename }}">
                                    </td>
                                    <td>
                                        {% if loop.first == false and slide.position > 1 %}
                                            <a href="{{ path('admin_slider_up', {'id': slide.id}) }}">
                                                <i class="fa fa-arrow-up" aria-hidden="true"></i>
                                            </a>
                                        {% else %}
                                            <i class="fa fa-arrow-up" aria-hidden="true"></i>
                                        {% endif %}
                                        <button type="button" data-container="body" data-id="{{ slide.id }}"
                                                data-placement="right" data-toggle="popover" data-trigger="focus"
                                                class="position-popover"
                                                title="{{ 'common.form.popover.slide_title'|trans }}">
                                            {{ slide.position }}
                                        </button>
                                        {% if loop.last == false and slide.position >= 1 %}
                                            <a href="{{ path('admin_slider_down', {'id': slide.id}) }}">
                                                <i class="fa fa-arrow-down" aria-hidden="true"></i>
                                            </a>
                                        {% else %}
                                            <i class="fa fa-arrow-down" aria-hidden="true"></i>
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if slide.status == 'enabled' %}
                                            <a title="{{ 'common.button.disabled'|trans }}"
                                               class="btn btn-danger btn-sm btn-quirk"
                                               href="{{ path('admin_slider_change_status', {'id': slide.id}) }}">
                                                <i class="fa fa-eye-slash" aria-hidden="true"></i>
                                            </a>
                                        {% else %}
                                            <a title="{{ 'common.button.enabled'|trans }}"
                                               class="btn btn-success btn-sm btn-quirk"
                                               href="{{ path('admin_slider_change_status', {'id': slide.id}) }}">
                                                <i class="fa fa-eye" aria-hidden="true"></i>
                                            </a>
                                        {% endif %}
                                        <a class="btn btn-primary btn-sm btn-quirk"
                                           href="{{ path('admin_slider_edit',{'id': slide.id}) }}">
                                            <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
                                        </a>
                                        <a class="btn btn-danger btn-sm btn-quirk delete-message"
                                           href="{{ path('admin_slider_delete',{'id': slide.id}) }}">
                                            <i class="fa fa-trash" aria-hidden="true"></i></a>
                                    </td>
                                </tr>
                            {% endfor %}
                        </table>
                        {{ knp_pagination_render(slides) }}
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block view_js %}
    <script>
        $('.position-popover').click(function () {
            $('.popover').each(function () {
                var $this = $(this);
                $this.popover('hide');
            });

            $('.position-popover').popover({
                html: true,
                content: '',
                trigger: 'manual'
            });

            $(this).popover('show');
        });

        $('html').on('click', function (e) {
            if ($(e.target).data('toggle') !== 'popover'
                && $(e.target).parents('.popover.in').length === 0) {
                $('[data-toggle="popover"]').popover('hide');
            }
        });

        $('.position-popover').on('inserted.bs.popover', function () {
            form = '<form action="{{ path("admin_slider_position") }}" class="form-inline">' +
                '<div class="form-group">' +
                '<input type="number" name="position_number" class="form-control input-md">' +
                '<input type="hidden" name="slider_id" value="' + $(this).data('id') + '">' +
                '<button type="submit" class="btn btn-warning">' +
                '<i class="fa fa-check" aria-hidden="true"></i></button>' +
                '</div>' +
                '</form>';
            $('.popover-content').html(form);
        });
    </script>
{% endblock %}