{% extends "website/home.html" %}

{% load static thumbnail %}

{% block page %}
    {% include "website/header.html" %}

    <section class="bg-gray-dark">
        <section class="section parallax-container" data-parallax-img="{% static 'imagenes/IMG-20151106-WA0064.jpeg' %}">
            <div class="parallax-content parallax-header">
                <div class="parallax-header__inner">
                    <div class="parallax-header__content">
                        <div class="container">
                            <div class="row justify-content-sm-center">
                                <div class="col-md-10 col-xl-8">
                                    <p>&nbsp;</p>
                                    <p>&nbsp;</p>
                                    <p>&nbsp;</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </section>

    <section class="section-md bg-gray-lighter">
        <div class="container">
            <div class="row justify-content-md-center row-30 row-md-50">
                <div class="col-md-11 col-lg-10 col-xl-6">
                    {% if localidad.titulo %}<h4 class="heading-decorated">{{ localidad.titulo }}</h4>{% endif %}
                    {% if localidad.bajada %}<p class="heading-6">{{ localidad.bajada }}</p>{% endif %}
                    {% if localidad.texto %}{{ localidad.texto|safe }}{% endif %}
                </div>
                <div class="col-md-11 col-lg-10 col-xl-6">
                    <div class="google-map" id="google-map" style="height: 400px;">
                        <img src="{{ localidad.imagen.url }}" alt="{{ localidad }}" />
                    </div>
                </div>
            </div>
        </div>
    </section>

    {% if localidad.dispositivolocalidad_set.all %}
        <section class="section-lg bg-default text-center">
            <div class="container">
                <h4 class="heading-decorated">Dispositivos disponibles en {{ localidad }}</h4>
                    <div class="row row-70 offset-top-1">
                        {% for dispositivolocalidad in localidad.dispositivolocalidad_set.all %}
                            {% if localidad.dispositivolocalidad_set.all.count > 1 %}
                            <div class="col-md-6 col-lg-4">
                            {% else %}
                            <div class="col-md-12 col-lg-12">
                            {% endif %}
                                <!-- Thumb flat-->
                                <article class="thumb-flat">
                                    <a href="{{ dispositivolocalidad.dispositivo.get_absolute_url }}">
                                        {% thumbnail dispositivolocalidad.dispositivo.imagen "300x300" crop="noop" format="PNG" as im %}
                                        <img class="thumb-flat__image" src="{{ im.url }}"
                                             alt="" width="{{ im.width }}" height="{{ im.height }}">
                                        {% endthumbnail %}
                                    </a>
                                    <div class="thumb-flat__body">
                                        <p class="heading-6">
                                            <a href="{{ dispositivolocalidad.dispositivo.get_absolute_url }}">
                                                {{ dispositivolocalidad.dispositivo.descripcion }}
                                            </a>
                                        </p>
                                        <p class="thumb-flat__subtitle">{{ dispositivolocalidad.dispositivo.medida }}</p>
                                    </div>
                                </article>
                            </div>
                        {% endfor %}
                        </div>
                    </div>
                </section>

    {% endif %}

    {% if localidad.imagenlocalidad_set.all %}
        <section class="section-lg bg-default text-center">
            <div class="container">
                <div class="row row-70 offset-top-1">
                    {% for imagenlocalidad in localidad.imagenlocalidad_set.all %}
                        <div class="col-md-4 col-lg-3">
                            <!-- Thumb flat-->
                            <article class="thumb-flat">
                                {% thumbnail imagenlocalidad.imagen "1280x768" crop="noop" format="PNG" as im %}
                                    <img class="thumb-flat__image" src="{{ im.url }}" alt=""
                                         width="{{ im.width }}" height="{{ im.height }}">
                                {% endthumbnail %}
                            </article>
                        </div>

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