{#
/**
 * Copyright (C) 2020 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" %}
{% import "forms.twig" as forms %}

{% block formTitle %}
    {% trans "Edit Layout" %}
{% endblock %}

{% block formButtons %}
    {% trans "Cancel" %}, XiboDialogClose()
    {% trans "Save" %}, $("#layoutEditForm").submit()
{% endblock %}

{% block callBack %}backGroundFormSetup{% endblock %}

{% block formHtml %}
    <div class="row">
        <ul class="nav nav-tabs nav-fill" role="tablist">
            <li class="nav-item"><a class="nav-link active" href="#general" role="tab" data-toggle="tab"><span>{% trans "General" %}</span></a></li>
        </ul>
        <div class="col-md-12">
            <form id="layoutEditForm" class="form-horizontal" method="put" action="{{ url_for("layout.edit.background", {id: layout.layoutId}) }}">
                <div class="tab-content">
                    <div class="tab-pane active" id="general">
                        {% set title %}{% trans "Background Colour" %}{% endset %}
                        {% set helpText %}{% trans "Use the colour picker to select the background colour" %}{% endset %}
                        {{ forms.colorPicker("backgroundColor", title, layout.backgroundColor, helpText) }}

                        <div class="form-group row">

                            <label class="col-sm-2 control-label">
                                {% trans "Background Image" %}
                            </label>

                            <div class="col-sm-10">
                                <div class="text-center background-image-add editable">
                                    <div id="bg_not_found_icon">
                                        <i class="fa bg_not_found_icon"></i>
                                        <div>{% trans "No Image set, add from Toolbox or Upload!" %}</div>
                                    </div>

                                    <img id="bg_image_image" data-url="{{ url_for("library.download", {id: ':id'}) }}?preview=1&width=200&height=100" alt="{% trans "Background thumbnail" %}" />
                                    <div class="background-image-drop">{% trans "Add background image" %}</div>
                                </div>

                                <div class="background-image-actions text-center">
                                    <div class="btn-group">
                                        <button id="backgroundUploadButton" class="btn btn-outline-secondary" type="button" data-add-new-background-url="{{ url_for("library.add") }}">
                                            <i class="fa fa-upload"></i>
                                            {% trans "Upload" %}
                                        </button>

                                        <button id="backgroundRemoveButton" class="btn btn-outline-danger" type="button">
                                            <i class="fa fa-remove"></i>
                                            {% trans "Remove" %}
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            {{ forms.hidden("backgroundImageId", backgroundId) }}
                        </div>

                        {% set title %}{% trans "Resolution" %}{% endset %}
                        {% set helpText %}{% trans "Change the resolution" %}{% endset %}
                        {{ forms.dropdown("resolutionId", "single", title, resolution.resolutionId, resolutions, "resolutionId", "resolution", helpText, "resolution-group") }}

                        {% set title %}{% trans "Layer" %}{% endset %}
                        {% set helpText %}{% trans "The layering order of the background image (z-index). Advanced use only." %}{% endset %}
                        {{ forms.input("backgroundzIndex", title, layout.backgroundzIndex, helpText) }}

                        {% set title %}{% trans "Automatically apply Transitions?" %}{% endset %}
                        {% set helpText %}{% trans "When enabled, the default Transition type and duration will be applied to all widgets on this Layout." %}{% endset %}
                        {{ forms.checkbox("autoApplyTransitions", title, layout.autoApplyTransitions, helpText) }}
                    </div>
                </div>
            </form>
        </div>
    </div>
{% endblock %}