{% 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;"></div>
                    <script>
                        var map;
                        var argentina = { lat: -30.000, lng: -64.000 };
                        var metropoli = { lat: -32.945806, lng: -60.638055 };
                        var image = "{% static 'images/gmap_marker.png' %}";
                        var ciudades = { {% for localidad in localidades %}{{ localidad|safe }}{% if not forloop.last %},{% endif %}{% endfor %} };

                        function initMap() {
                            map = new google.maps.Map(document.getElementById('google-map'), {
                            center: {{ center }},
                            zoom: 10,
                            styles: [{'featureType':'water','elementType':'geometry','stylers':[{'color':'#e9e9e9'},{'lightness':17}]},{'featureType':'landscape','elementType':'geometry','stylers':[{'color':'#f5f5f5'},{'lightness':20}]},{'featureType':'road.highway','elementType':'geometry.fill','stylers':[{'color':'#ffffff'},{'lightness':17}]},{'featureType':'road.highway','elementType':'geometry.stroke','stylers':[{'color':'#ffffff'},{'lightness':29},{'weight':0.2}]},{'featureType':'road.arterial','elementType':'geometry','stylers':[{'color':'#ffffff'},{'lightness':18}]},{'featureType':'road.local','elementType':'geometry','stylers':[{'color':'#ffffff'},{'lightness':16}]},{'featureType':'poi','elementType':'geometry','stylers':[{'color':'#f5f5f5'},{'lightness':21}]},{'featureType':'poi.park','elementType':'geometry','stylers':[{'color':'#dedede'},{'lightness':21}]},{'elementType':'labels.text.stroke','stylers':[{'visibility':'on'},{'color':'#ffffff'},{'lightness':16}]},{'elementType':'labels.text.fill','stylers':[{'saturation':36},{'color':'#333333'},{'lightness':40}]},{'elementType':'labels.icon','stylers':[{'visibility':'off'}]},{'featureType':'transit','elementType':'geometry','stylers':[{'color':'#f2f2f2'},{'lightness':19}]},{'featureType':'administrative','elementType':'geometry.fill','stylers':[{'color':'#fefefe'},{'lightness':20}]},{'featureType':'administrative','elementType':'geometry.stroke','stylers':[{'color':'#fefefe'},{'lightness':17},{'weight':1.2}]}]
                        });

                        // addMarker(metropoli, map, "Metrópoli Publicidad Exterior SA");

                        for (var ciudad in ciudades) {
                            var cityCircle = new google.maps.Circle({
                                strokeColor: '#f6d014',
                                strokeOpacity: 0.8,
                                strokeWeight: 2,
                                fillColor: '#f6d014',
                                fillOpacity: 0.35,
                                map: map,
                                center: ciudades[ciudad].center,
                                radius: Math.sqrt(ciudades[ciudad].population * 100)
                            });
                            addMarker(ciudades[ciudad].center);
                                // addMarker(ciudades[ciudad].center, map, ciudades[ciudad].nombre);
                            }
                        }

                        function addMarker(location, map, label) {
                            var marker = new google.maps.Marker({
                                position: location,
                                icon: image,
                                label: label,
                                map: map
                            });
                        }
                    </script>
                    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDzbd-r3x-fcb9yPIMyLymG9aWiw8xnEJ0&callback=initMap&language=es&region=AR" async defer></script>
                </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="{{ ddispositivolocalidad.ispositivo.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 %}