{% extends 'base.html.twig' %}
{% block content %}
{% if typeObject == 'Ad' %}
    {% set subtitle = 'Candidature à l\'offre d\'emploi:' %}
    {% set title = object.title %}
    {% set route  = "answer_create_ad_step2" %}
{% elseif typeObject == 'Company' %}
    {% set subtitle = 'Candidature pour l\'entreprise :' %}
    {% set title = object.brandName %}
    {% set route  = "answer_create_company_step2" %}
{% endif %}
<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> Selectionnez votre CV vidéo</h4>
                        </div>
                        <div class="col s12">
                            <div class="row">
                                <div class="col s10 offset-s1">
                                    <div class="p-30">
                                    {% for vid in videos %}
                                        {% set img = "" %}
                                        {% if vid.thumbnails.0 is defined %}
                                            {% set img = vid.thumbnails.0.sizes.4.link %}
                                        {% endif %}
                                        <div class="col s4">
                                            <div class="card">
                                                <div class="card-image">
                                                    <div class="embed-responsive embed-responsive-16by9">
                                                        <iframe src="https://player.vimeo.com{{ vid.getCdnUrl()|replace({ "videos": "video"}) }}" width="100%" height="auto" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
                                                    </div>
                                                </div>
                                                <div style="cursor:pointer;" class="card-action" data-url="https://player.vimeo.com{{ vid.getCdnUrl()|replace({ "videos": "video"}) }}" data-img="{{ img }}" data-position="top" data-tooltip="Choisir cette vidéo" href="#"  data-title="{{ vid.getTitle() }}" data-id="{{ vid.getId() }}">
                                                    <a class="addExistingVideo" >
                                                    <span>{{ vid.getTitle() }}</span>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    {% endfor %}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {{ form_start(form, {'attr': { 'id': 'form_media' } }) }}
                <div class="col-content z-depth-2 p-20 m-t-40">
                    {{ form_row(form.status) }}
                    <div class="row">
                        <div class="col s12">
                            <h4 class="color-blue1 p-0"><span class="title-bubble">2</span>  Ajoutez votre commentaire</h4>
                        </div>
                        <div class="col s10 offset-s1">
                            <div class="row">
                                <div class="input-field col s12">
                                    {{ form_errors(form.comment) }}
                                    {{ form_widget(form.comment) }}
                                    {{ form_label(form.comment) }}
                                </div>
                            </div>
                        </div>
                        {{ form_rest(form) }}
                    </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 candidature
                        </button><br /><br />
                        <a class="color-grey5" href="{{ path(routeObject,{'alias': object.alias }) }}">Annuler</a>
                    </div>
                </div>
                {{ form_end(form) }}
            </div>
        </div>
        {% include 'answer/answer_tuto.twig' %}
    </div>
</div>
{% endblock %}
{% block javascripts %}
    {{ parent() }}
    <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>
    <script type="text/javascript">
        $(".card-action").click(function(){
            var idVideo = $(this).data("id");
            var titleVideo = $(this).data("title");
            var imgVideo = $(this).data("img");
            var urlVideo = $(this).data("url");
            var elem = $(this);
            $.ajax({
                type: 'POST',
                url: '{{ path("link_media_answer", {"id": answer.getId()}) }}',
                data: "idVideo="+idVideo,
                dataType: 'html',
                success: function (response) {
                    $(".card-action").removeClass('active');
                    elem.addClass('active');
                    Materialize.toast('Vidéo bien associé', 4000);
                    if($("#submit").hasClass('disabled')){
                        $("#submit").removeClass('disabled');
                        $("#submit").addClass('pulse');
                    }
                },
                error: function (response, xhr, ajaxOptions, thrownError) {
                    Materialize.toast('Erreur lors de l\'association de la vidéo!', 4000);
                }
            });
        });
    </script>
{% endblock %}