{% extends "admin/base.html.twig" %}

{% trans_default_domain 'admin' %}

{% set pageTitle = "Support"|trans %}
{% block title %}{{ pageTitle }}{% endblock %}
{% block pageTitle %}{{ pageTitle }}{% endblock %}

{% block stylesheets %}
    {{ parent() }}
{% endblock %}

{% block javascripts %}
    {{ parent() }}
{% endblock %}

{% block body %}

    <div id="support-page" class="row">

        <div class="col-xl-8 mb-0 mb-sm-3">
            <div class="card h-100">
                <h4 class="card-title card-header"><i class="fal fa-info mr-2 float-left"></i>{{ "Coordonnées"|trans }}</h4>
                <div class="card-body pb-0">
                    <div class="row xs-center sm-center">
                        <div class="col-12 col-md-7 col-xl-6 mb-3">
                            <div class="logo-wrap mr-2 float-left">
                                <a href="https://www.felix-creation.fr" class="bold text-info-darken" target="_blank" rel="noopener">
                                    <img data-src="{{ asset('build/admin/images/theme/felix-logo.svg', 'admin') }}"
                                         src="{{ asset('build/vendor/images/lazy-point.svg', 'vendor') }}"
                                         alt="{{ "Agence Félix"|trans }}" title="{{ "Agence Félix"|trans|striptags }}"
                                         width="80" height="80"
                                         class="img-fluid lazyload" />
                                </a>
                            </div>
                            <div class="adress-wrap float-left">
                                <a href="https://www.felix-creation.fr" class="bold text-info-darken" target="_blank" rel="noopener">{{ "Agence Félix - Agence de Publicité"|trans }}</a><br>
                                {{ "4BIS Avenue du Pont de Tasset <br/> 74960 Cran-Gevrier / Annecy <br/> FRANCE"|trans|raw }}
                            </div>
                        </div>
                        <ul class="reset pl-3 col-8 col-md-5 col-xl-3 mb-3">
                            <li class="mb-1">
                                <span class="d-inline-block i-square mr-1 float-left"><i class="fas fa-phone" title="{{ "Phone"|trans }}" data-toogle="tooltip"></i></span>
                                <a href="tel:+33450671855" class="text-dark">+33 (0)4 50 67 18 55</a>
                            </li>
                            <li class="mb-1">
                                <span class="d-inline-block i-square mr-1 float-left"><i class="fas fa-fax" title="{{ "Fax"|trans }}" class="text-info-darken" data-toogle="tooltip"></i></span>
                                +33 (0)4 50 67 16 85
                            </li>
                            <li>
                                <span class="d-inline-block i-square mr-1 float-left"><i class="fas fa-at" title="{{ "Email"|trans }}" data-toogle="tooltip"></i></span>
                                <a href="mailto:support@felix-creation.fr" class="text-dark">support@felix-creation.fr</a>
                            </li>
                        </ul>
                        <div class="col-4 col-xl-3 mb-3">
                            <ul id="socials-list" class="reset text-right">
                                <li class="d-inline-block">
                                    <a href="https://www.facebook.com/agencefelix" target="_blank" class="mr-2">
                                        <img data-src="{{ asset('build/admin/images/theme/facebook.svg', 'admin') }}"
                                             src="{{ asset('build/vendor/images/lazy-point.svg', 'vendor') }}"
                                             data-toggle="tooltip"
                                             alt="{{ "Facebook"|trans }}" title="{{ "Facebook"|trans|striptags }}"
                                             width="20" height="20"
                                             class="img-fluid lazyload" />
                                    </a>
                                </li>
                                <li class="d-inline-block">
                                    <a href="https://twitter.com/agencefelix" target="_blank" class="mr-2">
                                        <img data-src="{{ asset('build/admin/images/theme/twitter.svg', 'admin') }}"
                                             src="{{ asset('build/vendor/images/lazy-point.svg', 'vendor') }}"
                                             data-toggle="tooltip"
                                             alt="{{ "Twitter"|trans }}" title="{{ "Twitter"|trans|striptags }}"
                                             width="20" height="20"
                                             class="img-fluid lazyload" />
                                    </a>
                                </li>
                                <li class="d-inline-block">
                                    <a href="https://www.youtube.com/user/felixcreation" target="_blank">
                                        <img data-src="{{ asset('build/admin/images/theme/youtube.svg', 'admin') }}"
                                             src="{{ asset('build/vendor/images/lazy-point.svg', 'vendor') }}"
                                             data-toggle="tooltip"
                                             alt="{{ "Youtube"|trans }}" title="{{ "Youtube"|trans|striptags }}"
                                             width="20" height="20"
                                             class="img-fluid lazyload" />
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="col-md-12">
                            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2775.9806858349716!2d6.09690731595985!3d45.911695979108885!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x478b853fc1e8228b%3A0x944c714ef3a6988f!2sAgence%20F%C3%A9lix!5e0!3m2!1sfr!2sfr!4v1569606199378!5m2!1sfr!2sfr"
                                    width="100%"
                                    height="350"
                                    frameborder="0"
                                    style="border:0;"
                                    allowfullscreen=""></iframe>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-4 mb-0 mb-sm-3">
            <div class="card h-100">
                <h4 class="card-title card-header"><i class="fal fa-pencil-alt mr-2 float-left"></i>{{ "Contactez-nous"|trans }}</h4>
                <div class="card-body pb-0">
                    {{ form_start(form, {'attr': {"id": "contact-form", "action": app.request.uri, "novalidate": "novalidate"}}) }}
                        <div class="row">
                            {{ form_row(form.name) }}
                            {{ form_row(form.phone) }}
                            {{ form_row(form.email) }}
                            {{ form_row(form.message) }}
                            <div class="col-12">
                                {{ form_row(form.submit) }}
                            </div>
                        </div>
                    {{ form_end(form) }}
                </div>
            </div>
        </div>

        <div class="col-12 mb-4 d-none d-sm-block">
            <a href="{{ asset('build/admin/docs/notice-cms-agence-felix.pdf') }}"
               id="download-notice"
               class="w-100 text-center d-inline-block"
               download="notice-cms-agence-felix.pdf">
                <i class="fal fa-file-pdf fa-3x mr-2 mb-3"></i>
                <br>{{ "Télécharger la notice"|trans }}
            </a>
        </div>

    </div>


{% endblock %}