{% extends "base.html" %}

{% block head %}
    {% block title %}
        <title>{{ _('Lista de categorías de %(sitename)s', sitename=SITENAME)}}</title>
    {% endblock %}
    {{ super() }}
    <meta name="description" content="{{ _('Lista de categorías de %(sitename)s', sitename=SITENAME) }}"/>
    <meta name="keywords" content="{{ _('categorías') }}">
    <style>
     .card-content-header {
         margin-bottom: 2rem;
     }
    </style>
{% endblock %}

{% block content %}
    <div class="container">
        <!-- start of posts -->
        <div class="columns is-multiline is-centered">
            <!-- start of post -->
            <article class="column is-7">
                <div class="card">
                    <!-- post header -->
                    <div class="card-content-header">
                        <h2 class="title is-4 has-text-centered">{{ _('Lista de categorías') }}</h2>
                    </div>
                    <!-- end of post header -->

                    <!-- post content -->
                    <div class="card-content">
                        <div class="content">
                            <div class="card-inner-wrapper">
                                <!-- post text -->
                                <div class="card-content-text has-text-justified">
                                    <ul>
                                        {% for category, articles in categories %}
                                            <li><a href="{{ SITEURL }}/{{ category.url }}">{{ category }}</a></li>
                                        {% endfor %}
                                    </ul>
                                </div>
                                <!-- end of post text -->
                            </div>
                        </div>
                    </div>
                </div>
                <!-- end of post content -->
            </article>
        </div>
    </div>
{% endblock %}