{% extends 'base.html.twig' %}

{% block content %}
    <section class="h-feed">
        <h1 class="p-name">Joe Carstairs' blog</h1>

        <p hidden>
             This blog is written by
            <a class="p-author h-card" href="{{ url('index') }}">
                Joe Carstairs
            </a>.
        </p>
        <p hidden>
             <a class="u-url" href="{{ url('blog_posts') }}">Permalink</a>
        </p>

        {% if years %}
            <nav class="skip-to">
                Skip to:
                <ul>
                    {% for year in years %}
                        <li><a href="#{{ year }}">{{ year }}</a></li>
                    {% endfor %}
                </ul>
            </nav>
        {% endif %}

        {% for year in years %}
            <h2 id="{{ year }}">{{ year }}</h2>

            <nav class="skip-to">
                Skip to:
                <ul>
                    {% for month in months[year] %}
                        <li><a href="#{{ year }}-{{ month }}">
                            {{ monthNames[month] }} <span class="visually-hidden">{{ year }}</span>
                        </a></li>
                    {% endfor %}
                </ul>
            </nav>

            {% for month in months[year] %}
                <h3 id="{{ year }}-{{ month }}">{{ monthNames[month] }}</h3>

                {% for post in posts[year][month] %}
                    <section class="h-entry">
                        <a class="u-url" href="{{ path('blog_post', { 'slug': post.slug }) }}">
                            <h4 class="p-name">
                                {{ post.title }}
                            </h4>

                            <p>
                                Added:
                                <time class="dt-published" datetime="{{ post.publishedDate.format('c') }}">
                                    {{ post.publishedDate.format('j F Y') }}
                                </time>
                            </p>

                            {% if post.updatedDate %}
                                <p>
                                    Updated:
                                    <time class="dt-updated" datetime="{{ post.updatedDate.format('c') }}">
                                        {{ post.updatedDate.format('j F Y') }}
                                    </time>
                                </p>
                            {% endif %}

                            <section class="p-summary">
                                {% apply markdown_to_html %}
                                    {{ post.description|markdown_to_html|striptags('<i><em><b><strong><sup><p>')|html_to_markdown }}
                                {% endapply %}
                            </section>
                        </a>
                    </section>
                {% endfor %}
            {% endfor %}
        {% else %}
            <p>I have no blog posts.</p>
        {% endfor %}
    </section>
{% endblock %}