{% extends "base.twig" %}

{% block content %}
    <div id="page-wrapper" class="active">
        <div class="collapse navbar-collapse" id="navbar-collapse-1">
            <div id="sidebar-wrapper">
                <ul class="sidebar">
                    <li class="sidebar-main"><a href="{{ urlFor("home") }}">{% trans "Dashboard" %}</a></li>

                    {% if currentUser.routeViewable("/schedule") %}
                    <li class="sidebar-list"><a href="{{ urlFor("schedule.view") }}">{% trans "Schedule" %}</a></li>
                    {% endif %}

                    {% if currentUser.routeViewable("/daypart") %}
                    <li class="sidebar-list"><a href="{{ urlFor("daypart.view") }}">{% trans "Dayparting" %}</a></li>
                    {% endif %}

                    {% if currentUser.routeViewable("/campaign") or currentUser.routeViewable("/layout") or currentUser.routeViewable("/template") or currentUser.routeViewable("/resolution") %}
                        <li class="sidebar-title"><a>{% trans "Design" %}</a></li>
                        {% if currentUser.routeViewable("/campaign") %}
                        <li class="sidebar-list"><a href="{{ urlFor("campaign.view") }}">{% trans "Campaigns" %}</a></li>
                        {% endif %}

                        {% if currentUser.routeViewable("/layout") %}
                        <li class="sidebar-list"><a href="{{ urlFor("layout.view") }}">{% trans "Layouts" %}</a></li>
                        {% endif %}

                        {% if currentUser.routeViewable("/template") %}
                        <li class="sidebar-list"><a href="{{ urlFor("template.view") }}">{% trans "Templates" %}</a></li>
                        {% endif %}

                        {% if currentUser.routeViewable("/resolution") %}
                        <li class="sidebar-list"><a href="{{ urlFor("resolution.view") }}">{% trans "Resolutions" %}</a></li>
                        {% endif %}
                    {% endif %}

                    {% if currentUser.routeViewable("/library") or currentUser.routeViewable("/dataset") %}
                        <li class="sidebar-title"><a>{% trans "Library" %}</a></li>
                        {% if currentUser.routeViewable("/library") %}
                        <li class="sidebar-list"><a href="{{ urlFor("library.view") }}">{% trans "Media" %}</a></li>
                        {% endif %}

                        {% if currentUser.routeViewable("/dataset") %}
                        <li class="sidebar-list"><a href="{{ urlFor("dataSet.view") }}">{% trans "DataSets" %}</a></li>
                        {% endif %}
                    {% endif %}

                    {% if currentUser.routeViewable("/display") or currentUser.routeViewable("/displaygroup") or currentUser.routeViewable("/stats") or currentUser.routeViewable("/displayprofile") %}
                        <li class="sidebar-title"><a>{% trans "Displays" %}</a></li>
                        {% if currentUser.routeViewable("/display") %}
                        <li class="sidebar-list"><a href="{{ urlFor("display.view") }}">{% trans "Displays" %}</a></li>
                        {% endif %}

                        {% if currentUser.routeViewable("/displaygroup") %}
                        <li class="sidebar-list"><a href="{{ urlFor("displayGroup.view") }}">{% trans "Display Groups" %}</a></li>
                        {% endif %}

                        {% if currentUser.routeViewable("/stats") %}
                        <li class="sidebar-list"><a href="{{ urlFor("stats.view") }}">{% trans "Statistics" %}</a></li>
                        {% endif %}

                        {% if currentUser.routeViewable("/displayprofile") %}
                        <li class="sidebar-list"><a href="{{ urlFor("displayProfile.view") }}">{% trans "Display Settings" %}</a></li>
                        {% endif %}

                        {% if currentUser.routeViewable("/command") %}
                        <li class="sidebar-list"><a href="{{ urlFor("command.view") }}">{% trans "Commands" %}</a></li>
                        {% endif %}
                    {% endif %}

                    {% if currentUser.routeViewable("/user") or currentUser.routeViewable("/usergroup") or currentUser.routeViewable("/admin") or currentUser.routeViewable("/application") or currentUser.routeViewable("/module") or currentUser.routeViewable("/transition") %}
                        <li class="sidebar-title"><a>{% trans "Administration" %}</a></li>

                        {% if currentUser.routeViewable("/user") %}
                        <li class="sidebar-list"><a href="{{ urlFor("user.view") }}">{% trans "Users" %}</a></li>
                        {% endif %}

                        {% if currentUser.routeViewable("/group") %}
                        <li class="sidebar-list"><a href="{{ urlFor("group.view") }}">{% trans "User Groups" %}</a></li>
                        {% endif %}

                        {% if currentUser.routeViewable("/admin") %}
                        <li class="sidebar-list"><a href="{{ urlFor("admin.view") }}">{% trans "Settings" %}</a></li>
                        {% endif %}

                        {% if currentUser.routeViewable("/application") %}
                        <li class="sidebar-list"><a href="{{ urlFor("application.view") }}">{% trans "Applications" %}</a></li>
                        {% endif %}

                        {% if currentUser.routeViewable("/module") %}
                        <li class="sidebar-list"><a href="{{ urlFor("module.view") }}">{% trans "Modules" %}</a></li>
                        {% endif %}

                        {% if currentUser.routeViewable("/transition") %}
                        <li class="sidebar-list"><a href="{{ urlFor("transition.view") }}">{% trans "Transitions" %}</a></li>
                        {% endif %}
                    {% endif %}

                    {% if currentUser.routeViewable("/log") or currentUser.routeViewable("/sessions") or currentUser.routeViewable("/auditlog") or currentUser.routeViewable("/fault") or currentUser.routeViewable("/help") %}
                        <li class="sidebar-title"><a>{% trans "Advanced" %}</a></li>
                        {% if currentUser.routeViewable("/log") %}
                        <li class="sidebar-list"><a href="{{ urlFor("log.view") }}">{% trans "Log" %}</a></li>
                        {% endif %}

                        {% if currentUser.routeViewable("/sessions") %}
                        <li class="sidebar-list"><a href="{{ urlFor("sessions.view") }}">{% trans "Sessions" %}</a></li>
                        {% endif %}

                        {% if currentUser.routeViewable("/auditlog") %}
                        <li class="sidebar-list"><a href="{{ urlFor("auditLog.view") }}">{% trans "Audit Trail" %}</a></li>
                        {% endif %}

                        {% if currentUser.routeViewable("/fault") %}
                        <li class="sidebar-list"><a href="{{ urlFor("fault.view") }}">{% trans "Report Fault" %}</a></li>
                        {% endif %}

                        {% if currentUser.routeViewable("/help") %}
                        <li class="sidebar-list"><a href="{{ urlFor("help.view") }}">{% trans "Help Links" %}</a></li>
                        {% endif %}
                    {% endif %}
                </ul>

                <div class="sidebar-footer">
                    <div class="col-sm-6">
                        <a class="XiboFormButton" href="{{ urlFor("about") }}" title="{% trans "About the CMS" %}">{% trans "About" %}</a>
                    </div>
                    <div class="col-sm-6">
                        <a href="{{ helpService.address() }}" target="_blank" title="{% trans "Open the Manual in a new Window" %}">{% trans "Manual" %}</a>
                    </div>
                </div>
            </div>
        </div>

        <div id="content-wrapper">
            <div class="page-content">
                <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>
                            <div class="item dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                    <img src="{{ theme.uri("img/avatar.jpg") }}" />
                                </a>
                                <ul class="dropdown-menu dropdown-menu-right">
                                    <li class="dropdown-header">{{ currentUser.userName }}<br/>
                                        <div id="XiboClock">{{ clock }}</div>
                                    </li>
                                    <li class="divider"></li>
                                    <li><a class="XiboFormButton" href="{{ urlFor("user.change.password.form") }}" title="{% trans "Change Password" %}">{% trans "Change Password" %}</a></li>
                                    <li><a href="{{ urlFor("welcome.wizard") }}">{% trans "Reshow welcome" %}</a></li>
                                    <li><a class="XiboHelpButton" href="{{ help.page }}">{% trans "Help" %}</a></li>
                                    <li class="divider"></li>
                                    <li><a title="Logout" href="{{ urlFor("logout") }}">{% trans "Logout" %}</a></li>
                                </ul>
                            </div>
                        </div>
                        {% if currentUser.routeViewable("/drawer") %}
                        <div class="user pull-right">
                            <div class="item dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                    <i class="fa fa-bell"></i> {% if notificationCount > 0 %}<span class="badge red">{{ notificationCount }}</span>{% endif %}
                                </a>
                                <ul class="dropdown-menu dropdown-menu-right notification-drawer">
                                    <li class="dropdown-header">{% trans "Notifications" %}<br/>

                                    </li>
                                    {% if notifications|length > 0 %}
                                    <li class="divider"></li>
                                    {% endif %}
                                    {% for notification in notifications %}
                                    <li>
                                        <div class="notification">
                                            {% if notification.notificationId %}
                                            <a class="XiboFormButton" href="{{ urlFor("notification.show", {id: notification.notificationId}) }}"><span class="{% if notification.read %}notification-unread{% else %}notification-read{% endif %}">{{ notification.subject }} - <span class="notification-date">{{ notification.releaseDt }}</span></span></a>
                                            {% else %}
                                            <span class="fa fa-exclamation-circle"></span> {{ notification.subject }} - <span class="notification-date">{{ notification.releaseDt }}</span>
                                            {% endif %}
                                        </div>
                                    </li>
                                    {% endfor %}

                                    {% if currentUser.routeViewable("/notification") %}
                                    <li class="divider"></li>

                                    <li><a href="{{ urlFor("notification.view") }}">{% trans "Notification Centre" %}</a></li>
                                    {% endif %}
                                </ul>
                            </div>
                        </div>
                        {% endif %}
                    </div>
                </div>
                <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.userOptions %}
        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 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">
                        {{ upload.maxSizeMessage }}
                    </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>
                </div>
            </div>
            {{#if oldMediaId}}
            <div class="row">
                <div class="col-md-6">
                    <label for="updateInLayouts" title="{{ trans.updateInLayouts.helpText }}">
                        <input type="checkbox" id="updateInLayouts" name="updateInLayouts" {{#if updateInAllChecked}}checked{{/if}}>
                        {{ trans.updateInLayouts.title }}
                    </label>
                </div>
                <div class="col-md-6">
                    <label for="deleteOldRevisions" title="{{ trans.deleteOldRevisions.helpText }}">
                        <input type="checkbox" id="deleteOldRevisions" name="deleteOldRevisions" {{#if deleteOldRevisionsChecked}}checked{{/if}}>
                        {{ trans.deleteOldRevisions.title }}
                    </label>
                </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 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">
                {% if (file.error) { %}
                    <div><span class="label label-danger">{%=file.error%}</span></div>
                {% } %}

                {% if (!file.error) { %}
                    <label for="name[]"><input name="name[]" type="text" id="name" value="" /></label>
                {% } %}
            </td>
            <td>
                <p class="size">{%=o.formatFileSize(file.size)%}</p>
                {% if (!o.files.error) { %}
                    <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 (!o.files.error && !i && !o.options.autoUpload) { %}
                    <button class="btn btn-primary start">
                        <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="col-md-4">
                    <span class="btn btn-success fileinput-button">
                        <i class="glyphicon glyphicon-plus glyphicon glyphicon-white"></i>
                        <span>{% trans "Add Background" %}</span> <input type="file" name="files[]">
                    </span>
                </div>
                <div class="col-md-8">
                    <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>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <!-- The table listing the files available for upload/download -->
                    <table role="presentation" class="table table-striped"><tbody class="files"></tbody></table>
                </div>
            </div>
        </form>
    </script>

{% endblock %}