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

{% block title %}Medias{% endblock %}

{% block customNavigation %}
        {% include "base/nav-teacher.html.twig" %}
{% endblock %}

{% block body %}

    <div class="row col-12">
    
        <div class="col-6 well" style="padding:3%">
            <h2>Informations</h2>
            <hr />
            {{ form(media_form) }}
        </div>

        <div class="col-6" style="padding:5%" align="center">

            {% if medias.type != null %}

                {% if medias.type.id == 10 %}

                    {% if medias.image != "" %}
                        <img src="{{ medias.image }}" alt="Mon image" width="100%" height="auto"/>
                    {% endif %}

                    <div class="audioPlayer" style="background-size: cover;width:auto;position:relative;" >
                        <audio controls = 'controls' style="position: absolute;margin-left: 5%;bottom: 3%;width: 90%;">
                        <source src="{{ medias.file }}" type="audio/mp3" />
                        </audio>
                    </div>
                {% elseif medias.type.id == 11 %}
                    <video id="my-video" class="video-js" controls preload="auto" width="100%" height="auto" poster="{{ medias.image }}" data-setup="{}">
                        <source src="{{ medias.file }}" type="video/mp4" />
                        <p class="vjs-no-js">
                            To view this video please enable JavaScript, and consider upgrading to a
                            web browser that
                            <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
                        </p>
                    </video>
                {% elseif medias.type.id == 12 %}
                    {% if medias.image != "" %}
                        <img src="{{ medias.image }}" alt="Mon image" width="100%" height="auto"/>
                    {% endif %}

                    <embed src="{{ medias.file }}" width="500" height="375" type="application/pdf">
                {% endif %}
            {% endif %}

        </div>

    </div>

    <div class="col-12" align="right">
        <hr />
        <a href="/teachers" class="btn btn-secondary"> Annuler les modifications</a>
    </div>



{% endblock %}