{% 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-12 col-lg-12 col-xl-12">
                    <h4 class="heading-decorated">{{ articulo.titulo }}</h4>
                    <p class="heading-6">{{ articulo.bajada }}</p>
                    {{ articulo.texto|safe }}
                </div>
            </div>
        </div>
    </section>

    <section class="rd-parallax bg-gray-dark text-center">
        <div class="section-lg text-center">
            <div class="container">
                <div class="row justify-content-md-center row-50">
                    <div class="col-md-6 col-lg-4">
                        <!-- Box counter-->
                        <article class="box-counter">
                            <div class="box-counter__wrap">
                                <div class="counter animated">10</div>
                            </div>
                            <p class="box-counter__title">días</p>
                        </article>
                    </div>
                    <div class="col-md-6 col-lg-4">
                        <!-- Box counter-->
                        <article class="box-counter">
                            <div class="box-counter__wrap">
                                <div class="counter animated">+500000</div>
                            </div>
                            <p class="box-counter__title">visitantes</p>
                        </article>
                    </div>
                    <div class="col-md-6 col-lg-4">
                        <!-- Box counter-->
                        <article class="box-counter">
                            <div class="box-counter__wrap">
                            <div class="counter animated">50</div>
                            </div>
                            <p class="box-counter__title">colectividades</p>
                        </article>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="section-md bg-gray-lighter"></section>
        <section class="bg-default">
            <div class="container-fluid container-flex">
                <div class="row no-gutters" data-lightgallery="group">
                    {% for foto in fotos %}
                        <div class="col-md-6 col-lg-4 col-xl-3">
                            <!-- Thumb creative-->
                            <div class="thumb-creative thumb-creative_no-cover">
                                <div class="thumb-creative__inner">
                                    {% thumbnail foto.imagen "652x491" crop="noop" format="PNG" as im %}
                                        <div class="thumb-creative__front">
                                            <figure class="thumb-creative__image-wrap">
                                                <img class="thumb-creative__image"
                                                     src="{{ im.url }}" alt="{{ foto.descripcion }}"
                                                     width="{{ im.width }}" height="{{ im.height }}">
                                            </figure>
                                        </div>
                                        <div class="thumb-creative__back">
                                            <figure class="thumb-creative__image-wrap">
                                                <img class="thumb-creative__image"
                                                     src="{{ im.url }}" alt="{{ foto.descripcion }}"
                                                     width="{{ im.width }}" height="{{ im.height }}">
                                            </figure>
                                            <div class="thumb-creative__content">
                                                <h6 class="thumb-creative__title">
                                                    {{ articulo.titulo }}
                                                </h6>
                                                {% if foto.credito %}
                                                    <ul class="list-inline-tag">
                                                        <li>{{ foto.credito }}</li>
                                                    </ul>
                                                {% endif %}
                                                <p>acá podría ir un breve texto de referencia</p>
                                                <a class="link-icon icon-md linear-icon-plus"
                                                   href="{{ im.url }}" data-lightgallery="item">
                                                    <img src="{{ im.url }}" alt="{{ foto.descripcion }}"
                                                         width="{{ im.width }}" height="{{ im.height }}">
                                                </a>
                                            </div>
                                        </div>
                                    {% endthumbnail %}
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
      </section>

{% endblock %}