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

{% set clipmode = "motif" %}

{% 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="{{ url_for('static', filename='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>



<div class="track-info" >
<!-- Artist info -->
    <div class="songpage-detail">
        <h2 >Artist:  </h2>
        <ul>
        {% for name, name_rm, credit in artist_info %}
            <li>
                <span class="songpage-credit">{{ credit }}:</span>
                <span>{{ name }}</span>
                <span>{% if name_rm %}{{ name_rm }} {% endif %}</span>
            </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>
            <img src="{{ url_for('static', filename='albumicons/') }}{{ album_code }}.svg" alt="{{ album_code }}" class="songpage-img"/>
            <a href="{{ url_for('songindex', _anchor='') }}{{ album_code }}">{{ album_name }}</a> - Track #{{ track }}
        </li>
        {% endfor %}
        </ul>
    </div>

<!-- Location -->

    {% for _, _, location in song_info %}
        {% if location %}
        <div class="song-location">
            <h2>Appearances:</h2>
            <p class="songpage-location">{{ location }}</p>
        </div>
        {% endif %}
    {% endfor %}

<!-- Motifs -->

    {% if clip_info %}
    <div class="entrypage-connections">
        <h2>Motifs Featured: </h2>
        <ul>
        {% for song_id, motif_id, motif in clip_info %}
            {% set type = 'motif' %}
            {% include "clipget.jinja" %}
        {% endfor %}
        </ul>
    </div>
    {% else %}
    <div class="entrypage-connections">
        <h2>No connections yet. Suggest one?</h3>
    </div>
    {% endif %}
</div>
{% endblock %}