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

{% block sheet %}<link rel="stylesheet" href="{{ url_for('static', filename='motifbuttonpressed.css') }}" />{% endblock %}

{% block content %}
<section class="category-list">
    {% for category_id, name in category_info %}
    <div class="sort-box category">
        <h2 class="sort-header category">{{ name }}</h2>
        <ul class="sort-list category">
            {% for motif_id, motif, category, count in motif_info if category == category_id %}
                <a href="{{ url_for('motifpage', id=motif_id) }}" class="entry-box motif">
                    <li>
                        <div class="motif-name">{{ motif }}</div>
                    </li>
                    <img src="{{ url_for('static', filename='songicon.png') }}" alt="Song Icon" class="count-icon"/>
                    {% if count %}<div class="clip-count">⨯ {{ count }}</div>{% endif %}
                </a>
            {% endfor %}
        </ul>
    </div>
{% endfor %}
</section>
{% endblock %}