{% from 'util.html' import image %}
<div id="playlist">
<h3>Playlist</h3>

<ol>
{% for track in playlist.playlist_entries()  %}
    <li class="{{ loop.cycle('odd', 'even') }}">
        <a href="{{ url_for('.track.index', id=track.id) }}">
            {{ track.title }}
        </a>
        <a href="{{ url_for('.track.delete_track_from_playlist', id=track.id) }}">
            {{ image('delete.png') }}
        </a>
    </li>
{% else %}
<p>Your playlist is empty!</p>
{% endfor %}
</ol>

{% if session['user'] %}
<form action="{{ url_for('playlist.save_current') }}" method="POST">
    <input type="text" name="playlist-name" value="{{ playlist.playlist_name() }}" placeholder="Playlist Name">
    <input type="submit" value="Save Playlist">
</form>
<a href="{{ url_for('playlist.manage') }}">Manage Playlists</a>
{% endif %}
<a href="{{ url_for('.main.download_playlist') }}">Download</a>
<a href="{{ url_for('.main.clear_playlist') }}">Clear</a>
</div>

{% from 'util.html' import image %}
<div id="playlist">
<h3>Playlist</h3>

<ol>
{% for track in playlist.playlist_entries()  %}
    <li class="{{ loop.cycle('odd', 'even') }}">
        <a href="{{ url_for('.track.index', id=track.id) }}">
            {{ track.title | truncate(20, True) }}
        </a>
        <a href="{{ url_for('.track.delete_track_from_playlist', id=track.id) }}">
            {{ image('delete.png') }}
        </a>
    </li>
{% else %}
<p>Your playlist is empty!</p>
{% endfor %}
</ol>

{% if session['user'] %}
<form action="{{ url_for('playlist.save_current') }}" method="POST">
    <input type="text" name="playlist-name" value="{{ playlist.playlist_name() }}" placeholder="Playlist Name">
    <input type="submit" value="Save Playlist">
</form>
<a href="{{ url_for('playlist.manage') }}">Manage Playlists</a>
{% endif %}
<a href="{{ url_for('.main.download_playlist') }}">Download</a>
<a href="{{ url_for('.main.clear_playlist') }}">Clear</a>
</div>

Truncate track title after first 20 letters for better alignment
Truncate track title after first 20 letters for better alignment
