{% extends "interface/project_base.html" %}
{% load url_tools %}
{% load polyphonic %}

{% block admin %}
{% if collection %}
<a href="{% url 'work_add' collection.pk %}" class="button is-link">
    {% icon "add_notes" %}
    <span>Add a work</span>
</a>
{% endif %}
{% endblock %}

{% block page %}
<h3 class="title">{{ title }}</h3>
<form method="GET">
    <div class="field has-addons">
        <div class="control is-expanded">
            <input class="input" name="q" type="text" placeholder="Filter" value="{{ request.GET.q }}"/>
        </div>
        <div class="control">
            <a class="button" href="?">
              {% icon "close" %}
            </a>
        </div>
    </div>
</form>

{% if letters %}
<div class="has-text-centered">
<a href="?">_</a>
{% for letter in letters %}
<a href="?start={{ letter }}&sort={{ sort }}">{{ letter }}</a>&nbsp;
{% endfor %}
</div>
{% endif %}

<table class="table is-striped is-fullwidth">
    <thead>
        <tr>
          <th>Work <span class="icon-text"><a href="?start={{ start }}&sort=name">{{ "list_arrow"|icon }}</a></span></th>
          <th>Composer <span class="icon-text"><a href="?start={{ start }}&sort=composer">{{ "list_arrow"|icon }}</a></span></th>
          <th class="is-hidden-mobile">Edition</th>
            {% if not collection and not project %}<th class="is-hidden-touch">Collection</th>{% endif %}
            {% if project %}<th/>{% endif %}
        </tr>
    </thead>
    <tbody>
        {% for work in object_list %}
            <tr>
                <td>
                  <a href="{% url 'work_detail' collection=work.collection_id pk=work.pk %}">{{ work.name }}</a>
                </td>
                <td title="{{ work.composer }}">{{ work.composer|truncatewords:3 }}</td>
                <td class="is-hidden-mobile" title="{{ work.edition }}">{{ work.edition|truncatewords:2 }}</td>
                {% if not collection and not project %}<td class="is-hidden-touch">{{ work.collection.name }}</td>{% endif %}
                {% if project %}<td><a href"" class="button is-primary is-small">Add</a>{% endif %}
            </tr>
        {% empty %}
            <tr><td colspan="4">No works found</td></tr>
        {% endfor %}
    </tbody>
</table>

<footer>
<nav class="pagination is-centered" role="navigation" aria-label="pagination">
    <a class="pagination-previous" 
      {% if page_obj.has_previous %}
        href="{% url_update page=page_obj.previous_page_number %}"
      {% else %}
        disabled
    {% endif %}>
      {% icon "arrow_back" %}
      Previous</a>
    <a class="pagination-next"
      {% if page_obj.has_next %}
        href="{% url_update page=page_obj.next_page_number %}"
      {% else %}
        disabled
      {% endif %}>
      Next
      {% icon "arrow_forward" %}
    </a>
    <ul class="pagination-list">
      {% for page in page_range %}
        <li>
            {% if page == '...' %}
              {{ page }}
            {% else %}
              <a class="pagination-link {% if page == page_obj.number %}is-current{% endif %}" href="{% url_update page=page %}" aria-label="Goto page {{ page }}">{{ page }}</a>
            {% endif %}
        </li>
      {% endfor %}
    </ul>
</nav>

{% if meta %}
<div class="has-text-right has-text-grey-light is-size-7">
Query="{{ meta.query }}"
</div>
{% endif %}
</footer>

{% endblock %}