{% 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="#" class="ui-btn-active ui-state-persist">Wanted</a></li>
    <li><a href="{{ url_for('headphones_all') }}">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"><span class="ui-li-count">{{upcoming|length}}</span>Upcomming</li>
  {% for album in upcoming %}
    <li id="wanted">
      <a class="inner" href="{{ url_for('headphones_album', albumid=album.AlbumID) }}">
        <h2>{{ album.AlbumTitle }}</h2>
        <p>{{ album.ArtistName }}</p>
      </a>
    </li>
  {% endfor %}

  <li data-role="list-devider" data-theme="a"><span class="ui-li-count">{{wanted|length}}</span>Wanted</li>
  {% for album in wanted %}
    <li id="wanted">
      <a class="inner" href="{{ url_for('headphones_album', albumid=album.AlbumID) }}">
        <h2>{{ album.AlbumTitle }}</h2>
        <p>{{ album.ArtistName }}</p>
      </a>
    </li>
  {% endfor %}
</ul>

{% endblock %}
