{% if is_granted('ROLE_COMPANY') %}
    {% set extendTemplate='company/base_dashboard_company.html.twig' %}
{% elseif is_granted('ROLE_TERRITORY') %}
    {% set extendTemplate='territory/base_dashboard_territory.html.twig' %}
{% else %}
    {% set extendTemplate='talent/base_dashboard_talent.html.twig' %}
{% endif %}

{% extends extendTemplate %}

{% block dashContent %}
    <div class="row">
        <div class="col s12">
            {% if medias|length == 0 and is_granted('ROLE_TALENT') %}
                <div class="col s12 center-align">
                    <br/><br/>
                    <strong class="color-grey3">Vous ne possédez pas encore de CV vidéo!</strong><br/>
                    <span class="color-grey2">Cliquez sur le bouton pour ajouter votre première vidéo.</span>
                    <br/><br/>
                    <a class="btn btn-default modal-trigger" href="#addVideo">Ajouter une
                        vidéo</a>
                </div>
            {% else %}
                {% if app.user.company.presentationVideo %}
                    {% set media = app.user.company.presentationVideo %}
                {% endif %}
                <div class="video_premier card z-depth-3">
                    <div class="card-image">
                        {% if app.user.company.presentationVideo %}
                            <div class="embed-responsive embed-responsive-16by9">
                                <iframe src="https://player.vimeo.com{{ media.getCdnUrl()|replace({ "videos": "video"}) }}"
                                        width="100%" height="550" frameborder="0" webkitallowfullscreen
                                        mozallowfullscreen allowfullscreen></iframe>
                            </div>
                        {% else %}
                            <div class="no-presentation-video">
                                <strong>
                                    Vous ne disposez pas de vidéo de présentation !
                                </strong><br/>
                                Cliquez sur le bouton ci-dessous pour la sélectionner dans votre bibliothèque.
                            </div>
                        {% endif %}
                    </div>
                    <div class="card-content">
                        <p>
                        {% if app.user.getCompany().hasCompanyVideo() != true  and is_granted('ROLE_COMPANY') %}
                            {% set storePath = path('company_process_cart_video_corporate') %}
                            {% set message = "Vous ne disposez pas de l'option présentation vidéo pour votre entreprise, il est nécessaire de vous procurer
                            l'option sur la boutique talents tube.<br /><br /><a class='btn btn-default' href='"~storePath~"'>boutique Talents Tube</a>" %}
                            {{ message|raw }}
                        {% else %}
                            {% if app.user.company.presentationVideo %}
                                <strong><span data-id="{{ media.id }}"
                                            class="titleVideo">{{ media.title }}</span></strong>
                            {% else %}
                                {% set label_title_video = "" %}
                                {% if is_granted('ROLE_COMPANY') %}
                                    {% set label_title_video = "Mon entreprise en vidéo" %}
                                {% elseif is_granted('ROLE_TALENT') %}
                                    {% set label_title_video = "Mon CV Générique" %}
                                {% endif %}
                                <strong>{{ label_title_video }}</strong>
                            {% endif %}
                            <a class="btn btn-cancel-premier red tooltipped btn-round right" href="#!"
                            data-position="top" data-tooltip="Annuler"><i class="fa fa-ban"
                                                                            aria-hidden="true"></i></a>
                            <a class="btn btn-default btn-video-premier right btn-orange">
                                {% if app.user.company.presentationVideo %}
                                    Modifier ma vidéo de présentation
                                {% else %}
                                    Ajouter une vidéo de présentation
                                {% endif %}
                            </a>
                            <div class="clearfix"></div>
                        {% endif %}
                        </p>
                    </div>
                </div>
            {% endif %}
        </div>
    </div>
    <div class="row">
        {% if medias|length > 0 or is_granted('ROLE_COMPANY') or is_granted('ROLE_TERRITORY')%}
            <div class="col s12 col-actions">
                <a class="waves-effect waves-light btn btn-default modal-trigger" href="#addVideo">Ajouter une vidéo</a>
                <a class="btn btn-delete-video btn-round tooltipped red right" href="#!" data-position="top"
                   data-tooltip="Supprimer des vidéos"><i class="fa fa-trash" aria-hidden="true"></i></a>
            </div>
        {% endif %}
        {% for media in medias %}
            {% set classVideo = "" %}
            {% if app.user.company.presentationVideo %}
                {% set idPresentationVideo = app.user.company.presentationVideo.id %}
            {% else %}
                {% set idPresentationVideo = false %}
            {% endif %}
            {% if idPresentationVideo != media.id %}
                <div class="col s12 m6 l4 col-card">
                    <div class="card card-video-action z-depth-1">
                        <div class="card-image">
                            <div class="embed-responsive embed-responsive-16by9">
                                <iframe src="https://player.vimeo.com{{ media.getCdnUrl()|replace({ "videos": "video"}) }}"
                                        width="100%" height="230px" frameborder="0" webkitallowfullscreen
                                        mozallowfullscreen allowfullscreen></iframe>
                            </div>
                            <div class="card-fog choice-fog">
                                <div class="card-fog-container">
                                    <a data-id="{{ media.getId() }}"
                                       class="btn btn-default btn-default-video {{ classVideo }} tooltipped"
                                       data-position="top"
                                       data-tooltip="{{ 'global.video.defaultaction.label'|trans }}">
                                        Choisir cette vidéo
                                    </a>
                                </div>
                            </div>
                            {% set classFog ="" %}
                            {% set messageTooltipFog ="" %}
                            {% if media.getAds().toArray() %}
                                {% set classFog = "fogLight" %}
                                {% set messageTooltipFog ="Vidéo associée à une annonce" %}
                            {% endif %}

                            {% if media.getAnswers().toArray() %}
                                {% set classFog = "fogLight" %}
                                {% set messageTooltipFog ="Vidéo associée à une réponse" %}
                            {% endif %}
                            <div class="card-fog delete-fog {{ classFog }}">
                                <div class="card-fog-container">
                                    {% if media.getAds().toArray() or media.getAnswers().toArray() %}
                                        <div class="card-fog-message">
                                            Vous ne pouvez pas supprimer cette vidéo.<br/>
                                            <i data-position="top" data-tooltip="{{ messageTooltipFog }}"
                                               class="fa fa-question-circle tooltipped" aria-hidden="true"></i>
                                        </div>
                                    {% else %}
                                        <a class="btn btn-default halfway-fab waves-effect waves-light red delete_unattached_media tooltipped"
                                           href="{{ path("delete_unattached_media",{"id" : media.getId()}) }}"
                                           data-position="top" data-tooltip="{{ 'media.delete.video.label'|trans }}">Supprimer</a>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                        <div class="card-content">
                            <p>
                                <strong><span data-id="{{ media.id }}" class="titleVideo truncate tooltipped"
                                              data-position="top"
                                              data-tooltip="{{ media.title }}">{{ media.title }}</span></strong>
                            </p>
                        </div>
                    </div>
                </div>
            {% endif %}
        {% endfor %}
    </div>
    {% set video = null %}
    <div id="addVideo" class="modal modal-fixed-footer">
        <div class="modal-content">
            <div class="row">
                {{ form_start(form, {'attr': { 'id': 'form_media' } }) }}
                <div class="input-field  col s8">
                    {{ form_rest(form) }}
                </div>
                <div class="col s4 right-align">
                    <button id="submit" class="btn btn-default disabled" type="submit">Enregistrer</button>
                    {% set messageTooltiped = "Votre vidéo ne doit pas dépasser les 500Mo.\n
                    Les formats de vidéo acceptés sont les suivants : .mp4, .mov, .qt, .mkv, .avi, .m4v, .webm." %}
                    <i class="fa fa-question-circle tooltipped" data-position="top" data-delay="50"
                       data-tooltip="{{ messageTooltiped }}" aria-hidden="true"></i>
                </div>
                {{ form_end(form) }}
                <div class="col s12">
                    {% include 'media/dropzone.html.twig' with {'deleting': 'false'} %}
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <a href="#!" class="modal-action modal-close  btn btn-default btn-round">Fermer</a>
        </div>
    </div>
{% endblock %}
{% block javascripts %}
    {{ parent() }}
    <script type="text/javascript">
        var urlDropzone = '{{ path("upload_media_default", {"id": app.user.id }) }}';
        var urlDelete = '';
        var idObject = null;
        var typeObject = null;
        var videoExist = false;
        var mediaDefaultUrl = '{{ path("media_default") }}';
        var idUser = '{{ app.user.id }}';
        var mediaEditTitleUrl = "{{ path('media_edit_title', {'id': 'id_video'})|escape('js') }}";
    </script>
    <script src="{{ asset('/js/mediaListing.js') }}"></script>
    <script src="{{ asset('/js/dropzone.js') }}"></script>
{% endblock %}