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

{% block callBack %}sspFormOpen{% endblock %}
{% block connectorFormFields %}
    {% set partners = interface.getAvailablePartners() %}

    <ul class="nav nav-tabs" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" href="#tab-general" role="tab" data-toggle="tab">
                <span>{% trans "General" %}</span>
            </a>
        </li>
        {% if partners is iterable and partners|length > 0 %}
            {% for partnerKey, available in partners %}
                <li class="nav-item">
                    <a class="nav-link" href="#tab-{{ partnerKey }}" role="tab" data-toggle="tab">
                        <span>{{ available.name }}</span>
                    </a>
                </li>
            {% endfor %}
        {% endif %}
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="tab-general">
            <h3>Xibo SSP Connector</h3>
            <h4>work with world leading supply side platforms</h4>
            <p>
                Onboard with one of our supported SSP's, enter your API key and configure which displays you want to activate. <br>
                In most cases you will need to list your displays with the SSP and copy your SSP ID into the CMS.
            </p>
            <p>
                Please note that your players will require HTTP access to <code>https://exchange.xibo-adspace.com</code>
                to receive ads from any SSP.
            </p>

            {% if partners is not iterable %}
                <p class="alert alert-danger">{{ interface.getFormError() }}</p>
            {% else %}
                {% set numberOfAuthedDisplays = interface.getAuthorisedDisplayCount() %}
                <p class="alert alert-info">{% trans %}Your API key is authorised for {{ numberOfAuthedDisplays }} displays.{% endtrans %}</p>
            {% endif %}

            {% if not interface.isProviderSetting("apiKey") %}
                {% set title %}{% trans "API Key" %}{% endset %}
                {% set helpText %}{% trans "Your API key allows for secure communication between the CMS and the Xibo SSP connector service. It is used to orchestrate the delivery of ads to your players. Enter your API Key from Xibo." %}{% endset %}
                {{ forms.input("apiKey", title, interface.getSetting("apiKey"), helpText) }}
            {% endif %}

            {% if not interface.isProviderSetting("cmsUrl") %}
                {% set title %}{% trans "CMS URL" %}{% endset %}
                {% set helpText %}{% trans "The URL your players use to connect to your CMS." %}{% endset %}
                {{ forms.input("cmsUrl", title, interface.getSetting("cmsUrl"), helpText) }}
            {% endif %}
        </div>
        {% if partners is iterable and partners|length > 0 %}
            {% for partnerKey, available in partners %}
                <div class="tab-pane" id="tab-{{ partnerKey }}">
                    {% if available.logo %}
                        <div class="ssp-logo" style="text-align: center">
                            {% if available.url %}
                                <a href="{{ available.url }}" title="{{ available.name }}" target="_blank">
                                    <img src="{{ available.logo }}" alt="{{ available.name }} Logo" style="width: 250px">
                                </a>
                            {% else %}
                                <img src="{{ available.logo }}" alt="{{ available.name }} Logo" style="width: 250px">
                            {% endif %}
                        </div>
                    {% else %}
                        {% if available.url %}
                            <h4><a href="{{ available.url }}" title="{{ available.name }}" target="_blank">{{ available.name }}</a></h4>
                        {% else %}
                            <h4>{{ available.name }}</h4>
                        {% endif %}
                    {% endif %}
                    {% if available.description %}
                        <p>{{ available.description }}</p>
                    {% endif %}

                    {% set title %}{% trans "Enabled?" %}{% endset %}
                    {% set helpText %}{% trans "Connect to this partner" %}{% endset %}
                    {{ forms.checkbox(partnerKey ~ "_enabled", title, interface.getPartnerSetting(partnerKey, "enabled"), helpText) }}

                    {% set title %}{% trans "API Key" %}{% endset %}
                    {% set helpText %}{% trans "Enter your API Key from this SSP." %}{% endset %}
                    {{ forms.input(partnerKey ~ "_key", title, interface.getPartnerSetting(partnerKey, "key"), helpText) }}

                    {% set title %}{% trans "Test mode?" %}{% endset %}
                    {% set helpText %}{% trans "Should we connect to this partners test or production system?" %}{% endset %}
                    {{ forms.checkbox(partnerKey ~ "_isTest", title, interface.getPartnerSetting(partnerKey, "isTest"), helpText) }}

                    {% if available.isWidgetSupported %}
                        {% set title %}{% trans "Use the SSP widget to schedule ad requests manually?" %}{% endset %}
                        {% set helpText %}{% trans "When using the SSP widget you do not need to configure a share of voice, duration or min/max duration." %}{% endset %}
                        {{ forms.checkbox(partnerKey ~ "_isUseWidget", title, interface.getPartnerSetting(partnerKey, "isUseWidget"), helpText) }}
                    {% endif %}

                    <div class="form-group" style="display: flex;">
                        <label class="col-sm-2 control-label" for="{{ partnerKey ~ "_sov" }}">{% trans "Share of Voice" %}</label>
                        <div class="col-sm-5">
                            <input class="form-control share-of-voice-control"
                                   name="{{ partnerKey ~ "_sov" }}"
                                   type="number" id="{{ partnerKey ~ "_sov" }}"
                                   data-partner="#{{ partnerKey ~ "_sovPercent" }}"
                                   value="{{ interface.getPartnerSetting(partnerKey, "sov") }}"
                                   min="0" max="3600" step="1">
                            <small class="form-text text-muted">{% trans "How many seconds per hour would you like to dedicate to this SSP?" %}</small>
                        </div>

                        <div class="col-sm-5">
                            <input class="form-control" type="number" id="{{ partnerKey ~ "_sovPercent" }}" value="">
                            <small class="form-text text-muted">{% trans "As a percentage" %}</small>
                        </div>
                    </div>

                    {% set title %}{% trans "Duration (s)" %}{% endset %}
                    {% set helpText %}{% trans "The expected duration of each ad served by the SSP." %}{% endset %}
                    {{ forms.number(partnerKey ~ "_duration", title, interface.getPartnerSetting(partnerKey, "duration"), helpText) }}

                    {% set title %}{% trans "Min Duration (s)" %}{% endset %}
                    {% set helpText %}{% trans "The minimum duration of an ad served by the SSP." %}{% endset %}
                    {{ forms.number(partnerKey ~ "_minDuration", title, interface.getPartnerSetting(partnerKey, "minDuration"), helpText) }}

                    {% set title %}{% trans "Max Duration (s)" %}{% endset %}
                    {% set helpText %}{% trans "The maximum duration of an ad served by the SSP." %}{% endset %}
                    {{ forms.number(partnerKey ~ "_maxDuration", title, interface.getPartnerSetting(partnerKey, "maxDuration"), helpText) }}

                    {% set title %}{% trans "Allowed content types" %}{% endset %}
                    {% set helpText %}{% trans "Which content types should be allowed on these displays. Most SSPs will be able to further refine this by display." %}{% endset %}
                    {% set all %}{% trans "Images and Video" %}{% endset %}
                    {% set image %}{% trans "Images only" %}{% endset %}
                    {% set video %}{% trans "Videos only" %}{% endset %}
                    {% set options = [
                        { id: "imagesAndVideo", value: all },
                        { id: "imageOnly", value: image },
                        { id: "videoOnly", value: video }
                    ] %}
                    {{ forms.dropdown(partnerKey ~ "_mediaTypesAllowed", "single", title, interface.getPartnerSetting(partnerKey, "mediaTypesAllowed"), options, "id", "value", helpText) }}

                    {% set title %}{% trans "Display Group" %}{% endset %}
                    {% set helpText %}{% trans "Which displays would you like to enroll with this SSP. Leave blank to enroll them all." %}{% endset %}
                    {% set attributes = [
                        { name: "data-width", value: "200px" },
                        { name: "data-allow-clear", value: "true" },
                        { name: "data-placeholder--id", value: null },
                        { name: "data-placeholder--value", value: "" },
                        { name: "data-search-url", value:  url_for("displayGroup.search") },
                        { name: "data-search-term", value: "displayGroup" },
                        { name: "data-search-term-tags", value: "tags" },
                        { name: "data-id-property", value: "displayGroupId" },
                        { name: "data-text-property", value: "displayGroup" },
                    ] %}
                    {% if interface.getSetting(partnerKey ~ "_displayGroupId")  %}
                        {% set attributes = attributes|merge([
                            { name: "data-initial-key", value: "displayGroupId" },
                            { name: "data-initial-value", value: interface.getSetting(partnerKey ~ "_displayGroupId") },
                        ]) %}
                    {% endif %}
                    {{ forms.dropdown(partnerKey ~ "_displayGroupId", "single", title, null, null, "displayGroupId", "displayGroup", helpText, "pagedSelect", "", "d", "", attributes) }}

                    {% set title %}{% trans "ID field" %}{% endset %}
                    {% set helpText %}{% trans "Which field would you like to use as the ID for this SSP?" %}{% endset %}
                    {% set options = [
                        { id: "displayId", value: "Display ID"|trans },
                        { id: "customId", value: "Custom ID"|trans },
                        { id: "ref1", value: "Reference 1"|trans },
                        { id: "ref2", value: "Reference 2"|trans },
                        { id: "ref3", value: "Reference 3"|trans },
                        { id: "ref4", value: "Reference 4"|trans },
                        { id: "ref5", value: "Reference 5"|trans },
                    ] %}
                    {{ forms.dropdown(partnerKey ~ "_sspIdField", "single", title, interface.getSetting(partnerKey ~ "_sspIdField"), options, "id", "value", helpText) }}

                </div>
            {% endfor %}
    </div>
    {% else %}
        <p>To see a list of available partners please enter your API key, save this form and then come back here.</p>
    {% endif %}

    <hr>

    <h4>Enable/Disable</h4>
    <p>Disabling this connector will stop all displays from making ad requests.</p>

{% endblock %}