{% extends 'base.html.twig' %}

{% block title %}Découvrez toutes les offres d'emploi en vidéo sur Talents Tube{% endblock %}

{% block description %}Découvrez toutes les offres d'emploi en vidéo dans votre région sur Talents Tube. Postulez rapidement en vidéo et trouvez votre futur job !{% endblock %}

{% block ogtc %}
    {#Twitter Card data pour les données enrichies sur Twitter#}
    <meta name="twitter:card" content="summary">
    <meta name="twitter:site" content="@TalentsTube">
    <meta name="twitter:title" content="Découvrez toutes les offres d'emploi en vidéo sur Talents Tube">
    <meta name="twitter:description" content="Découvrez toutes les offres d'emploi en vidéo dans votre région sur Talents Tube. Postulez rapidement en vidéo et trouvez votre futur job !">
    <meta name="twitter:image" content="{{ absolute_url(asset('img/mail/logo-talents-tube.png')) }}">

    {#Open Graph data pour le partage sur les réseaux sociaux (ex Facebook..)#}
    <meta property="og:title" content="Découvrez toutes les offres d'emploi en vidéo sur Talents Tube" />
    <meta property="og:type" content="article" />
    <meta property="og:image" content="{{ absolute_url(asset('img/mail/logo-talents-tube.png')) }}" />
    <meta property="og:description" content="Découvrez toutes les offres d'emploi en vidéo dans votre région sur Talents Tube. Postulez rapidement en vidéo et trouvez votre futur job !" />
    <meta property="og:site_name" content="Talents Tube" />
    <meta property="og:url" content="{{ url(app.request.attributes.get('_route'), app.request.attributes.get('_route_params')) }}" />

{% endblock %}

{% block content %}
    {{ render(controller('AppBundle:Ad:adSearchRender',{'type': 'lite' })) }}

    <div class="fluid-container bg-grey-3 contentPage">
        <div id="searchResultWrapper" class="container">
            <div class="row">
                <div class="col s12 center-align">
                    <h1 class="alttitle">Les offres d’emploi en vidéo</h1>
                </div>
            </div>
            <div class="row m-b-0 p-b-30">
                <div class="col s12 m12">
                    <div id="header-resultats">
                        {% if isPromotedAds %}
                            <div><span class="color-blue2">{{ ads|length }}</span> offres d'emploi pourvues</div>
                            <div><span><a href="{{ path('ad_search_result') }}">Voir les offres d'emploi en cours</a></span></div>
                        {% else %}
                            <div><span class="color-blue2">{{ ads|length }}</span> offres d'emploi en cours</div>
                            <div><span><a href="{{ path('ad_search_result', {'promoted': true }) }}">Voir les offres d'emploi pourvues</a></span></div>
                        {% endif %}
                    </div>
                    <div id="liste-resultats">
                        {% if ads|length > 0 and noResults == false %}
                            {% include 'default/ad_listing.html.twig' with {'ads':ads} %}
                        {% else %}
                            <h2 class="center-align">Il n'y a pas de résultats directs à votre recherche</h2>
                            <h4 class="center-align">Mais vous pourriez être intéressé(e) par</h4>
                            <br/>
                            {% include 'default/ad_listing.html.twig' with {'ads':ads} %}
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDYV8IJGtIoWLfXJQQvIuDQ88n2aEuRgpg&libraries=places"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var input = /** @type {!HTMLInputElement} */(document.getElementById('ad_search_location_gmap'));
            var autocomplete = new google.maps.places.Autocomplete(input);
            autocomplete.addListener('place_changed', onPlaceChanged);

            function onPlaceChanged() {
                var place = autocomplete.getPlace();
                var gmap_address = {'gmap_address': place}
                if (place.geometry) {
                    $("#ad_search_location").val(JSON.stringify(gmap_address));
                }
            }
        });
    </script>
{% endblock %}