{% load telemeta_tags %}
{% load i18n %}

{% block extra_javascript %}
<script src="{{ STATIC_URL }}telemeta/js/popupdiv.js" type="text/javascript"></script>
<script src="{{ STATIC_URL }}telemeta/js/playlist.js" type="text/javascript"></script>
<script src="{{ STATIC_URL }}telemeta/js/mediacollection_list.js" type="text/javascript"></script>
{% endblock %}

{% if items %}
    {% if user.is_authenticated %}
        <form action="{% url "playlist"%}" method="post">
        {% csrf_token %}
    {% endif %}

    <table class="listing">
        <thead>
            <tr>
                <th></th>
                <th>{% trans "Title" %}</th>
                <th>{% trans "Digitized" %}</th>
                <th>{% trans "Recordist" %}</th>
                {% if location_name %}
                    <th>{% trans "Location" %}</th>
                {% else %}
                    <th>{% trans "Country/Continent" %}</th>
                {% endif %}
                <th>{% trans "Year of recording" %}</th>
                <th>{% trans "Code" %}</th>
                {% if user.is_authenticated %}
                    <th class="highlight"><input id="selectAll" type="checkbox"/> select all </th>
                {% endif %}
            </tr>
        </thead>
    <tbody>

    {% for item in items %}
    <tr {% if not forloop.counter0|divisibleby:"2" %}class="odd"{% endif %}>
        <!-- Add the button to listen the item -->
        <td align="center" style="vertical-align:middle;">
            {% if item.file %}
                <a href="#" id="{% url 'telemeta-item-export' item.public_id 'mp3' %}" onclick="playlistUtils.changeGlyph(this.id)" class="glyphicon glyphicon-play" style="font-size: 1.3em;text-decoration: none"><p style="opacity:0;font-size:0">d</p></a>
            {% endif %}
        </td>
        <td>
            <a href="{% url "telemeta-item-detail" item.public_id %}">{{ item }}</a>
        </td>
        <td align="center">
            {% if item.file %}
             <span class="glyphicon glyphicon-ok" style="font-size: 1.3em;color: green;"><p style="opacity:0;font-size:0">d</p></span>
            {% endif %}
        </td>

        <td>{{ item.collector }}</td>
        {% if location_name %}
            <td>{{ item.location.name }}</td>
        {% else %}
            <td>{{ item.country_or_continent|default:'&nbsp;' }}</td>
        {% endif %}

        <td>
        {% if item.recorded_from_date %}
            {{ item.recorded_from_date.year }}
            {% if item.recorded_to_date and not item.recorded_to_date.year|equals:item.recorded_from_date.year %}
                - {{ item.recorded_to_date.year }}
            {% endif %}
        {% endif %}
        </td>

        <td>
            {{ item.code|default:item.old_code }}
        </td>

        {% if user.is_authenticated %}
            <td class="highlight"><input type="checkbox" class="check1" name="selected_items_list" value="{{ item.id }}"/></td>
        {% endif %}
    </tr>
    {% endfor %}
    </tbody>
    </table>

    {% if user.is_authenticated %}
        <button style="margin-top:10px" type="submit" id="btn" class="btn btn-default">{% trans "Add to playlist" %}</button>
        </form>
    {% endif %}

{% else %}
    <p>{% trans "No item" %}</p>
{% endif %}