<div class="tiles playlists">
    <div class="tiles-inner">
        {% for playlist in playlists %}
            {% set active = current_playlist and ''~playlist.id == ''~current_playlist.id %}
            <a href="{{ url_for('playlist_list', playlist_id=playlist.id) }}"
               class="{% if active %}active{% endif %} tile-item playlist-item-{{ playlist.id }} {% if not playlist.enabled %}disabled{% endif %} {% if playlist.fallback %}starred{% endif %} playlist-item"
               data-level="{{ playlist.id }}"
               data-entity="{{ playlist.to_json() }}">
                <div class="tile-body">
                    {% set title = playlist.name|trim %}
                    {% set title = title if title|length > 0 %}
                    {{ truncate((title)|default(l.common_untitled), 35, '...') }}
                </div>
                <div class="tile-metrics">
                    <div class="foot-span playlist-duration">
                        {% set total_duration = seconds_to_hhmmss(durations[playlist.id]) %}
                        {% if total_duration %}
                            {{ total_duration }}
                        {% else %}
                            {{ l.common_empty }}
                        {% endif %}
                    </div>
                </div>
                <div class="tile-tail">
                    <div class="head-icon">
                        {% if playlist.fallback %}
                            <i class="fa fa-star"></i>
                        {% else %}
                            <i class="fa {{ 'fa fa-square' if active else 'fa fa-square' }}"></i>
                        {% endif %}
                    </div>
                </div>
            </a>
        {% endfor %}

        <div class="inner-empty empty-flag {% if playlists|length != 0 %}hidden{% endif %}">
            <i class="fa fa-list"></i>
        </div>
    </div>
</div>