{% 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' %}

                                <video width="50" controls style="width: 80px;height: 69px;">
                                    <source src="{{ asset('uploads/Medias/'~medias.path) }}" type="video/mp4">
                                </video>

                            {% elseif medias.type == 'TYPE_PHOTO' %}
                                <a href="{{ asset('uploads/Medias/'~medias.path) }}" target="_blank">
                                    <img src="{{ asset('uploads/Medias/'~medias.path) }}"
                                         style="height: 75px; width: 75px; object-fit: cover;"/>
                                </a>


                            {% else %}
                                <a href="{{ asset('uploads/Medias/'~medias.path) }}" target="_blank"
                                   title="Télécharger">
                                    <img src="{{ asset('uploads/Medias/doc.png') }}"
                                         style="height: 50px; width: 50px; object-fit: cover;"/>
                                </a>

                            {% endif %}

                        </td>
                        <td class="hidden-xs center">{{ medias.name }}</td>
                        <td class="hidden-xs center">
                            <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>
                        </td>
                    </tr>

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