{#
/**
 * Copyright (C) 2019 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 "base.twig" %}

{% block content %}
    {% set horizontalNav = currentUser.getOptionValue("navigationMenuPosition", theme.getSetting("NAVIGATION_MENU_POSITION", "vertical")) == "horizontal" %}
    {% set hideNavigation = currentUser.getOptionValue("hideNavigation", "0") %}
    <div {% if hideNavigation == "0" and not horizontalNav %}id="page-wrapper"{% endif %} class="active">

        {% if hideNavigation == "0" %}
            {% if horizontalNav %}
                <nav class="navbar navbar-default">
                    <div class="container-fluid">
                        <!-- Brand and toggle get grouped for better mobile display -->
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                            <a class="navbar-brand" href="#">
                                <img class="xibo-logo" src="{{ theme.uri("img/xibologo.png") }}">
                            </a>
                        </div>

                        <!-- Collect the nav links, forms, and other content for toggling -->
                        <div class="collapse navbar-collapse" id="navbar-collapse-1">
                            {% include "authed-topbar.twig" %}

                            <ul class="nav navbar-nav navbar-right">
                                {% if currentUser.routeViewable("/drawer") %}
                                    {% include "authed-notification-drawer.twig" %}
                                {% endif %}
                                {% include "authed-user-menu.twig" %}
                            </ul>
                        </div><!-- /.navbar-collapse -->
                    </div><!-- /.container-fluid -->
                </nav>
            {% else %}
                <div class="collapse navbar-collapse" id="navbar-collapse-1">
                    {% include "authed-sidebar.twig" %}
                </div>
            {% endif %}
        {% endif %}

        <div id="content-wrapper">
            <div class="page-content">
                {% if not horizontalNav %}
                <div class="row header">
                    <div class="col-sm-12">
                        <div class="meta pull-left">
                            <div class="page"><img class="xibo-logo" src="{{ theme.uri("img/xibologo.png") }}"></div>
                        </div>
                        <div class="user pull-right">
                            <button type="button"  class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                            {% include "authed-user-menu.twig" %}
                        </div>
                        {% if currentUser.routeViewable("/drawer") %}
                        <div class="user pull-right">
                            {% include "authed-notification-drawer.twig" %}
                        </div>
                        {% endif %}
                    </div>
                </div>
                {% endif %}
                <div class="row">
                    <div class="col-sm-12">
                        {% block actionMenu %}{% endblock %}
                        {% block pageContent %}{% endblock %}
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12">
                        {% block pageFooter %}{% endblock %}
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javaScriptTemplates %}

    <script type="text/javascript">
        {% set userPreferences = currentUser.getUserOptions() %}
        var userPreferences = {{ userPreferences|json_encode|raw }};
        var userPreferencesUrl = "{{ urlFor("user.pref") }}";
    </script>

    {% raw %}
    <script type="text/x-handlebars-template" id="buttons-template">
        <div class="btn-group pull-right">
            <button class="btn dropdown-toggle" data-toggle="dropdown">
                <span class="fa fa-caret-down"></span>
            </button>
            <ul class="dropdown-menu">
                {{#each buttons}}
                    {{#if divider}}
                    <li class="divider"></li>
                    {{else}}
                        {{#if external}}
                        <li class="{{ id }}"><a tabindex="-1" target="{{ linkType }}" href="{{ url }}">{{ text }}</a></li>
                        {{/if}}

                        {{#unless external}}
                            <li {{#each dataAttributes}}
                                data-{{ name }}="{{ value }}"
                                {{/each}}
                                class="{{#if class}}{{ class }}{{else}}XiboFormButton{{/if}} {{ id }}" href="{{ url }}"><a tabindex="-1" href="#">{{ text }}</a>
                            </li>
                        {{/unless}}
                    {{/if}}
                {{/each}}
            </ul>
        </div>
    </script>

    <script type="text/x-handlebars-template" id="multiselect-button-template">
        <div class="btn-group">
            <button class="btn select-all" data-toggle="selectAll">
                {{ selectAll }}
            </button>
            <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                <span class="fa fa-caret-down"></span>
                {{ withSelected }}
            </button>
            <ul class="dropdown-menu">
                {{#each buttons}}
                <li class="XiboMultiSelectFormButton" data-button-id="{{ id }}" data-grid-id="{{ gridId }}"><a tabindex="-1" href="#">{{ text }}</a></li>
                {{/each}}
            </ul>
        </div>
    </script>

    <script type="text/x-handlebars-template" id="template-file-upload">
        <form method="post" enctype="multipart/form-data" data-max-file-size="{{ upload.maxSize }}" data-accept-file-types="/(\.|\/){{ upload.validExt }}$/i">
            {{#if playlistId}}
                <input type="hidden" name="playlistId" value="{{ playlistId }}" />
            {{/if}}
            {{#if widgetId}}
                <input type="hidden" name="widgetId" value="{{ widgetId }}" />
            {{/if}}
            {{#if oldMediaId}}
                <input type="hidden" name="oldMediaId" value="{{ oldMediaId }}" />
            {{/if}}
            <div class="row fileupload-buttonbar">
                <div class="col-md-7">
                    <div class="well">
                        <p>{{ upload.maxSizeMessage }}</p>
                        {{#if upload.validExtensionsMessage}}
                            <p><strong>{{ upload.validExtensionsMessage }}</strong></p>
                        {{/if}}                            
                    </div>
                    <!-- The fileinput-button span is used to style the file input field as button -->
                    <span class="btn btn-success fileinput-button">
                        <i class="glyphicon glyphicon-plus glyphicon glyphicon-white"></i>
                        <span>{{ trans.addFiles }}</span>
                        {{#if oldMediaId }}
                        <input type="file" name="files[]">
                        {{else}}
                        <input type="file" name="files[]" multiple>
                        {{/if}}
                    </span>
                    <button type="submit" class="btn btn-primary start">
                        <i class="glyphicon glyphicon-upload glyphicon glyphicon-white"></i>
                        <span>{{ trans.startUpload }}</span>
                    </button>
                    <button type="reset" class="btn btn-warning cancel">
                        <i class="glyphicon glyphicon-ban-circle glyphicon glyphicon-white"></i>
                        <span>{{ trans.cancelUpload }}</span>
                    </button>
                    <!-- The loading indicator is shown during file processing -->
                    <span class="fileupload-loading"></span>
                </div>
                <!-- The global progress information -->
                <div class="col-md-4 fileupload-progress fade">
                    <!-- The global progress bar -->
                    <div class="progress">
                        <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width:0%;">
                            <div class="sr-only"></div>
                        </div>
                    </div>
                    <!-- The extended global progress information -->
                    <div class="progress-extended">&nbsp;</div>
                    <!-- Processing info container -->
                    <div class="progress-end" style="display:none;">{{ trans.processing }}</div>
                </div>
            </div>
            {{#if oldMediaId}}
            <div class="row">
                <div class="col-md-12">
                    <label for="updateInLayouts">
                        <input type="checkbox" id="updateInLayouts" name="updateInLayouts" {{#if updateInAllChecked}}checked{{/if}}>
                        {{ trans.updateInLayouts.title }}
                    </label>
                    <span class="help-block">{{ trans.updateInLayouts.helpText }}</span>

                    <label for="deleteOldRevisions">
                        <input type="checkbox" id="deleteOldRevisions" name="deleteOldRevisions" {{#if deleteOldRevisionsChecked}}checked{{/if}}>
                        {{ trans.deleteOldRevisions.title }}
                    </label>
                    <span class="help-block">{{ trans.deleteOldRevisions.helpText }}</span>
                </div>
            </div>
            {{/if}}
            <!-- The table listing the files available for upload/download -->
            <table role="presentation" class="table table-striped"><tbody class="files"></tbody></table>
        </form>
    </script>

    <!-- The template for simple upload -->
    <script id="template-upload-simple" type="text/x-tmpl">
    {% for (var i=0, file; file=o.files[i]; i++) { %}
        <tr class="template-upload fade">
            <td>
                <span class="preview"></span>
            </td>
            <td>
                <p class="size">{%=o.formatFileSize(file.size)%}</p>
                    <div class="progress">
                        <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width:0%;">
                            <div class="sr-only"></div>
                        </div>
                    </div>
                </div>
            </td>
            <td>
                {% if (!i && !o.options.autoUpload) { %}
                    <button class="btn btn-primary start" disabled>
                        <i class="glyphicon glyphicon-upload glyphicon glyphicon-white"></i>
                    </button>
                {% } %}
                {% if (!i) { %}
                    <button class="btn btn-warning cancel">
                        <i class="glyphicon glyphicon-ban-circle glyphicon glyphicon-white"></i>
                    </button>
                {% } %}
            </td>
        </tr>
    {% } %}
    </script>

    <!-- The template to display files available for upload -->
    <script id="template-upload" type="text/x-tmpl">
    {% for (var i=0, file; file=o.files[i]; i++) { %}
        <tr class="template-upload fade">
            <td>
                <span class="preview"></span>
            </td>
            <td class="title" title="Name">
                <label class="control-label" title="Optional media name" for="name">Name</label>
                <label for="name[]"><input name="name[]" type="text" id="name" value="" /></label>
                <div><span class="error"></span></div>
            </td>
            <td class="title" title="Tags">
                <label class="control-label" title="A comma separated list of tags to assign to this Media" for="tags">Tags</label>
                <label for="tags[]"><input name="tags[]" type="text" id="name" value="" /></label>
                <div><span class="error"></span></div>
            </td>
            <td>
                <p class="size">{%=o.formatFileSize(file.size)%}</p>
                    <div class="progress">
                        <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width:0%;">
                            <div class="sr-only"></div>
                        </div>
                    </div>
                </div>
            </td>
            <td>
                {% if (!i && !o.options.autoUpload) { %}
                    <button class="btn btn-primary start" disabled>
                        <i class="glyphicon glyphicon-upload glyphicon glyphicon-white"></i>
                    </button>
                {% } %}
                {% if (!i) { %}
                    <button class="btn btn-warning cancel">
                        <i class="glyphicon glyphicon-ban-circle glyphicon glyphicon-white"></i>
                    </button>
                {% } %}
            </td>
        </tr>
    {% } %}
    </script>
    <!-- The template to display files available for download -->
    <script id="template-download" type="text/x-tmpl">
    {% for (var i=0, file; file=o.files[i]; i++) { %}
        <tr class="template-download fade">
           <td>
                <p class="name" id="{%=file.storedas%}" status="{% if (file.error) { %}error{% } %}">
                    {%=file.name%}
                </p>
                {% if (file.error) { %}
                    <div><span class="label label-danger">{%=file.error%}</span></div>
                {% } %}
            </td>
            <td>
                <span class="size">{%=o.formatFileSize(file.size)%}</span>
            </td>
        </tr>
    {% } %}
    </script>
    {% endraw %}

    <script type="text/x-handlebars-template" id="layout-background-image-upload-template">
        <form method="post" action="{{ urlFor("library.add") }}" enctype="multipart/form-data" data-max-file-size="{{ libraryUpload.maxSize }}" data-accept-file-types="/(\.|\/){{ libraryUpload.validImageExt }}$/i">
            <div class="row">
                <div class="text-center">
                    <span class="btn btn-success fileinput-button">
                        <i class="glyphicon glyphicon-plus glyphicon glyphicon-white"></i>
                        <span>{% trans "Browse/Add image" %}</span>
                        <input type="file" name="files[]">
                    </span>
                    <span class="btn btn-danger fileinput-close-button">
                        <i class="glyphicon glyphicon-remove glyphicon glyphicon-white"></i>
                    </span>
                </div>

                <div>
                    <!-- The table listing the files available for upload/download -->
                    <table role="presentation" class="table table-striped"><tbody class="files"></tbody></table>
                </div>

                <div>
                    <span class="fileupload-loading"></span>
                    <div class="fileupload-progress fade">
                        <!-- The global progress bar -->
                        <div class="progress">
                            <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width:0%;">
                                <div class="sr-only"></div>
                            </div>
                        </div>
                        <!-- The extended global progress information -->
                        <div class="progress-extended">&nbsp;</div>
                        <!-- Processing info container -->
                        <div class="progress-end" style="display:none;">{% trans "Processing..." %}</div>
                    </div>
                </div>
            </div>
        </form>
    </script>

    <script type="text/x-handlebars-template" id="attachment-upload-template">
        <form method="post" action="{{ urlFor("notification.addattachment") }}" enctype="multipart/form-data" data-max-file-size="{{ libraryUpload.maxSize }}" data-accept-file-types="/(\.|\/)jpg|jpeg|png|bmp|gif|zip|pdf$/i">
            <div class="row">
                <div class="text-center">
                    <span class="btn btn-success fileinput-button">
                        <i class="glyphicon glyphicon-plus glyphicon glyphicon-white"></i>
                        <span>{% trans "Browse/Add attachment" %}</span>
                        <input type="file" name="files[]">
                    </span>
                    <span class="btn btn-danger hidden fileinput-close-button">
                        <i class="glyphicon glyphicon-remove glyphicon glyphicon-white"></i>
                    </span>
                </div>

                <div>
                    <!-- The table listing the files available for upload/download -->
                    <table role="presentation" class="table table-striped"><tbody class="files"></tbody></table>
                </div>

                <div>
                    <span class="fileupload-loading"></span>
                    <div class="fileupload-progress fade">
                        <!-- The global progress bar -->
                        <div class="progress">
                            <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width:0%;">
                                <div class="sr-only"></div>
                            </div>
                        </div>
                        <!-- The extended global progress information -->
                        <div class="progress-extended">&nbsp;</div>
                        <!-- Processing info container -->
                        <div class="progress-end" style="display:none;">{% trans "Processing..." %}</div>
                    </div>
                </div>
            </div>
        </form>
    </script>



{% endblock %}