{% extends 'front/layout.html.twig' %}

{% block content %}

{% include 'front/components/navbar.html.twig' %}

<header id="header" class="no-index" style="background: url({{ asset('assets/files/how-to-get/cover.jpg') }}) no-repeat center center scroll;">
    <div class="header-wrapper">
        <div class="container">
            <div class="row">
                <div class="col-xs-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2">

                    {% include 'front/components/booking-form.html.twig' %}

                </div>
            </div>
        </div>
    </div>
</header>

<section id="how-to-get">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 text-center">
                <h1>{{ "how.to.get.best.location" | trans({}, 'plaza') }}</h1>
            </div>
            <div class="col-xs-12 text-center">
                <p class="subheader">
                    {{ "how.to.get.city.center" | trans({}, 'plaza') }}
                </p>
            </div>
        </div>
    </div>

    <div class="address-block">
        <h3>{{ "htg.plaza.de.la.luz" | trans({}, 'plaza') }}</h3>
        <p><a role="button" target="_blank" href="https://goo.gl/maps/RSMVcPeZ5j72">C/ Corralón de los Carros, 62. 11002. Cádiz, {{ "footer.address.spain" | trans({}, 'plaza') }}.</a></p>
        <br>
        <p><i class="fa fa-phone" aria-hidden="true"></i> <a href="tel:+34 856 170 084" class="tel" itemprop="telephone">+34 856 170 084</a></p>
        <p><i class="fa fa-envelope" aria-hidden="true"></i> <a href="mailto:cadiz@plazadelaluz.com" title="cadiz@plazadelaluz.com">cadiz@plazadelaluz.com</a></p>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <div id="map-wrapper">
                    <iframe src="https://www.google.com/maps/d/embed?mid=1PVyy3OPn1ab8ct3hQujm1iBCBoo&z=17" width="100%" height="480" frameborder="0" style="border:0"></iframe>
                </div>
            </div>
        </div>

        <div id="directions">
            <ul>
                <li class="row">
                    <div class="col-xs-12">
                        <div class="row">
                            <div class="col-xs-12 col-sm-5 col-md-4">
                                <i class="fa fa-car" aria-hidden="true"></i>
                                <span class="header">{{ "htg.by.car" | trans({}, 'plaza') }}</span>
                            </div>
                            <div class="col-xs-12 col-sm-3 col-md-2">
                                <p class="google-map">
                                    <a href="https://maps.google.es/maps/ms?msid=216218283622785788061.0004de4aab9d9e875429a&amp;msa=0&amp;ll=36.529373,-6.300498&amp;spn=0.007207,0.016512&amp;iwloc=0004de4aab9ee3fb7569c" target="_blank">
                                        <img alt="Google Maps" src="{{ asset('assets/img/icons/how-to-get/googlemaps_icon.png') }}" style="width: 30px; height: 30px; opacity: 1; visibility: visible;margin-bottom:8px;"><br>
                                        <span>Google Maps</span>
                                    </a>
                                </p>
                            </div>
                        </div>
                        <span class="subheader">{{ "htg.from.andalucia.avenue" | trans({}, 'plaza') }}</span>
                        <ol class="steps">
                            <li>{{ "htg.by.car.1" | trans({}, 'plaza') }}</li>
                            <li>{{ "htg.by.car.2" | trans({}, 'plaza') }}</li>
                            <li>{{ "htg.by.car.3" | trans({}, 'plaza') }}</li>
                            <li>{{ "htg.by.car.4" | trans({}, 'plaza') }}</li>
                            <li>{{ "htg.by.car.5" | trans({}, 'plaza') }}</li>
                        </ol>
                    </div>
                </li>

                <li class="row">
                    <div class="col-xs-12">
                        <div class="row" style="margin-bottom:20px;">
                            <div class="col-xs-12 col-sm-5 col-md-4">
                                <i class="fa fa-bus" aria-hidden="true"></i>
                                <span class="header">{{ "htg.by.bus" | trans({}, 'plaza') }}</span>
                            </div>
                        </div>
                        <span class="subheader">({{ "htg.bus.services" | trans({}, 'plaza') }})</span>
                        <ul class="steps">
                            <li>
                                <h4>{{ "htg.bus.line.1" | trans({}, 'plaza') }}:</h4>
                                {{ "htg.bus.line.1.description" | trans({}, 'plaza') }}
                            </li>
                            <li>
                                <h4>{{ "htg.bus.line.2" | trans({}, 'plaza') }}:</h4>
                                {{ "htg.bus.line.2.description" | trans({}, 'plaza') }}
                            </li>
                            <li>
                                <h4>{{ "htg.bus.line.3" | trans({}, 'plaza') }}:</h4>
                                {{ "htg.bus.line.3.description" | trans({}, 'plaza') }}
                            </li>
                            <li>
                                <h4>{{ "htg.bus.line.5" | trans({}, 'plaza') }}:</h4>
                                {{ "htg.bus.line.5.description" | trans({}, 'plaza') }}
                            </li>
                            <li>
                                <h4>{{ "htg.bus.line.7" | trans({}, 'plaza') }}:</h4>
                                {{ "htg.bus.line.7.description" | trans({}, 'plaza') }}
                            </li>
                            <li style="font-style:italic;margin-top:20px;">
                                ({{ "htg.another.bus.services" | trans({}, 'plaza') }})
                            </li>
                            <li>
                                <h4>{{ "htg.intercity.bus" | trans({}, 'plaza') }}:</h4>
                                {{ "htg.intercity.bus.description" | trans({}, 'plaza') }}
                            </li>
                        </ul>

                    </div>
                </li>

                <li class="row">
                    <div class="col-xs-12">
                        <div class="row">
                            <div class="col-xs-12 col-sm-5 col-md-4">
                                <i class="fa fa-train" aria-hidden="true"></i>
                                <span class="header">{{ "htg.by.train" | trans({}, 'plaza') }}</span>
                            </div>
                            <div class="col-xs-12 col-sm-3 col-md-2">
                                <p class="google-map">
                                    <a href="https://maps.google.es/maps/ms?msid=216218283622785788061.0004de4b92721f5c365fd&amp;msa=0&amp;ll=36.53139,-6.29655&amp;spn=0.007207,0.016512&amp;iwloc=0004de4b92743d9ae9d59" target="_blank">
                                        <img alt="Google Maps" src="{{ asset('assets/img/icons/how-to-get/googlemaps_icon.png') }}" style="width: 30px; height: 30px; opacity: 1; visibility: visible;margin-bottom:8px;"><br>
                                        <span>Google Maps</span>
                                    </a>
                                </p>
                            </div>
                        </div>
                        <span class="subheader">({{ "htg.by.train.services" | trans({}, 'plaza') }})</span>
                        <h4 style="padding:20px 0;">- {{ "htg.by.train.station.1" | trans({}, 'plaza') }}</h4>
                        <p>
                            {{ "htg.by.train.station.1.1" | trans({}, 'plaza') }}
                        </p>
                        <p>
                            {{ "htg.by.train.station.1.2" | trans({}, 'plaza') }}
                        </p>
                        <h4 style="padding:20px 0 0px;">- {{ "htg.by.train.station.2" | trans({}, 'plaza') }}</h4>
                        <ol class="steps">
                            <li>{{ "htg.by.train.station.2.1" | trans({}, 'plaza') }}</li>
                            <li>{{ "htg.by.train.station.2.2" | trans({}, 'plaza') }}</li>
                            <li>{{ "htg.by.train.station.2.3" | trans({}, 'plaza') }}</li>
                            <li>{{ "htg.by.train.station.2.4" | trans({}, 'plaza') }}</li>
                            <li>{{ "htg.by.train.station.2.5" | trans({}, 'plaza') }}</li>
                        </ol>
                    </div>
                </li>

            </ul>
        </div>
    </div>
</section>

{% endblock %}