{% if index == None %}
    <tr id="playlist-empty" class="playlist-item">
        <td colspan="4" style="text-align:center;">
            <img style="margin: auto; width: 35px;" src="static/image/empty_box.svg" />
        </td>
    </tr>
{% else %}
    {% if index == playlist.current_index %}
        <tr class="playlist-item table-active">
            {% else %}
        <tr class="playlist-item">
    {% endif %}
<th scope="row">{{ index + 1 }}</th>
<td>
    <div class="playlist-title">
        {% if m.type != 'radio' and m.thumbnail %}
            <img width="80" src="data:image/PNG;base64,{{ m.thumbnail }}"/>
                {% else %}
                <img width="80" src="static/image/unknown-album.png"/>
            {% endif %}
        </div>
        <div class="playlist-artwork">
            {% if m.title.strip() %}
                <b>{{ m.title|truncate(45) }}</b>
            {% elif m.url %}
                <b>{{ m.url|truncate(45) }}</b>
            {% endif %}
            <span class="badge badge-secondary">{{ m.display_type() }}</span>
            <br />
            {% if m.type == 'file' %}
                {% if m.artist %}
                    {{ m.artist }}
                {% else %}
                    ??
                {% endif %}
            {% elif m.type == 'url_from_playlist' %}
                <a href="{{ m.playlist_url }}"><i>{{ m.playlist_title|truncate(50) }}</i></a>
            {% else %}
                Unknown Artist
            {% endif %}
            <br />

            <a class="tag-space tag-click"
               onclick='addTagModalShow("{{ m.id }}", "{{ m.title }}", {{ tag_tuples | tojson }});'><i class="fas fa-edit" style="color: #AAAAAA"></i></a>
            {% for tag_tuple in tag_tuples %}
                <span class="badge badge-{{ tag_tuple[1] }}">{{ tag_tuple[0] }}</span>
            {% endfor %}
        </div>
    </td>
    <td>
        {% if m.type == 'url' or m.type == 'radio' or m.type == 'url_from_playlist' %}
            <small><a href="{{ m.url }}"><i>{{ m.url|truncate(50) }}</i></a></small>
        {% elif m.type == 'file' %}
        <small>{{ m.path|truncate(50) }}</small>
        {% endif %}
    </td>
    <td>
        <div class="btn-group">
            <button type="button" class="btn btn-info btn-sm btn-space"
                    onclick="request('post', {play_music : '{{ index }}'})">
                <i class="fa fa-play" aria-hidden="true"></i>
            </button>
            <button type="button" class="btn btn-danger btn-sm btn-space"
                    onclick="request('post', {delete_music : '{{ index }}'})">
                <i class="fas fa-trash-alt" aria-hidden="true"></i>
            </button>
        </div>
    </td>
</tr>
{% endif %}