{#
/**
 * 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 }) }}">
                                        <div id="preview_canvas_container_{{extendedLayout.layout.layoutId}}" style="width: 100%; height: 100%;"></div>
                                    </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/preview.bundle.min.js?v={{ version }}&rev={{revision}}" nonce="{{ cspNonce }}"></script>
    <script src="{{ theme.rootUri() }}dist/vendor/html5preloader/html5Preloader.js?v={{ version }}&rev={{revision}}" nonce="{{ cspNonce }}"></script>
    <script type="text/javascript" nonce="{{ cspNonce }}">
        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 region!"|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 %}
                var iframe = $('<iframe>', {
                    src: '{{ url_for("layout.preview", {id: extendedLayout.layout.layoutId}) }}', // URL to load in the iframe
                    id: 'player_frame_{{extendedLayout.layout.layoutId}}',
                    frameborder: 0,
                    css: {
                        position: 'absolute',
                        'pointer-events': 'unset',
                        top: 0,
                        left: 0
                    }
                });

                // Append the iframe to the container
                $('#preview_canvas_container_{{extendedLayout.layout.layoutId}}').append(iframe);
            {% endfor %}
          });
        }(jQuery));
    </script>
{% endblock %}