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

{% block title %}{{ 'page.listSlider.title1' | trans }}{% endblock %}
{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('css/dropzone.css') }}"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.css">
{% endblock %}

{% block body %}
    <div class="content" id="content"><!-- PAGE HEADING -->
        <div class="page-heading">
            <div class="page-heading__container">
                <div class="icon"><span class="li-expand4"></span></div>
                <h1 class="title">{{ 'page.listSlider.title2' | trans }}</h1>
            </div>
            <nav aria-label="breadcrumb" role="navigation">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="">         {% if role == 'admin' %}
                                {{ 'adminMenu.title1.admin' |trans }}
                            {% elseif role=='be' %}
                                {{ 'adminMenu.title1.be' |trans }}
                            {% elseif role == 'super' %}
                                {{ 'adminMenu.title1.super' |trans }}
                            {% else %}
                                {{ 'adminMenu.title1.adh' |trans }}
                            {% endif %}</a></li>
                    <li class="breadcrumb-item"><a href="#">{{ 'page.listSlider.title3' | trans }}</a></li>
                    <li class="breadcrumb-item active">{{ 'editUser.index.title2' | trans }}</li>
                </ol>
            </nav>
        </div><!-- //END PAGE HEADING -->
        <div class="container-fluid">
            <div class="card loaded" id="dt-ext-class">
                <div class="card-body">
                    <p class="subtitle margin-top-30"></p>
                    {% if sliders|length > 0 %}
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="page-heading__container float-right">
                                    <a data-target="#add_sliders" data-toggle="modal" href=""
                                       class="btn btn-primary btn--icon btn--icon-stacked btn--anon">
                                        <span class="fa fa-check"></span> {{ 'page.listSlider.title4' | trans }}
                                    </a>
                                </div>
                            </div>
                        </div>
                        <p class="subtitle margin-bottom-20"></p>
                    {% endif %}
                    <div class="form-row gallery">
                        {% if sliders|length == 0 %}
                            <p class="subtitle margin-bottom-20"></p>
                            <div class="col align-self-center">
                                <a data-target="#add_sliders" data-toggle="modal" href=""
                                   class=" btn--icon">
                                    <span class="no-slider"> {{ 'page.listSlider.title5' | trans }}</span>
                                </a>
                            </div>
                            <p class="subtitle margin-bottom-20"></p>
                        {% else %}
                            {% for s in sliders|reverse %}
                                <div class="col-12 col-md-6 col-lg-3 gallery-item ">
                                    <div class="card margin-bottom-10 {% if s.isEnabled == true %}isEnabled{% endif %}">
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col-8">
                                                    <div class="outil_picture">
                                                        <span class="text-primary edit_picture" data-id="{{ s.token }}" data-target="#edit_sliders" data-toggle="modal"><span class="fa fa-pencil"></span></span>
                                                        <span class="text-success affect_picture" data-id="{{ s.token }}"><span class="fa fa-home"></span></span>
                                                    </div>
                                                    <span class="text-dark margin-bottom-0">{{ s.description|raw }}</span>
                                                </div>
                                                <div class="col-4 text-right">
                                                    {#<small class="text-muted">{{ s.dateInsert|leftDate(s.dateInsert) }}</small>#}
                                                    <small class="text-danger remove_picture" data-id="{{ s.token }}">
                                                        <span class="fa fa-close"></span>
                                                    </small>
                                                </div>
                                            </div>
                                        </div>
                                        <a href="{{ asset('uploads/sliders/'~s.path) }}" class="link-wrapper"
                                           data-lightbox="image-1" rel="lightbox[NomDeMaGalerie]" title="my caption">
                                            <img class="card-img-bottom imgSlider" src="{{ asset('uploads/sliders/'~s.path) }}"
                                                 alt="Card image cap" data-description="{{ s.description }}">
                                        </a>
                                    </div>
                                </div>
                            {% endfor %}
                        {% endif %}
                        <!-- add slider model-->
                        {% include "@BackBundle/Sliders/new.html.twig" %}
                        <!-- end add slider model -->

                        <!-- update slider model-->
                        {% include "@BackBundle/Sliders/edit.html.twig" %}
                        <!-- end update slider model -->
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block javascripts %}
    {{ parent() }}
    {% block javascriptPage %}
        <!-- THIS PAGE SCRIPTS ONLY -->
        <script type="text/javascript" src="{{ asset('js/vendors/ckeditor/ckeditor.js') }}"></script>
        <script type="text/javascript" src="{{ asset('js/vendors/imagesloaded/imagesloaded.pkgd.min.js') }}"></script>
        <script type="text/javascript" src="{{ asset('js/vendors/isotope/isotope.pkgd.min.js') }}"></script>
        <script type="text/javascript" src="{{ asset('js/vendors/lightbox/lightbox.js') }}"></script>
        <script type="text/javascript" src="{{ asset('js/vendors/dropzone/dropzone.js') }}"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.js"></script>
        <!-- //END THIS PAGE SCRIPTS ONLY -->
    {% endblock %}
    {% include "@BackBundle/Sliders/bibliotheque/assets.html.twig" %}
{% endblock %}