{% extends 'base_backend.html.twig' %}
{% block nombreMessage %}{{ nbrMsg }}{% endblock %}

{% block body %}

    <div class="wrapper wrapper-content animated fadeInRight ecommerce">



                <div class="ibox-content m-b-sm border-bottom">
                    <div class="p-xs">
                        <div class="pull-left m-r-md">
                            <i class="fa fa-cogs text-navy mid-icon" style="color:#024071"></i>
                        </div>
                        <h2> <strong>entête</strong> </h2>
                        <ol class="breadcrumb">
                            <li>
                                <a href="{{ path('homeback') }}">Home</a>
                            </li>
                            <li>
                                <a href="{{ path('slides') }}">Gestion des entête</a>
                            </li>
                            <li class="active">
                                <strong>entêtes</strong>
                            </li>
                        </ol>
                    </div>
                </div>



    </div>
    <div class="row">
        <div class="col-lg-12">
            <div class="wrapper wrapper-content animated fadeInUp">

                <div class="ibox">
                    <div class="ibox-title">
                        <h5>Liste des entêtes</h5>
                        <div class="ibox-tools">
                            <a href="#" class="btn btn-primary btn-sm " data-toggle="modal" data-target="#myModal">Nouvelle Slide</a>
                        </div>
                    </div>
                    <div class="ibox-content">


                        <div class="project-list">

                            <table class="table table-hover">
                                <tbody>
                                <tr>
                                    <td class="project-title">
                                        <a href="#" style="float: left">Image</a>
                                    </td>
                                    <td class="project-title">
                                        <a href="#" style="float: right">titre</a>
                                    </td>
                                    <td class="project-title">
                                        <a href="#" style="float: right">Sous-titre</a>
                                    </td>

                                    <td class="project-title">
                                        <a href="#" style="float: right">Action</a>
                                    </td>
                                </tr>
                                {% for r in references %}
                                    <tr>

                                        <td class="project-people">
                                            <a href="#"> {% if r.video %}

                                                        <video autoplay muted loop style="width: 100px;height: 100px !important">
                                                            <source src="{{ asset(imagepath ~ r.video ) }}" type="video/mp4" style="width: 100px;height: 100px">
                                                            <source src="{{ asset(imagepath ~ r.video ) }}" type="video/ogg" style="width: 100px;height: 100px">
                                                            <!-- Video Cover image by CSS -->
                                                        </video>

                                                {% else %}


                                                        <img src="{{ asset(imagepath ~ r.image ) }}" alt="slider-02" class="img-responsive" style="width: 150px;height: 100px !important"/>

                                                {% endif %}</a>
                                        </td>
                                        <td class="project-people">
                                            <a href="#">{{ r.titre }}</a>
                                        </td>
                                        <td class="project-people">
                                            <a href="#">{{ r.sousTitre }}</a>
                                        </td>
                                        <td class="project-actions" >

                                            <a href="{{ path('editreference',{'id':r.id}) }}" class="btn btn-white btn-sm"><i class="fa fa-pencil"></i> Editer </a>
                                            <a href="{{ path('referencedelete',{'id':r.id}) }}" class="btn btn-white btn-sm"><i class="fa fa-remove"></i> Supprimer </a>
                                        </td>
                                    </tr>
                                {% endfor %}

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal inmodal" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content animated fadeIn">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                        <h4 class="modal-title">Ajout Slide</h4>
                        <small class="font-bold"></small>
                    </div>
                    {{ form_start(form) }}
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label class="control-label" for="order_id">Image Slide :</label>
                                    {{ form_widget(form.image,{ 'attr': {'class': 'form-control filebtn'} }) }}
                                    {{ form_errors(form.image) }}
                                    <h4 style="display: none;color: red;width: 300px;" id="error" >Veuillez télécharger une image valide !</h4>
                                </div>
                            </div>
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label class="control-label" for="order_id">Video Slide :</label>
                                    {{ form_widget(form.video,{ 'attr': {'class': 'form-control filebtn'} }) }}
                                    {{ form_errors(form.video) }}
                                    <h4 style="display: none;color: red;width: 300px;" id="error" >Veuillez télécharger une image valide !</h4>
                                </div>
                            </div>
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label class="control-label" for="order_id">Titre 1 :</label>
                                    {{ form_widget(form.titre,{ 'attr': {'class': 'form-control'} }) }}
                                </div>
                            </div>
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label class="control-label" for="order_id">Titre 2 :</label>
                                    {{ form_widget(form.sousTitre,{ 'attr': {'class': 'form-control'} }) }}
                                </div>
                            </div>



                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Enregistrer</button>
                    </div>
                    {{ form_rest(form) }}
                    {{ form_end(form) }}
                </div>
            </div>
        </div>
    </div>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script>
        $(function()
        {
            $('.filebtn').on('change',function (event)
            {
                if(event.target.files[0].type.indexOf("image")==-1){
                    $('#error').show();
                }
                else {
                    $('#error').hide();
                }
            });

            $('.filebtn2').on('change',function (event)
            {
                if(event.target.files[0].type.indexOf("pdf")==-1){
                    $('#error2').show();
                }
                else {
                    $('#error2').hide();
                }
            });
        });

    </script>
    {#<script>#}
    {#$(document).ready(function(){#}


    {#$('.summernote').summernote("code");#}

    {#});#}
    {#</script>#}
{% endblock %}