{% extends 'main.html' %}

{% block content %}
<main id="links-main">
    <h2>Useful Links</h2>
    <section id="links">
        {% for category in links %}
        <div class="category">
            <h3>{{category}}</h3>
            {% for link in links.get(category) %}
            <div class="link">
                {% if link.get('img') is not none %}
                <a href="{{link.src}}" target="_blank"></a>
                    <img class="link-thumb" 
                        srcset="
                            {% for i in range(200, 5100, 100) %}
                                /image/{{ link.img }}?w={{i}} {{i}}w{{"," if not loop.last}}
                            {% endfor %}
                            "
                            sizes="
                                (max-width: 999px) 80vw,
                                (min-width: 1000px) 20vw
                            "
                        src="/image/{{ link.img }}">
                </a>
                    {% endif %}
                <a href="{{link.src}}" target="_blank"><h3>{{ link.title }}</h3></a>
                <p>{{ link.description }}</p>
            </div>
            {% endfor %}
        </div>
        {% endfor %}
    </section>
</main>
{% endblock %}