{% extends 'main.html' %}

{% block content %}
<main id="project-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>
    <p style="text-align: center; font-weight: bold; font-style: italic;">This page is relatively new. I'm adding projects as fast as I can but feel free to <a href="/contact">contact me</a> if you want to know about something in particular.</p>
    <section id="projects">
        {% for row in articles %}
        <div class="project">
            {% if row.get('link') is not none %}
                <a href="{{ row.link }}">
            {% else %}
                <a href="/projects/{{ row.id }}">
            {% endif %}
                <img class="project-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="project-text">
                {% if row.get('link') is not none %}
                    <a href="{{ row.link }}">
                {% else %}
                    <a href="/projects/{{ row.id }}">
                {% endif %}
                    <h3>{{ row.title }}</h3>
                </a>
                <p class="article-description">{{ row.description }}</p>
                <p class="article-date">{{ row.date | human_date }}</p>
                {% for category in row.categories %}
                <a class="article-category" href="/projects/category/{{ category }}"> {{ all_categories.get(category, {}).get('title', '') }}{{ ", " if not loop.last }}</loop></a>
                {% endfor %}
            </div>
        </div>
        {% endfor %}
    </section>
</main>
{% endblock %}