{% extends "base_list.html" %}
{% load mathfilters %}
{% load static %}

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

{% block lists %}
<div class="row">

    {% if object.thumbnail %}
    <p style="float:left; width:300px; margin-right:10px;">
        <img style="border:1px solid #ccc;" src="{{artist.primary_image_url}}" width=300 height=300 />
    </p>
    {% else %}
    {% if object.album_set.first.cover_image %}
    <p style="float:left; width:302px; padding:0; border: 1px solid #ccc">
        <img src="{{object.album_set.first.cover_image.url}}" width=300 height=300 />
    </p>
    {% endif %}
    {% endif %}
    <div style="float:left; width:600px; margin-left:10px; ">
        {% if artist.biography %}
        <p>{{artist.biography|safe|linebreaks|truncatewords:160}}</p>
        <hr/>
        {% endif %}
        <p style="float:right;">
            <a href="{{artist.mb_link}}"><img src="{% static "images/musicbrainz-logo.png" %}" width=35></a>
            <a href="{{artist.rym_link}}"><img src="{% static "images/rateyourmusic-logo.jpg" %}" width=35></a>
            {% if artist.bandcamp_link %}<a href="{{artist.bandcamp_link}}"><img src="{% static "images/bandcamp-logo.png" %}" width=35></a>{% endif %}
            {% if artist.allmusic_link %}<a href="{{artist.allmusic_link}}"><img src="{% static "images/allmusic-logo.png" %}" width=35></a>{% endif %}
        </p>
    </div>
</div>
<div class="row">
    <p>{{artist.scrobbles.count}} scrobbles</p>
    {% if charts %}
    {% include "scrobbles/_chart_links.html" %}
    {% endif %}
    <div class="col-md">
        <h3>Top tracks</h3>
        <div class="table-responsive">
            <table class="table table-striped table-sm">
            <thead>
                <tr>
                    <th scope="col">Rank</th>
                    <th scope="col">Track</th>
                    <th scope="col">Album</th>
                    <th scope="col">Count</th>
                    <th scope="col"></th>
                </tr>
            </thead>
            <tbody>
                {% for track in tracks_ranked %}
                <tr>
                    <td>#{{track.0}}</td>
                    <td><a href="{{track.1.get_absolute_url}}">{{track.1.title}}</a></td>
                    <td><a href="{{track.1.primary_album.get_absolute_url}}">{{track.1.primary_album}}</a></td>
                    <td>{{track.1.scrobble_count}}</td>
                    <td>
                        <div class="progress-bar" style="margin-right:5px;">
                            <span class="progress-bar-fill" style="width: {{track.1.scrobble_count|mul:10}}%;"></span>
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
            </table>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md">
        <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>
                </tr>
            </thead>
            <tbody>
                {% for scrobble in recent_scrobbles %}
                <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.name}}</a></td>
                </tr>
                {% endfor %}
            </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}