{#
/**
 * 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 "authed.twig" %}
{% import "inline.twig" as inline %}

{% block pageContent %}
    <div class="widget">
        <div class="widget-title">
            {% set campaignName = campaign.campaign %}
            {% if campaign.isLayoutSpecific %}
                {% trans %}Layout Preview for {{ campaignName }}{% endtrans %}
            {% else %}
                {% trans %}Campaign Preview for {{ campaignName }}{% endtrans %}
            {% endif %}
        </div>
        <div class="widget-body">
            <p><b>{% trans "total duration" %}</b> {{ duration|datehms }} <i>({% trans "hours:min:sec" %})</i></p>
            <p><b>{% trans "number of layouts" %}</b> : {{ campaign.numberLayouts }} </p>
            <div class="row clearfix">
                {% for extendedLayout in extendedLayouts %}
                    <div class="col-sm-6 col-md-4 col-lg-3">
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="embed-responsive embed-responsive-4by3">
                                    <div class="embed-responsive-item preview-container"
                                         data-url="{{ url_for('layout.preview', { "id": extendedLayout.layout.layoutId }) }}">
                                        {% include 'layout-preview-partial.twig' with {'layout': extendedLayout.layout, 'previewOptions': extendedLayout.previewOptions } %}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-8">
                                <small>{% trans "id" %}:</small> {{ extendedLayout.layout.layoutId }}<br/>
                                <small>{% trans "name" %}:</small> {{ extendedLayout.layout.layout }}<br/>
                                <small>{% trans "duration" %}:</small> {{ extendedLayout.duration|datehms }}<br/>
                            </div>
                            <div class="col-sm-4">
                                <a class="btn btn-white" href="{{ url_for("layout.preview", {id: extendedLayout.layout.layoutId}) }}" target="_blank">
                                    {% trans "Open full screen" %}
                                    <span class="fa fa-tablet"></span>
                                </a>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
{% endblock %}

{% block javaScript %}
    <script src="{{ theme.rootUri() }}dist/vendor/html5preloader/html5Preloader.js?v={{ version }}&rev={{revision}}"></script>
    <script src="{{ theme.rootUri() }}dist/preview/html-preview.js?v={{ version }}&rev={{revision}}"></script>
    <script type="text/javascript">
        var previewTranslations = {};
        // Translations we want always available
        {% autoescape "js" %}
            previewTranslations.actionControllerTitle = "{{ "Webhook Controller"|trans }}";
            previewTranslations.navigateToLayout = "{{ "Navigate to layout with code [layoutTag]?"|trans }}";
            previewTranslations.emptyRegionMessage = "{{ "Empty layout"|trans }}";
            previewTranslations.nextItem = "{{ "Next Item"|trans }}";
            previewTranslations.previousItem = "{{ "Previous Item"|trans }}";
            previewTranslations.navWidget = "{{ "Navigate to Widget"|trans }}";
            previewTranslations.navLayout = "{{ "Navigate to Layout"|trans }}";
            previewTranslations.widgetId = "{{ "Widget ID"|trans }}";
            previewTranslations.layoutCode = "{{ "Layout Code"|trans }}";
            previewTranslations.target = "{{ "Target"|trans }}";
        {% endautoescape %}

        (function($){
          $(document).ready(function(){
            {% for extendedLayout in extendedLayouts %}
              dsInit({{ extendedLayout.layout.layoutId }}, {{ extendedLayout.previewOptions|json_encode()|raw }}, false);
            {% endfor %}
          });
        }(jQuery));
    </script>
{% endblock %}

{% block headContent %}
        <link rel="stylesheet" type="text/css" href="{{ theme.rootUri() }}dist/preview/html-preview.css" />
        <link rel="stylesheet" type="text/css" href="{{ theme.uri("css/html-preview.css") }}" />
{% endblock %}