{% extends 'base.jinja' %}



{% block title %}Song Index{% endblock %}

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

{% block content %}
<section class="album-list">
    {% for album_id, name, date, code in album_info %}
    <div class="sort-box album">
        <hgroup id="{{ code }}" class="sort-header album" onclick="albumHeaderClick(event)">
            <img src="{{ url_for('static', filename='albumicons/') }}{{ code }}.svg" alt="{{ code }}" class="album-icon"/> 
            <h2>{{ name }}</h2>
        </hgroup>
        <ul class="sort-list album">
            <span class="date">Released: {{ date }}</span>
            {% for song_id, album, track, name, name_jp, count in song_info if album_id == album %}
                {% if count %}
                    <a href="{{ url_for('songpage', id=song_id) }}" class="entry-box song full">
                        <li>
                            <span class="track-number full">#{{ track }}: </span>
                            <span class="track-name full">{{ name }}</span>
                            {% if name_jp %}<span class="track-name-jp full">{{ name_jp }}</span>{% endif %}
                        </li>
                        <img src="{{ url_for('static', filename='motificon.png') }}" alt="Motif Icon" class="count-icon"/>
                        <span class="clip-count">⨯ {{ count }} </span>
                    </a>
                {% else %}
                    <a href="{{ url_for('songpage', id=song_id) }}" class="entry-box song empty">
                        <li>
                            <span class="track-number empty">#{{ track }}: </span>
                            <span class="track-name empty">{{ name }}</span>
                            {% if name_jp %}<span class="track-name-jp empty">{{ name_jp }}</span>{% endif %}
                        </li>
                    </a>
                {% endif %}
            {% endfor %}
        </ul>
    </div>
    {% endfor %}
</section>

{% endblock %}