{% extends 'Default/base.html.twig' %}
{% block title %}{{ 'ElearningSession.T20' | trans }} {% endblock %}
{% block breadcrumb1 %} {{ 'ElearningSession.T21' | trans }} {% endblock %}
{% block breadcrumb2 %} {{ 'ElearningSession.T22' | trans }} {% endblock %}
    {% block stylesheet %}
        {{ parent() }}
        <link rel="stylesheet" href="{{ asset('assets/total-task/css/session/elearning-session.css') }}"/>
    {% endblock %}
{% block content %}
    <div class="row">
        <div class="col-md-12 swMain">
            <div class="row">
                <div class="col-md-12">
                    {{ form_start(form, {'method': 'post', 'attr' : {'id' : ''}}) }}
                    <fieldset>
                        <legend>
                            {{ 'ElearningSession.T23' | trans }}
                        </legend>
                        <div class="form-group">
                            <label class="control-label">
                                {{ 'ElearningSession.T24' | trans }} <span class="symbol required"></span>
                            </label>
                            {{ form_widget(form.name, { 'attr': {'class': 'form-control', 'required' : 'true', 'placeholder' : 'ElearningSession.T25' | trans }}) }}
                        </div>
                        <div class="form-group">
                            <label class="control-label">
                                {{ 'ElearningSession.T26' | trans }} <span class="symbol required"></span>
                            </label>
                            {{ form_widget(form.category,{'attr': {'class': 'js-example-basic-single js-states form-control'}}) }}
                        </div>
                        <div class="form-group">
                            <label class="control-label">
                                {{ 'ElearningSession.T27' | trans }} <span class="symbol required"></span>
                            </label>
                            {{ form_widget(form.formation,{'attr': {'class': 'js-example-basic-single js-states form-control', '' : ''}}) }}
                        </div>
                    </fieldset>
                    <fieldset>
                        <legend>{{ 'ElearningSession.T28' | trans }}</legend>
                        <div class="form-group">
                            <div class="media"
                                 data-prototype="{{ form_widget(form.elearningSessionMedias.vars.prototype)|e('html_attr') }}">
                                {% for m in form.elearningSessionMedias %}
                                    <div class="row media-item col-md-12">


                                            {% if app.request.locale == 'ar' %}
                                        <div class="col-md-10 row pull-right">
                                                <div class="col-md-2 pull-right">
                                                    <div class=" form-group">
                                                        {{ 'ElearningSession.T29' | trans }}
                                                        {{ form_widget(m.ordre,{'attr': {'class': 'form-control input-sm ' }}) }}
                                                    </div>
                                                </div>
                                                <div class="col-md-7 pull-right">
                                                    <div class=" form-group">
                                                        {{ 'ElearningSession.T30' | trans }}
                                                        {{ form_widget(m.medias,{'attr': {'class': 'js-example-basic-single js-states form-control', '' : ''}}) }}
                                                    </div>
                                                </div>
                                                <div class="col-md-3">
                                                    {% if m.vars.data.medias.type == 'TYPE_PHOTO' %}
                                                        <div class="modal fade" id="modal{{ m.vars.data.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/'~ m.vars.data.medias.file) }}"/>
                                                                        </div>
                                                                    </div>
                                                                    <!--Footer-->
                                                                    <div class="modal-footer ">
                                                                        <h6 class="pull-left">{{ m.vars.data.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-picture2 "
                                                                 style="width: 45px;"
                                                                 src="{{ asset('uploads/medias/images/'~ m.vars.data.medias.file) }}"
                                                                 alt="image" title="{{ m.vars.data.medias.name }}"
                                                                 data-toggle="modal"
                                                                 data-target="#modal{{ m.vars.data.medias.id }}">
                                                        </a>
                                                    {% elseif m.vars.data.medias.type == 'TYPE_FILE' %}
                                                        <div class="modal fade" id="modal{{ m.vars.data.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/'~ m.vars.data.medias.file) }}"
                                                                            ></iframe>
                                                                        </div>
                                                                    </div>
                                                                    <!--Footer-->
                                                                    <div class="modal-footer ">
                                                                        <h6 class="pull-left">{{ m.vars.data.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: 45px;"
                                                                 src="{{ asset('uploads/medias/files/doc.png') }}"
                                                                 alt="image" title="{{ m.vars.data.medias.name }}"
                                                                 data-toggle="modal"
                                                                 data-target="#modal{{ m.vars.data.medias.id }}">
                                                        </a>
                                                    {% else %}
                                                        <div class="modal fade" id="modal{{ m.vars.data.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/videos/'~ m.vars.data.medias.file) }}"
                                                                                    allowfullscreen></iframe>
                                                                        </div>
                                                                    </div>
                                                                    <!--Footer-->
                                                                    <div class="modal-footer ">
                                                                        <h6 class="pull-left">{{ m.vars.data.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: 45px;"
                                                                 src="{{ asset('uploads/medias/videos/video.png') }}"
                                                                 alt="video" title="{{ m.vars.data.medias.name }}"
                                                                 data-toggle="modal"
                                                                 data-target="#modal{{ m.vars.data.medias.id }}">
                                                        </a>
                                                    {% endif %}
                                                </div>
                                        </div>
                                            {% else %}
                                            <div class="col-md-10 row">

                                            <div class="col-md-2">
                                                    <div class=" form-group">
                                                        {{ 'ElearningSession.T29' | trans }}
                                                        {{ form_widget(m.ordre,{'attr': {'class': 'form-control input-sm ' }}) }}
                                                    </div>
                                                </div>
                                                <div class="col-md-7">
                                                    <div class=" form-group">
                                                        {{ 'ElearningSession.T30' | trans }}
                                                        {{ form_widget(m.medias,{'attr': {'class': 'js-example-basic-single js-states form-control', '' : ''}}) }}
                                                    </div>
                                                </div>
                                                <div class="col-md-3">
                                                    {% if m.vars.data.medias.type == 'TYPE_PHOTO' %}
                                                        <div class="modal fade" id="modal{{ m.vars.data.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/'~ m.vars.data.medias.file) }}"/>
                                                                        </div>
                                                                    </div>
                                                                    <!--Footer-->
                                                                    <div class="modal-footer ">
                                                                        <h6 class="pull-left">{{ m.vars.data.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: 45px;"
                                                                 src="{{ asset('uploads/medias/images/'~ m.vars.data.medias.file) }}"
                                                                 alt="image" title="{{ m.vars.data.medias.name }}"
                                                                 data-toggle="modal"
                                                                 data-target="#modal{{ m.vars.data.medias.id }}">
                                                        </a>
                                                    {% elseif m.vars.data.medias.type == 'TYPE_FILE' %}
                                                        <div class="modal fade" id="modal{{ m.vars.data.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/'~ m.vars.data.medias.file) }}"
                                                                            ></iframe>
                                                                        </div>
                                                                    </div>
                                                                    <!--Footer-->
                                                                    <div class="modal-footer ">
                                                                        <h6 class="pull-left">{{ m.vars.data.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: 45px;"
                                                                 src="{{ asset('uploads/medias/files/doc.png') }}"
                                                                 alt="image" title="{{ m.vars.data.medias.name }}"
                                                                 data-toggle="modal"
                                                                 data-target="#modal{{ m.vars.data.medias.id }}">
                                                        </a>
                                                    {% else %}
                                                        <div class="modal fade" id="modal{{ m.vars.data.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/videos/'~ m.vars.data.medias.file) }}"
                                                                                    allowfullscreen></iframe>
                                                                        </div>
                                                                    </div>
                                                                    <!--Footer-->
                                                                    <div class="modal-footer ">
                                                                        <h6 class="pull-left">{{ m.vars.data.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: 45px;"
                                                                 src="{{ asset('uploads/medias/videos/video.png') }}"
                                                                 alt="video" title="{{ m.vars.data.medias.name }}"
                                                                 data-toggle="modal"
                                                                 data-target="#modal{{ m.vars.data.medias.id }}">
                                                        </a>
                                                    {% endif %}
                                                </div>
                                            </div>
                                            {% endif %}
                                        <div class="col-md-2">
                                            <button type="button" class="btn btn-danger delete-btn-edit delete-btn"><i
                                                        class="fa fa-trash"></i></button>
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                        <div class="form-actions">
                            {% if app.request.locale == 'ar' %}
                                <button type="submit" class="btn btn-primary pull-left">
                                    {{ 'ElearningSession.T31' | trans }} <i class="fa fa-arrow-circle-left"></i>
                                </button>
                            {% else %}
                                <button type="submit" class="btn btn-primary pull-right">
                                    {{ 'ElearningSession.T31' | trans }} <i class="fa fa-arrow-circle-right"></i>
                                </button>
                            {% endif %}

                        </div>
                    </fieldset>
                    {{ form_end(form) }}
                </div>
            </div>
        </div>
    </div><!-- Grid row -->
{% endblock %}
{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('assets/total-task/app/session/elearning-session.js') }}"></script>
{% endblock %}