{% extends "base.html" %}

{% block head %}
    {% block title %}
        <title>{{ _('Archivos de %(sitename)s', sitename=SITENAME) }}</title>
    {% endblock %}
    {{ super() }}
    {% block seo %}
        <!-- Meta Archives -->
        <meta name="description" content="{{ _('Lista de artículos publicados en %(sitename)s', sitename=SITENAME) }}">
        <meta name="keywords" content="{{ _('archivos,artículos,historia,lista de artículos') }}">
        <style>
        .content ul, .content ul ul, .content ul ul ul {
            list-style:none !important;
        }
        .content ul {
            margin-left: 0px !important;
        }
        .contenedor-arbol, .contenedor-arbol ul, .contenedor-arbol li {
            position: relative;
            margin: 0;
            padding-left: 2%;
            line-height: normal;
        }
        .contenedor-arbol ul {
            list-style: none;
        }
        .contenedor-arbol li::before, .contenedor-arbol li::after {
            content: "";
            position: absolute;
            left: -12px;
        }
        .contenedor-arbol li::before {
            border-top: 2px solid #111;
            top: 9px;
            width: 12px;
            height: 0;
        }
        .contenedor-arbol li::after {
            border-left: 2px solid black;
            height: 100%;
            width: 0px;
            top: 2px;
        }
        .contenedor-arbol ul > li:last-child::after {
            height: 8px;
        }
        </style>
    {% endblock %}
{% endblock %}

{% block content %}
<div class="container">
    <!-- start of posts -->
    <div class="columns is-multiline is-centered">
        <!-- start of post -->
        <div class="column is-7">
            <div class="card">

                <!-- post header -->
                <div class="card-content-header">
                    <h4 class="title is-4 has-text-centered">{{ _('Archivos de %(sitename)s', sitename=SITENAME) }}</h4>
                </div>
                <!-- end of post header -->

                <!-- post content -->
                <div class="card-content">
                    <div class="content">
                        <div class="card-inner-wrapper">
                            <div class="contenedor-arbol">
                                <p>{{ ngettext('%(num)d artículo', '%(num)d artículos', dates|length) }}</p>
                                <ul>
                                    {% for article in dates %}
                                    {% set current_year = article.date|strftime('%Y') %}
                                    {% set current_month = article.date|strftime('%m') %}
                                    {% if loop.previtem %}
                                    {% set previous_year = loop.previtem.date|strftime('%Y') %}
                                    {% set previous_month = loop.previtem.date|strftime('%m') %}
                                    {% endif %}
                                    {% if current_year != previous_year %}
                                    {% if loop.previtem %}
                                </ul>
                                </li> <!-- Cierra el mes -->
                                </ul>
                                </li> <!-- Cierra el año -->
                                {% endif %}
                                <li><a href="{{ SITEURL }}/archives/{{ current_year }}/">{{ current_year }}</a>
                                    <ul>
                                        <li><a href="{{ SITEURL }}/archives/{{ current_year }}/{{ current_month }}/">{{ article.date|strftime('%B') }}</a>
                                            <ul>
                                                {% elif current_month != previous_month %}
                                                {% if loop.previtem %}
                                            </ul>
                                        </li>
                                        {% endif %}
                                        <li><a href="{{ SITEURL }}/archives/{{ current_year }}/{{ current_month }}/">{{ article.date|strftime('%B') }}</a>
                                            <ul>
                                                {% endif %}
                                                <li><a href="{{ SITEURL }}/{{ article.url }}" title="{{ article.locale_date}}">{{ article.title }}</a></li>
                                                {% if loop.last %}
                                            </ul>
                                        </li> <!-- Cierra el mes -->
                                    </ul>
                                </li> <!-- Cierra el año -->
                                {% endif %}
                                {% endfor %}
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- end of post content -->
        </div>
        <!-- end of post -->
    </div>
    <!-- end of post column -->
</div>
{% endblock %}