{% extends "base.html" %}

{% block extra_head %}
<meta name="description" content="{{ _('Lista de artículos publicados en Conocimientos Libres.') }}">
<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 %}

{% block title %}{% trans %}Archivos de {{ SITENAME }}{% endtrans %}{% endblock %}
{% block content %}
<!-- page content -->
<div class="main-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">{% trans %}Archivos de {{ SITENAME }}{% endtrans %}</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>
</div>
<!-- end of page content -->
{% endblock %}
