{% extends "mobile/base.html" %}

{% block left_button %}
  <a class="search" href="{{ url_for('headphones_search', type='artist') }}">+</a>
{% endblock %}

{% block header %}<h1>Headphones</h1>{% endblock %}

{% block navbar %}
<div data-role="navbar">
  <ul>
    <li><a href="{{ url_for('headphones_wanted') }}">Wanted</a></li>
    <li><a href="#" class="ui-btn-active ui-state-persist">All</a></li>
    <li><a href="{{ url_for('headphones_history') }}">History</a></li>
  </ul>
</div>
{% endblock %}

{% block content %}
<ul id="headphones" data-role="listview" data-filter="true">
  <li data-role="list-devider" data-theme="a">Active</li>
  {% for artist in artists %}
    {% if artist.Status != 'Paused' %}
      <li>
        <a class="inner" href="{{ url_for('headphones_artist', artistid=artist.ArtistID) }}">
          <h2>{{ artist.ArtistName }}</h2>
          <p>{{ artist.HaveTracks }}/{{ artist.TotalTracks }} Downloaded</p>
        </a>
      </li>
    {% endif %}
  {% endfor %}

  <li data-role="list-devider" data-theme="a">Paused</li>
  {% for artist in artists %}
    {% if artist.Status == 'Paused' %}
      <li>
        <a class="inner" href="{{ url_for('headphones_artist', artistid=artist.ArtistID) }}">
          <h2>{{ artist.ArtistName }}</h2>
          <p>{{ artist.HaveTracks }}/{{ artist.TotalTracks }} Downloaded</p>
        </a>
      </li>
    {% endif %}
  {% endfor %}
</ul>

{% endblock %}
