{% extends 'base.html.twig' %}
{% block content %}
{% set subtitle = 'Déposer une recommandation pour :' %}
{% set title = userTalent.firstname ~" "~ userTalent.lastname %}
<div class="fluid-container bg-grey-3">
    <div class="container contentWrapper contentPage" id="answerPage">
        <div class="row">
            <div class="col s12">
                <div class="center-align bg-grey-3 m-t-20">
                    <strong>{{ subtitle }}</strong>
                    <h3 class="color-blue1 m-t-10">{{ title }}</h3>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col s12">
                <div class="col-content bg-arrow z-depth-2 p-20">
                    <div class="row">
                        <div class="col s12">
                            <h4 class="color-blue1 p-0"><span class="title-bubble">1</span> Enregistrez votre vidéo de recommandation</h4>
                        </div>
                        <div class="col m4 offset-m1 s12">
                            <video id="myCvVideo" class="video-js vjs-default-skin"></video>
                            <div class="video-informations-card center-align">
                                <p>Merci de cliquer sur l'icône <span class="vjs-icon-device-perm"></span> afin d'activer votre webcam.</p>
                                <p>Votre webcam activée, lancez l'enregistrement en cliquant sur le bouton rond en bas à gauche du lecteur.</p>
                                <p>Si vous n'êtes pas satisfait(e) de votre vidéo après un enregistrement, vous pouvez à tout moment recommencer l'enregistrement.</p>
                               
                            </div>
                        </div>
                        <div class="col m2 hide-on-small-only">
                            <div class="valign-wrapper" style="align-items:center;justify-content: center;height: 300px;width:100%;">
                                <div style="font-size:40px;">
                                    <i class="fa fa-arrow-right center-align" aria-hidden="true"></i>
                                </div>
                            </div>
                        </div>
                        <div class="col m4 s12">
                            <video id="preview" controls="true">
                                <span class="vjs-control-text">Play Video</span>
                            </video>
                            <div class="btnContainer center-align" style="display:none;">
                                <a id="saveRecord" href="#!" class="saveVideo btn btn-default">
                                    <i class="fa fa-floppy-o" aria-hidden="true"></i>&nbsp; Télécharger ma Vidéo de recommandation
                                </a>
                                <div class="video-informations-card">
                                    <p>Une fois téléchargé vous pouvez glisser-déposer votre vidéo dans la zone prévue pour lancer le téléchargement.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-content bg-arrow z-depth-2 p-20">
                    <div class="row">
                        <div class="col s12">
                            <h4 class="color-blue1 p-0"><span class="title-bubble">2</span>  Importez votre Vidéo de recommandation</h4>
                        </div>
                        <div class="col s10 offset-s1 answer-dropzone">
                        {% include 'media/dropzone.html.twig' with {'deleting': true }  %}
                        </div>
                    </div>
                </div>
                {{ form_start(form, {'attr': { 'id': 'form_media' } }) }}
                <div class="col-content z-depth-2 p-20">
                    <div class="row">
                        <div class="col s12">
                            <h4 class="color-blue1 p-0"><span class="title-bubble">3</span>  Choix de relation</h4>
                        </div>
                        <div class="col s10 offset-s1 answer-dropzone">
                        {{ form_row(form.relationType) }}
                        </div>
                    </div>
                </div>
                <div class="row m-t-40">
                    <div class="col s10 offset-s1 center-align">
                        <button id="submit" class=" btn btn-large btn-default disabled"  type="submit">
                        Envoyer ma recommandation
                        </button><br /><br />
                        <a class="color-grey5" href="{{ routeReturn }}">Annuler</a>
                    </div>
                </div>
                {{ form_end(form) }}
            </div>
        </div>
    </div>
</div>
{% endblock %}
{% block javascripts %}
    {{ parent() }}
    <script type="text/javascript">
        var urlDropzone = '{{ path("upload_media_recommendation", {"id": recommendation.getId()}) }}';
        var urlDelete = '{{ path("delete_media_recommendation", {"id": recommendation.getId() }) }}'
        var idObject = '{{ recommendation.getId() }}';
        var typeObject = "recommendation";
        {% if video %}
            if($("#form_media").length){
                $("#submit").removeClass('disabled');
                $("#submit").addClass('pulse');
            }
            var videoExist =  true;
            var videoOriginal = "{{video.getOriginalUrl()}}";
            var mockFile = { name: '{{video.getTitle()}}', size: '181818181', type: 'mp4', serverID: 0, accepted: true };
        {% else %}
            var videoExist =  false;
        {% endif %}
    </script>
    <script src="{{ asset('/js/dropzone.js') }}"></script>
    <script src="{{ asset('/js/vendors/video.min.js') }}"></script>
    <script src="{{ asset('/js/vendors/RecordRTC.js') }}"></script>
    <script src="{{ asset('/js/vendors/videojs.record.js') }}"></script>
    <script src="{{ asset('/js/vendors/jquery.browser.min.js') }}"></script>
    <script src="{{ asset('/js/answer.js') }}"></script>
{% endblock %}