{% extends 'base.html.twig' %}
{% block content %}
    <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">
                        <h3 class="color-blue1 m-t-10">J'enregistre mon CV vidéo</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 cv vidéo</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 CV vidéo après un enregistrement, vous pouvez à tout moment recommencer l'enregistrement.</p>
                                    <p>
                                        <a class="view-tuto">Revoir le tutoriel</a>
                                    </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 mon CV Vidéo
                                    </a>
                                    <div class="video-informations-card">
                                        <p>Une fois téléchargé vous pouvez glisser-déposer votre CV 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 CV Vidéo</h4>
                            </div>
                            <div class="col s10 offset-s1 answer-dropzone">
                                {% include 'media/dropzone.html.twig' with {
                                    'deleting' : true
                                } %}
                            </div>
                        </div>
                    </div>
                    <div class="row m-t-40">
                        <div id="form_media" class="col s10 offset-s1 center-align">
                            <button id="submit" class=" btn btn-large btn-default disabled" type="submit">
                                Envoyer mon CV vidéo
                            </button><br/><br/>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block javascripts %}
    {{ parent() }}
    <script type="text/javascript">
        var urlDropzone = '{{ path("upload_media_default", {"id": app.user.getId()}) }}';
        var urlDelete = 'null';
        var idObject = '{{ app.user.getId() }}';
        var typeObject = "user";
        var videoExist = false;
    </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>
    <script type="text/javascript">
        {% if mustLogin == true %}
            $('#submit').on('click', function (event) {
                event.preventDefault();
                $('#modal_login').modal('open');
            });
        {% endif %}
    </script>
{% endblock %}