{% extends 'main.html' %}

{% block content %}
<main id="blog-main">
    <nav id="filter">
        <label for="filter_category">Filter:</label>
        <select id="filter_category" name="filter_category" onchange="update_filter()">
            <option value="all">All Categories</option>
            {% for category in all_categories %}
            <option {{ 'selected' if current_category==category }} value="{{ category }}">
                {{all_categories.get(category).get('title')}}</option>
            {% endfor %}
        </select>
    </nav>
    <h2>{{ title }}</h2>
    <p>{{ description }}</p>
        {% for row in articles %}
        <div class="blog-post">
            {% if row.get('link') is not none %}
                <a href="{{ row.link }}">
            {% else %}
                <a href="/blog/{{ row.id }}">
            {% endif %}
                <img class="blogpost-thumb" 
                alt="{{ row.alt }}"
                srcset="
                    {% for i in range(200, 5100, 100) %}
                        /image/{{ row.image }}?w={{i}} {{i}}w{{"," if not loop.last}}
                    {% endfor %}
                    "
                    sizes="
                        (max-width: 999px) 80vw,
                        (min-width: 1000px) 20vw
                    "
                src="/image/{{ row.image }}">
            </a>
            <div class="blogpost-text">
                {% if row.get('link') is not none %}
                    <a href="{{ row.link }}">
                {% else %}
                    <a href="/blog/{{ row.id }}">
                {% endif %}
                    <h3>{{ row.title }}</h3>
                </a>
                <p class="blogpost-date">{{ row.date | human_date }}</p>
                <p>{{ get_readtime(row.content) }} read</p>
                <hr />
                <p class="blogpost-description">{{ get_excerpt(row) }}... <a href="/blog/{{ row.id }}">Read more</a></p>
                <hr />
                {% for category in row.categories %}
                <a class="blogpost-category" href="/blog/category/{{ category }}"> {{ all_categories.get(category, {}).get('title', '') }}{{ ", " if not loop.last }}</loop></a>
                {% endfor %}
            </div>
        </div>
        {% endfor %}
    </section>
</main>
{% endblock %}