{% extends "base.html" %}
{% block title %}
{% for name, _ in song_info %}{{ name }}{% endfor %}
{% endblock %}

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

{% block content %}
<hgroup class="title-box">
    <div class="eng-title">
    <img src="/static/songicon.png" alt="Song Icon" />
    {% for name, name_jp in song_info %}
        <h1>{{ name }}</h1>
    {% endfor %}
    <h3 class="title-album">
    {% for track, _, _, album_code in album_info %}
    <img src="{{ url_for('static', filename='albumicons/') }}{{ album_code }}.svg" alt="{{ album_code }}" />{% if not loop.last %}{% endif %}
    {% endfor %}
    </h3>
    </div>
    {% for name, name_jp in song_info %}
    {% if name_jp %}
        <h2 class="title-jp">{{name_jp}}</h2>
    {% endif %}
{% endfor %}
</hgroup>


<!-- Artist info -->

<div class="track-info">
    <div class="songpage-detail">
        <h2 >Artist:  </h2>
        <ul>
        {% for name, name_rm, credit in artist_info %}
            <li>{{ credit }}: {% if name_rm %}{{ name_rm }} - {% endif %}{{ name }}</li>
        {% endfor %}
        </ul>
    </div>

<!-- Album info -->

    <div class="songpage-detail">
        <h2>Album: </h2>
        <ul>
        {% for album_id, track, album_name, album_code in album_info %}
        <li><a href="{{ url_for('songindex', _anchor='') }}{{ album_code }}">{{ album_name }}</a> - #{{ track }}</li>
        {% endfor %}
        </ul>
    </div>
<!-- Motifs -->
    <div class="entrypage-connections">
        <h2>Motifs Featured: </h2>
        <ul>
        {% for song_id, motif_id, motif in clip_info %}
            <li class="entrypage-clip">
                <audio
                    controls
                    src = "{{ url_for('static', filename='clip/') }}{{ '%04d' % song_id }}-{{ '%03d' % motif_id }}.flac" type="audio/flac">
                </audio>
                <span class="clip-pointer"><a href = "{{ url_for('motifpage', id=motif_id) }}"> {{ motif }} </a></span>
            </li>
        {% endfor %}
        </ul>
    </div>
</div>
{% endblock %}