{% extends 'base.html' %}
{% block title %}Motif Index{% endblock %}

{% block content %}
<section class="category-list">
    {% for category_id, name in category_info %}
    <div class="category-box">
        <h2>{{ name }}</h2>
        <ul>
            {% for motif_id, motif, category, count in motif_info if category == category_id %}
                <a href="{{ url_for('motifpage', id=motif_id) }}"><li class="motif-box">
                    <span class="motif-name">{{ motif }}</span>
                    {% if count %}
                    <span class="motif-count">x{{ count }}</span>
                    {% endif %}
                </li></a>
            {% endfor %}
        </ul>
    </div>
{% endfor %}

    <div class="category-box">
        <h2>Misc.</h2>
        <ul>
            {% for motif_id, motif, category, count in motif_info if category == '' %}
                <a href="{{ url_for('motifpage', id=motif_id) }}"><li class="motif-box">
                    <span class="motif-name">{{ motif }}</span>
                    <span class="motif-count">{% if count %} x{{ count }} {% endif %}</span>
                </li></a>
            {% endfor %}
        </ul>
    </div>

</section>
{% endblock %}