{% 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.useful_link.index.title'|trans }}
                        </h4>

                        <div class="col-md-3">
                            <a class="btn btn-success btn-quirk btn-sm pull-right mr10"
                               href="{{ path('admin_useful_link_create') }}">
                                {{ 'admin.useful_link.index.create'|trans }}
                            </a>
                        </div>
                    </div>
                </div>
                <div class="panel-body">
                    {% if usefulLinks is not empty %}
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                <tr>
                                    <th>{{ 'form.useful_link.label.title'|trans }}</th>
                                    <th>{{ 'form.useful_link.label.status'|trans }}</th>
                                    <th>{{ 'form.download.label.position'|trans }}</th>
                                    <th>{{ 'common.action.title'|trans }}</th>
                                </tr>
                                </thead>
                                {% for usefulLink in usefulLinks %}
                                    <tr>
                                        <td>
                                            <a href="{{ path('admin_useful_link_edit',{'id': usefulLink.id}) }}">
                                                {{ usefulLink.title }}
                                            </a>
                                        </td>
                                        <td>{{ ('common.status.' ~ usefulLink.status)|trans }}</td>
                                        <td>
                                            {% if loop.first == false and usefulLink.position > 1 %}
                                                <a href="{{ path('admin_useful_link_up', {'id': usefulLink.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="{{ usefulLink.id }}" data-placement="right"
                                                    data-toggle="popover" data-trigger="focus"
                                                    class="position-popover"
                                                    title="{{ 'common.form.popover.uselink_title'|trans }}">
                                                {{ usefulLink.position }}
                                            </button>
                                            {% if loop.last == false and usefulLink.position >= 1 %}
                                                <a href="{{ path('admin_useful_link_down', {'id': usefulLink.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 usefulLink.status == 'enabled' %}
                                                <a title="{{ 'common.button.disabled'|trans }}"
                                                   class="btn btn-danger btn-sm btn-quirk"
                                                   href="{{ path('admin_useful_link_change_status', {'id': usefulLink.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_useful_link_change_status', {'id': usefulLink.id}) }}">
                                                    <i class="fa fa-eye" aria-hidden="true"></i>
                                                </a>
                                            {% endif %}
                                            <a class="btn btn-primary btn-sm btn-quirk"
                                               href="{{ path('admin_useful_link_edit',{'id': usefulLink.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_useful_link_delete',{'id': usefulLink.id}) }}">
                                                <i class="fa fa-trash" aria-hidden="true"></i></a>
                                        </td>
                                    </tr>
                                {% endfor %}
                            </table>
                            {{ knp_pagination_render(usefulLinks) }}
                        </div>
                    {% else %}
                        <p class="text-center alert alert-warning">{{ 'admin.useful_link.index.empty_message'|trans }}</p>
                    {% endif %}
                </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_useful_link_position") }}" class="form-inline">' +
                '<div class="form-group">' +
                '<input type="number" name="position_number" class="form-control input-md">' +
                '<input type="hidden" name="useful_link_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 %}