{% extends "grunge/base.html" %}
{% load bootstrap_pagination %}
{% load humanize %}
{% load i18n %}
{% load qurl %}

{% block content %}
<div class="row">
  <div class="col">
    <table class="table table-borderless table-striped">
      <thead class="h3">
        <tr>
          <th>
            <a href="{% url 'artist-list' %}">
              {% trans "Artist" %}
              <sup>
                <span class="fa fa-caret-up"></span>
              </sup>
            </a>
          </th>
          <th class="text-right">
            <a href="#">
              {% trans "Albums" %}
              <sup>
                <span class="fa fa-caret-up"></span>
              </sup>
            </a>
          </th>
          <th class="text-right">
            <a href="#">
              {% trans "Tracks" %}
              <sup>
                <span class="fa fa-caret-up"></span>
              </sup>
            </a>
          </th>
        </tr>
      </thead>
      <tbody>
        {% for artist in artists %}
        <tr>
          <td>
            <a href="#">
              {{ artist.name }}
            </a>
          </td>
          <td class="text-right">
            <a href="#">{{ artist.albums_count|intcomma }}</a>
          </td>
          <td class="text-right">
            <a href="#">{{ artist.tracks_count|intcomma }}</a>
          </td>
        </tr>
        {% endfor %}
      </tbody>
      <tfoot>
        <tr>
          <td colspan="3">
            {% bootstrap_paginate page_obj show_first_last=True show_index_range=True %}
          </td>
        </tr>
      </tfoot>
    </table>
  </div>
</div>
{% endblock content %}