{#
/**
 * Copyright (C) 2022 Xibo Signage Ltd
 *
 * Xibo - Digital Signage - http://www.xibo.org.uk
 *
 * This file is part of Xibo.
 *
 * Xibo is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * any later version.
 *
 * Xibo is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with Xibo.  If not, see <http://www.gnu.org/licenses/>.
 */
#}
{% extends "form-base.twig" %}

{% block formHtml %}
    {% if spotsFound <= 0 %}
        <div class="row">
            <div class="col-md-12">
                <div class="alert alert-warning">
                    {% trans "This Playlist does not have any Spots for you to manage. Please choose another." %}
                </div>
            </div>
        </div>
    {% endif %}

    {% if spotsFound > 0 %}
        <div class="widget">
            <div class="widget-title">
                <h3>{{ playlist.name }} <small>{{ spotsFound }} {% trans "Spots" %}</small></h3>
            </div>
            <div class="widget-body">

                {% set widgetLength = playlist.widgets|length %}
                {% set remaining = spotsFound - widgetLength %}

                {% for widget in playlist.widgets %}

                    <div class="row">
                        <div class="col-md-1">
                            <span class="row-title">{{ loop.index }}</span>
                        </div>
                        <div class="col-md-2">
                            {% if widget.getUnmatchedProperty("viewble") %}
                                {% if widget.type == 'image' %}
                                    {% set downloadUrl = url_for("library.download", {id: widget.getPrimaryMediaId()}) %}
                                    {% set thumbnailUrl = url_for("library.thumbnail", {id: widget.getPrimaryMediaId()}) %}
                                    <a class="img-replace" data-toggle="lightbox" data-type="image" href="{{ downloadUrl }}?preview=1">
                                        <img src='{{thumbnailUrl}}' style='max-height: 50px; max-width: 50px;' alt="{{ "Thumbnail"|trans }}"/>
                                    </a>
                                {% else %}
                                    <i title="{{ widget.getUnmatchedProperty("name") }}" class="fa-2x {{ widget.getUnmatchedProperty("moduleIcon") }}" style="height: 50px; max-width: 50px;"></i>
                                {% endif %}
                            {% endif %}
                        </div>
                        <div class="col-md-8"
                             data-button-type="replace"
                             data-playlist-id="{{ widget.playlistId }}"
                             data-widget-id="{{ widget.widgetId }}"
                             data-widget-name="{{ widget.getUnmatchedProperty("name") }}"
                             data-widget-preview="{{ url_for("library.download", {id:':id'}) }}?preview=1"
                            {% if widget.getUnmatchedProperty("regionSpecific") == 0 %}
                             data-media-id="{{ widget.getPrimaryMediaId() }}"
                            {% endif %}
                            {% if widget.getUnmatchedProperty("deletable") == 1 and currentUser.featureEnabled("playlist.modify") and widget.getUnmatchedProperty("regionSpecific") == 0 %}
                             data-widget-del="{{ url_for("playlist.module.widget.delete.form", {id:':id'}) }}"
                            {% endif %}
                             data-feature-enabled="{{ currentUser.featureEnabled("playlist.modify")  }}"
                        >

                            {% if widget.getUnmatchedProperty("regionSpecific") == 0 and widget.getUnmatchedProperty("editable") %}
                                {% if not widget.getUnmatchedProperty("viewble") %}
                                    <button class="btn btn-block disabled">
                                        <i class="fa fa-lock fa-lg"></i>
                                    </button>
                                {% elseif not widget.getUnmatchedProperty("editable") %}
                                    <button class="btn btn-block disabled">
                                        {{ widget.getUnmatchedProperty("name") }} <i class="fa fa-lock fa-lg"></i>
                                    </button>
                                {% else %}
                                    <button class="btn btn-block btn-warning spot-action-button">{{ widget.getUnmatchedProperty("name") }} </button>
                                {% endif %}
                            {% else %}
                                <button class="btn btn-block btn-white" disabled>{{ widget.getUnmatchedProperty("name") }} - {% trans "Locked" %}</button>
                            {% endif %}
                        </div>
                        <div class="col-md-1">
                            {% if widget.getUnmatchedProperty("deletable") == 1 and currentUser.featureEnabled("playlist.modify") and widget.getUnmatchedProperty("regionSpecific") == 0 %}
                                <a class="XiboFormButton btns" title="{% trans "Delete" %}" href="{{ url_for("playlist.module.widget.delete.form", {id: widget.widgetId}) }}">
                                    <i class="fa fa-lg fa-trash" aria-hidden="true" style="padding:8px 0 8px; color:#d9534f;"></i>
                                </a>
                            {% endif %}
                        </div>
                    </div>

                {% endfor %}

                {% if remaining > 0 %}
                    {% for i in 0..remaining - 1 %}

                        <div class="row">
                            <div class="col-md-1">
                                <span class="row-title">{{ loop.index + widgetLength }}</span>
                            </div>
                            <div class="col-md-2">
                            </div>
                            <div class="col-md-8"
                                 data-button-type="add"
                                 data-widget-id=""
                                 data-playlist-id="{{ playlist.playlistId }}"
                                 data-widget-preview="{{ url_for("library.download", {id:':id'}) }}?preview=1"
                                 data-widget-del="{{ url_for("playlist.module.widget.delete.form", {id:':id'}) }}"
                                 data-feature-enabled="{{ currentUser.featureEnabled("playlist.modify")  }}">
                                {% if loop.first %}
                                    <button class="btn btn-block btn-success spot-action-button">{% trans "Add" %}</button>
                                {% else %}
                                    <button class="btn btn-block btn-white" disabled>{% trans "Empty" %}</button>
                                {% endif %}
                            </div>

                            <div class="col-md-1 delete-widget">
                            </div>
                        </div>

                    {% endfor %}
                {% endif %}

            </div>
        </div>
    {% endif %}

{% endblock %}