{% extends 'base.html.twig' %}
{% block title %}{% trans from 'meta' %}find-us.title{% endtrans %}{% endblock %}
{% block meta %}
    <meta name="robots" content="index,follow">
    <meta name="description" lang="{{ app.request.locale }}"
          content="{% trans from 'meta' %}find-us.description{% endtrans %}">
    <meta property="og:site_name" content="{% trans from 'meta' %}find-us.title{% endtrans %}">
    <meta property="og:title" content="{% trans from 'meta' %}find-us.title{% endtrans %}">
    <meta property="og:type" content="website">
    <meta property="og:url" content="{{ app.request.uri }}">
    <meta property="og:image" content="{{ absolute_url('bundles/cpcreationtheme1/images/logo.jpg') }}">
    <meta property="og:locale" content="{{ app.request.locale }}">
    <meta property="og:image:type" content="image/jpeg">
    <meta property="og:image:width" content="600">
    <meta property="og:image:height" content="450">
    <meta property="og:description"
          content="{% trans from 'meta' %}find-us.description{% endtrans %}">
    <link rel="canonical" href="{{  absolute_url(path('find-us')) }}" />
{% endblock meta %}
{% block submenu %}
    <ul class="sub-menu">
        {% if salons %}
            <li><a href="#salons">{% trans %}find.events {% endtrans %}</a></li>
        {% endif %}
        {% for category in categories %}
            <li><a href="#{{ category.slug }}">{{ category.name }}</a></li>
        {% endfor %}
    </ul>
{% endblock %}
{% block header_bottom %}
    <div class="grid-container title">
        <h1>{{ 'find-us'|trans([],'menu') }}</h1>
    </div>
{% endblock %}
{% block content %}
    <section class="depot">
        {% if salons %}
            <article id="salons" >
                <div class="grid-container">
                    <div class="grid-x grid-margin-y depot-container align-middle">
                        <div class="large-6 large-order-2">
                            <div class="depotMap-container">
                                <div class="depotMap"></div>
                                <div class="arrow-white"></div>
                            </div>
                        </div>
                        <div class="large-6 large-order-1">
                            <div class="grid-x">
                                <h2 class="text-center">{% trans %}find.events {% endtrans %}</h2>
                                {% for salon in salons %}
                                    <div itemscope itemtype="http://schema.org/Event" class="cell depot"
                                         data-lat="{{ salon.lat }}"
                                         data-lng="{{ salon.lng }}"
                                         data-name="{{ salon.city }} ({{ salon.country }}){% if salon.address %} - {{ salon.address }} {% endif %}
                                         <br/> <strong>{% if salon.name %} {{ salon.name }} {% endif %} {% if salon.description %}- {{ salon.description }} {% endif %}
                                        </strong><br/>{% if salon.beginAt|date('d-m-Y') == salon.endAt|date('d-m-Y') %}
                                            {{ salon.beginAt|localizeddate('none', 'none', null, null, 'EEEE d MMMM YYYY')|capitalize }}
                                            de {{ salon.beginAt | date('H:i') }} à {{ salon.endAt | date('H:i') }} ">
                                        {% else %}
                                            {{ salon.beginAt|localizeddate('none', 'none', null, null, 'EEEE d MMMM')|capitalize }}
                                            au {{ salon.endAt|localizeddate('none', 'none', null, null, 'EEEE d MMMM YYYY') }} ">
                                        {% endif %}
                                        <div class="text-center">
                                            {% if salon.beginAt|date('d-m-Y') == salon.endAt|date('d-m-Y') %}
                                                {{ salon.beginAt|localizeddate('none', 'none', null, null, 'EEEE d MMMM YYYY')|capitalize }}
                                                de {{ salon.beginAt | date('H:i') }} à {{ salon.endAt | date('H:i') }}
                                            {% else %}
                                                {{ salon.beginAt|localizeddate('none', 'none', null, null, 'EEEE d MMMM')|capitalize }}
                                                au {{ salon.endAt|localizeddate('none', 'none', null, null, 'EEEE d MMMM YYYY') }}
                                            {% endif %}
                                        </div>
                                        <div class="text-center">
                                            <strong>{{ salon.postal }}</strong> {{ salon.city }}
                                            ({{ salon.country }}){% if salon.address %} - {{ salon.address }} {% endif %}{% if salon.description %} - {{ salon.description }}{% endif %}
                                        </div>
                                        {% if salon.file is not null %}
                                            <div class="text-center">
                                                <i class="fas fa-file-pdf"></i> <a
                                                        href="{{ asset(salon.file.path) | file_path }}"
                                                        target="_blank">{{ salon.fileTitle }}</a>
                                            </div>
                                        {% endif %}
                                        {% if salon.url is not null %}
                                            <div class="text-center">
                                                <i class="fas fa-link"></i> <a href="{{ salon.url }}"
                                                                               target="_blank">{% if salon.urlTitle is not null %}{{ salon.urlTitle }}{% else %}{{ salon.url }}{% endif %}</a>
                                            </div>
                                        {% endif %}

                                        {% if (salon.images | length) > 0 %}
                                            <meta itemprop="image"
                                                  content="{{ asset(salon.images[0].image.path) | imagine_filter('thumbnail_970_500_filter') }}"/>
                                        {% endif %}
                                        <meta itemprop="name" content="{{ salon.name }}"/>
                                        <meta itemprop="description" content="{{ salon.description|striptags }}"/>
                                        <meta itemprop="startDate" content="{{ salon.beginAt|date("c") }}"/>
                                        <meta itemprop="endDate" content="{{ salon.endAt|date("c") }}"/>
                                        <meta itemprop="url" content="{{ app.request.uri }}"/>
                                        <div itemprop="location" itemscope itemtype="http://schema.org/Place">
                                            <meta itemprop="name" content="{{ salon.name }} {{ salon.address }} {{ salon.postal }} {{ salon.city }}"/>
                                            <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
                                                <meta itemprop="addressCountry" content="{{ salon.country }}"/>
                                                <meta itemprop="addressLocality" content="{{ salon.city }}"/>
                                                <meta itemprop="streetAddress" content="{{ salon.address }}"/>
                                                <meta itemprop="postalCode" content="{{ salon.postal }}"/>
                                            </div>
                                            <div itemprop="geo" itemscope itemtype="http://schema.org/GeoCoordinates">
                                                <meta itemprop="latitude" content="{{ salon.lat }}"/>
                                                <meta itemprop="longitude" content="{{ salon.lng }}"/>
                                            </div>
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
            </article>
        {% endif %}
        {% for category in categories %}
            <article id="{{ category.slug }}">
                <div class="grid-container">
                    <div class="grid-x grid-margin-y depot-container align-middle">
                        <div class="large-6 {% if loop.index is odd %}large-order-1{% else %}large-order-2{% endif %}">
                            <div class="depotMap-container">
                                <div class="depotMap"></div>
                                <div class="arrow-white"></div>
                            </div>
                        </div>
                        <div class="large-6 {% if loop.index is odd %}large-order-2{% else %}large-order-1{% endif %}">
                            <div class="grid-x">
                                <h2 class="text-center">{{ category.name }}</h2>
                                {% for depot in category.depots %}
                                    <div class="cell depot"
                                         data-lat="{{ depot.lat }}"
                                         data-lng="{{ depot.lng }}"
                                         data-name="{% if depot.address %}{{ depot.address }}{% endif %} {{ depot.postal }} {{ depot.city }} {% if depot.name %} <br/><strong>{{ depot.name }}{% if depot.description %} - {{ depot.description }}{% endif %}</strong{% endif %}">
                                        <div class="text-center">
                                            <strong>{{ depot.postal }}</strong> {{ depot.city }} ({{ depot.country }}){% if depot.address %} - {{ depot.address }} {% endif %}
                                        </div>
                                        {% if depot.name %}
                                            <div class="text-center">
                                                {{ depot.name }}
                                                - {% if depot.description %} {{ depot.description }}{% endif %}{% if depot.website %}
                                                <a href="{{ depot.website }}"
                                                   target="_blank"><i class="fas fa-link"></i></a>{% endif %}
                                            </div>
                                        {% endif %}
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
            </article>
        {% endfor %}
    </section>
{% endblock %}
