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

{% block title %} Medias E-learning {% endblock %}
{% block breadcrumb1 %} Medias{% endblock %}
{% block breadcrumb2 %} Liste Médias E-learning {% endblock %}

{% block content %}
    <div class="row">
        <div class="col-md-12">

            <table class="table table-striped table-bordered table-hover table-full-width" id="sample_2">
                <thead>
                <tr>
                    <th class="hidden-xs center" width="20%"><strong>Médias </strong></th>
                    <th class="hidden-xs center" width="70%"><strong>Nom</strong></th>
                    <th class="hidden-xs center" width="10%"><strong>Actions</strong></th>
                </tr>
                </thead>
                <tbody>
                {% for medias in medias %}
                    <tr>
                        <td class="hidden-xs center">
                            {% if medias.type == 'TYPE_VIDEO' %}

                                <div class="modal fade" id="modal{{ medias.id}}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                    <div class="modal-dialog modal-lg" role="document">

                                        <!--Content-->
                                        <div class="modal-content">
                                            <!--Body-->
                                            <div class="modal-body mb-0 p-0">
                                                <div class="embed-responsive embed-responsive-16by9 z-depth-1-half">
                                                    <video id="myVideo" controls>
                                                        <source id="mp4_src" src="{{ asset('uploads/medias/videos/'~medias.file) }}" type="video/mp4">
                                                    </video>
                                                </div>
                                            </div>
                                            <!--Footer-->
                                            <div class="modal-footer ">
                                                <h6 class="pull-left">{{ medias.name}}</h6>
                                                <button type="button" class="btn btn-danger btn-rounded btn-md ml-4" data-dismiss="modal">Fermer</button>
                                            </div>

                                        </div>
                                        <!--/.Content-->
                                    </div>
                                </div>
                                <!--Modal: Name-->

{#                                <div class=""  data-toggle="modal" data-target="#modal{{ medias.id}}" style="cursor: pointer">#}
{#                                <iframe class="vedio" width="50" height="50"#}
{#                                        src="{{ asset('uploads/medias/videos/'~medias.file) }}"#}
{#                                        frameborder="0"#}
{#                                        allow="accelerometer; encrypted-media; gyroscope; picture-in-picture"#}
{#                                        allowfullscreen></iframe>#}
{#                            </div>#}


                                <a>
                                    <img class="img-fluid z-depth-1 gallerie-picture "  style="width: 40px;"  src="{{ asset('uploads/medias/videos/video.png') }}" alt="video" title="{{ medias.name }}"
                                    data-toggle="modal" data-target="#modal{{ medias.id}}">
                                </a>

                            {% elseif medias.type == 'TYPE_PHOTO' %}

                                <div class="modal fade" id="modal{{medias.id}}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                    <div class="modal-dialog modal-lg" role="document">

                                        <!--Content-->
                                        <div class="modal-content">
                                            <!--Body-->
                                            <div class="modal-body mb-0 p-0">

                                                <div class="embed-responsive embed-responsive-16by9 z-depth-1-half">
                                                    <img class="embed-responsive-item" src="{{ asset('uploads/medias/images/'~medias.file) }}"/>
                                                </div>
                                            </div>
                                            <!--Footer-->
                                            <div class="modal-footer ">
                                                <h6 class="pull-left">{{medias.name}}</h6>
                                                <button type="button" class="btn btn-danger btn-rounded btn-md ml-4" data-dismiss="modal">Fermer</button>
                                            </div>
                                        </div>
                                        <!--/.Content-->
                                    </div>
                                </div>
                                <!--Modal: Name-->

                                <a>
                                    <img class="img-fluid z-depth-1 gallerie-picture "  style="width: 40px;"   src="{{ asset('uploads/medias/images/'~medias.file) }}"
                                         alt="image"  title="{{medias.name }}"
                                    data-toggle="modal" data-target="#modal{{medias.id}}">
                                </a>


                            {% else %}
                                <div class="modal fade" id="modal{{ medias.id}}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                    <div class="modal-dialog modal-lg" role="document">

                                        <!--Content-->
                                        <div class="modal-content">
                                            <!--Body-->
                                            <div class="modal-body mb-0 p-0">
                                                <div class="embed-responsive embed-responsive-16by9 z-depth-1-half">
                                                    <iframe class="embed-responsive-item" src="{{ asset('uploads/medias/files/'~ medias.file) }}"
                                                    ></iframe>
                                                </div>
                                            </div>
                                            <!--Footer-->
                                            <div class="modal-footer ">
                                                <h6 class="pull-left">{{ medias.name}}</h6>
                                                <button type="button" class="btn btn-danger btn-rounded btn-md ml-4" data-dismiss="modal">Fermer</button>
                                            </div>
                                        </div>
                                        <!--/.Content-->
                                    </div>
                                </div>
                                <!--Modal: Name-->

                                <a>
                                    <img class="img-fluid z-depth-1 gallerie-picture "  style="width: 40px;"   src="{{ asset('uploads/medias/files/doc.png') }}" alt="image"  title="{{ medias.name }}"
                                     data-toggle="modal" data-target="#modal{{ medias.id}}">
                                </a>

                            {% endif %}

                        </td>
                        <td class="hidden-xs center">{{ medias.name }}</td>
                        <td class="hidden-xs center">
                            {% if  is_granted('ROLE_ADMIN_COUNTRY')%}
                                <a class="btn btn-success btn-xs" title="Modifier"
                                   href="{{ path('edit_medias', {'id' : medias.id}) }}">
                                    <span class="fa fa-edit" style="color:white"></span></a>
                                <a href="{{ path('delete_medias', {'id' : medias.id}) }}"
                                   class="btn btn-danger btn-xs user-remove" title="supprimer"
                                   data-toggle="confirmation" class="delete-row">
                                    <span class="fa fa-trash-o" style="color:white"></span></a>
                            {% elseif is_granted('ROLE_MANAGER') %}
                                <a class="btn btn-success btn-xs" title="Modifier"
                                   href="{{ path('edit_medias_manager', {'id' : medias.id}) }}">
                                    <span class="fa fa-edit" style="color:white"></span></a>
                                <a href="{{ path('delete_medias_manager', {'id' : medias.id}) }}"
                                   class="btn btn-danger btn-xs user-remove" title="supprimer"
                                   data-toggle="confirmation" class="delete-row">
                                    <span class="fa fa-trash-o" style="color:white"></span></a>

                            {% endif %}
                        </td>
                    </tr>

                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>

        // global variable for the player
        var vid = $('.vedio');
        $(window).load(function() {
            vid.stopVideo();
            window.loaded = true;
            vid.onpause;
        });

    </script>
{% endblock %}