{% extends "base_list.html" %}

{% block title %}{{object.title}}{% endblock %}

{% block lists %}
<div class="row">
    {% if track.primary_image_url %}
    <p style="width:150px; float:left;"><img src="{{track.primary_image_url}}" width=150 height=150 /></p>
    {% endif %}
</div>
<div class="row">
    <p>{{scrobbles.count}} scrobbles</p>
    {% if charts %}
    {% include "scrobbles/_chart_links.html" %}
    {% endif %}
    <div class="col-md">
        {% if object.similar_recordings %}
        <h3>Similar recordings</h3>
        <div class="table-responsive">
            <table class="table table-striped table-sm">
                <thead>
                    <tr>
                        <th scope="col">Track</th>
                        <th scope="col">Artist</th>
                        <th scope="col">Score</th>
                    </tr>
                </thead>
                <tbody>
                    {% for sr in object.similar_recordings|slice:":10" %}
                    <tr>
                        <td><a href="https://musicbrainz.org/recording/{{sr.recording_mbid}}">{{sr.recording_name}}</a></td>
                        <td>{{sr.artist_credit_name}}</td>
                        <td>{{sr.score}}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% endif %}
        <h3>Last scrobbles</h3>
        <div class="table-responsive">
            <table class="table table-striped table-sm">
                <thead>
                    <tr>
                        <th scope="col">Date</th>
                        <th scope="col">Track</th>
                        <th scope="col">Album</th>
                        <th scope="col">Artist</th>
                    </tr>
                </thead>
                <tbody>
                    {% for scrobble in scrobbles.all %}
                    <tr>
                        <td><a href={{scrobble.get_absolute_url}}>{{scrobble.local_timestamp}}</a></td>
                        <td><a href="{{scrobble.track.get_absolute_url}}">{{scrobble.track.title}}</a></td>
                        <td><a href="{{scrobble.track.primary_album.get_absolute_url}}">{{scrobble.track.primary_album}}</a></td>
                        <td><a href="{{scrobble.track.artist.get_absolute_url}}">{{scrobble.track.artist}}</a></td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

{% endblock %}