{% extends 'layouts/base.twig' %}

{% block content %}

    <section class="contacto">
        <div class="container my-5">
            <!-- mapa & contacts -->
            <div class="row">
                <!-- Column map -->
                <div class="col-md-6 mb-4 mb-md-0">
                    {% set url_mapa = contacto_info.url_mapa %}
                    {% if url_mapa %}
                        {% set coordenadas = url_mapa|split('/')|slice(-2) %}
                        {% set latitud = coordenadas[0] %}
                        {% set longitud = coordenadas[1] %}

                        <div class="ratio ratio-4x3">
                            <iframe width="425" 
                                    height="350" 
                                    src="https://www.openstreetmap.org/export/embed.html?bbox={{ longitud }}%2C{{ latitud }}%2C{{ longitud }}%2C{{ latitud }}&amp;layer=mapnik&amp;marker={{ latitud }}%2C{{ longitud }}" 
                                    style="border: 1px solid black">
                            </iframe>
                        </div>

                        <small>
                            <a href="https://www.openstreetmap.org/?#map=19/{{ latitud }}/{{ longitud }}">
                                {{ __('Ver el mapa más grande', 'Sindikatua') }}

                            </a>
                        </small>
                    {% endif %}
                </div>

                <!-- Column content -->
                <div class="col-md-6">
                    <div class="content">
                        <h1>{{ contacto_info.nombre }}</h1>
                        <p>{{ contacto_info.direccion }}</p>
                        <p>{{ contacto_info.forma_contacto }}</p>
                   
                        <div class="btn-group m-1" role="group" aria-label="First group">
                            {% if contacto_info.url_facebook %}
                                <a href="{{ contacto_info.url_facebook }}" class="btn btn-outline-dark btn-sm pt-0" target="_blank" rel="noopener noreferrer">
                                    <i class="bi bi-facebook"></i></a>
                            {% endif %}
                            {% if contacto_info.url_twitter %}
                                <a href="{{ contacto_info.url_twitter }}" class="btn btn-outline-dark btn-sm pt-0" target="_blank" rel="noopener noreferrer">
                                    <i class="bi bi-twitter-x"></i></a>
                            {% endif %}
                            {% if contacto_info.url_web %}
                                <a href="{{ contacto_info.url_web }}" class="btn btn-outline-dark btn-sm pt-0" target="_blank" rel="noopener noreferrer">
                                    <i class="bi bi-globe"></i></a>
                            {% endif %}
                        </div>

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

            <!-- form -->
            <div class="row mt-5">
                <div class="col-12">
                    <h2 class="mb-4 position-relative fs-4 fw-bold sp-module-title">{{ __('Contacto', 'Sindikatua')|upper }}</h2>

                    <div class="formulario-contacto">
                        <div class="container">
                            <div class="row justify-content-center">
                                <div class="col-md-8 col-lg-6">
                                    {{ contacto_info.form | raw }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                {{ page.content }}
            </div>

        </div>
    </section>
{% endblock %}