{% 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>

    {% if dispositivos %}
        <section class="section-lg bg-default text-center">
            <div class="container">
                <h4 class="heading-decorated">Dispositivos</h4>
                <div class="row row-70 offset-top-1">
                    {% for dispositivo in dispositivos %}
                        <div class="col-md-6 col-lg-4">
                            <!-- Thumb flat-->
                            <article class="thumb-flat">
                                <a href="{{ dispositivo.get_absolute_url }}">
                                    {% thumbnail dispositivo.imagen "300x300" crop="noop" format="PNG" as im %}
                                    <img class="thumb-flat__image" src="{{ im.url }}"
                                         alt="{{ dispositivo.descripcion }}" width="{{ im.width }}" height="{{ im.height }}"></a>
                                    {% endthumbnail %}
                                <div class="thumb-flat__body">
                                    <p class="heading-6">
                                        <a href="{{ dispositivo.get_absolute_url }}">{{ dispositivo.descripcion }}</a>
                                    </p>
                                    <p class="thumb-flat__subtitle">{{ dispositivo.medida }}</p>
                                </div>
                            </article>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </section>
    {% elif dispositivo %}
        <section class="section-lg bg-default text-center">
            <div class="container">
                <h4 class="heading-decorated">{{ dispositivo.descripcion }}</h4>
                <div class="row row-70 offset-top-1">
                    <div class="col-md-12 col-lg-12">
                        <!-- Thumb flat-->
                        <article class="thumb-flat">
                            <a href="{{ dispositivo.get_absolute_url }}">
                                {% thumbnail dispositivo.imagen "300x300" crop="noop" format="PNG" as im %}
                                    <img class="thumb-flat__image" src="{{ im.url }}"
                                     alt="{{ dispositivo.descripcion }}" width="{{ im.width }}" height="{{ im.height }}"></a>
                                {% endthumbnail %}
                            <div class="thumb-flat__body">
                                <p class="thumb-flat__subtitle">{{ dispositivo.medida }}</p>
                            </div>
                        </article>
                    </div>
                    {% for imagendispositivo in dispositivo.imagendispositivo_set.all %}
                        <div class="col-md-4 col-lg-3">
                            <!-- Thumb flat-->
                            <article class="thumb-flat">
                                {% thumbnail imagendispositivo.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 %}