{{!
  Copyright (c) 2016, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.

  WSO2 Inc. licenses this file to you under the Apache License,
  Version 2.0 (the "License"); you may not use this file except
  in compliance with the License.
  You may obtain a copy of the License at

  http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing,
  software distributed under the License is distributed on an
  "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  KIND, either express or implied. See the License for the
  specific language governing permissions and limitations
  under the License.
}}
{{unit "cdmf.unit.lib.editable"}}
{{#zone "content"}}
    {{#if deviceFound}}
        {{#if isAuthorized}}
            {{#defineZone "device-details-header"}}
                <h1 class="page-sub-title device-id device-select" data-deviceid="{{device.deviceIdentifier}}"
                    data-type="{{device.type}}">
                    Device {{device.name}}
                    {{#if device.viewModel.model}}
                        <span class="lbl-device">
                ( {{device.viewModel.vendor}} {{device.viewModel.model}} )
            </span>
                    {{/if}}
                </h1>
            {{/defineZone}}
            <div class="row no-gutter add-padding-5x add-margin-top-5x" style="border: 1px solid #e4e4e4;">
                <div class="media">
                    <div id="device_overview">
                        <div class="media-left media-middle asset-image col-xs-2 col-sm-2 col-md-2 col-lg-2">
                            <div class="thumbnail icon">
                                {{#defineZone "device-thumbnail"}}
                                    <i class="square-element text fw fw-mobile"></i>
                                {{/defineZone}}
                            </div>
                        </div>

                        <div class="media-body asset-desc add-padding-left-5x">
                            {{#defineZone "overview-section"}}
                                <div style="background: #11375B; color: #fff; padding: 10px; margin-bottom: 5px">
                                    Device Overview - {{label}}</div>
                                {{unit "cdmf.unit.device.overview-section" device=device}}
                            {{/defineZone}}
                            {{#defineZone "operation-status"}}{{/defineZone}}
                            {{#defineZone "device-opetations"}}
                                <div style="background: #11375B; color: #fff; padding: 10px; margin-bottom: 5px">
                                    Operations
                                </div>
                                <div class="add-margin-top-4x" style="height: 90px;">
                                    {{unit "cdmf.unit.device.operation-bar" device=device}}
                                </div>
                            {{/defineZone}}
                        </div>
                    </div>
                </div>

                <div class="media tab-responsive">
                    <div class="media-left col-xs-1 col-sm-1 col-md-2 col-lg-2 hidden-xs">
                        <ul class="list-group nav nav-pills nav-stacked" role="tablist">
                            {{#defineZone "device-view-tabs"}}
                                {{#defineZone "device-details-tab"}}
                                    <li role="presentation" class="list-group-item active">
                                        <a href="#device_details_tab" role="tab" data-toggle="tab"
                                           aria-controls="device_details_tab">
                                            <i class="icon fw fw-mobile"></i><span class="hidden-sm">Device Details</span>
                                        </a>
                                    </li>
                                {{/defineZone}}
                                {{#defineZone "device-details-tab-injected"}}
                                {{/defineZone}}
                                {{#defineZone "device-details-tab-operations"}}
                                    <li role="presentation" class="list-group-item">
                                        <a href="#event_log_tab" role="tab" data-toggle="tab" aria-controls="event_log_tab">
                                            <i class="icon fw fw-text"></i><span class="hidden-sm">Operations Log</span>
                                        </a>
                                    </li>
                                {{/defineZone}}
                            {{/defineZone}}
                        </ul>
                    </div>
                    <div class="media-body add-padding-left-5x remove-padding-xs">
                        <div class="panel-group tab-content remove-padding" id="tabs" role="tablist"
                             data-status="{{device.isNotRemoved}}" aria-multiselectable="true">
                            <div class="arrow-left hidden-xs"></div>

                            {{#defineZone "device-view-tab-contents"}}
                                {{#defineZone "device-details-tab-contents"}}
                                    <div class="message message-info">
                                        <h4 class="remove-margin">
                                            <i class="icon fw fw-info"></i>
                                            No Device details avaialbe yet.
                                        </h4>
                                    </div>
                                {{/defineZone}}

                                {{#defineZone "device-view-tab-injected-conents"}}
                                {{/defineZone}}

                                {{#defineZone "device-view-tab-operations-log-conents"}}
                                    <div class="panel panel-default visible-xs-block" role="tabpanel" id="event_log_tab">
                                        <div class="panel-heading visible-xs collapsed" id="event_log">
                                            <h4 class="panel-title">
                                                <a role="button" data-toggle="collapse" data-parent="#tabs"
                                                   href="#collapseFive" aria-expanded="true" aria-controls="collapseFive">
                                                    <i class="fw fw-text fw-2x"></i>
                                                    Operations Log
                                                    <i class="caret-updown fw fw-down"></i>
                                                </a>
                                            </h4>
                                        </div>
                                        <div class="panel-heading display-none-xs">
                                            Operations Log
                                        <span>
                            <a href="javascript:void(0);" id="refresh-operations">
                                <i class="fw fw-refresh"></i>
                            </a>
                        </span>
                                        </div>
                                        <div id="collapseFive" class="panel-collapse collapse in" role="tabpanel"
                                             aria-labelledby="event_log">
                                            <div class="panel-body">
                                            <span class="visible-xs add-padding-2x text-right">
                                                <a href="javascript:void(0);" id="refresh-operations">
                                                    <i class="fw fw-refresh"></i>
                                                </a>
                                            </span>
                                                <div id="operations-spinner" class="wr-advance-operations-init hidden">
                                                    <i class="fw fw-settings fw-spin fw-2x"></i> Loading Operations Log...
                                                </div>
                                                <div id="operations-log-container">
                                                    <div class="message message-info">
                                                        <h4 class="remove-margin">
                                                            <i class="icon fw fw-info"></i>
                                                            There are no operations, performed yet on this device.
                                                        </h4>
                                                    </div>
                                                </div>
                                                <table class="table table-striped table-hover table-bordered display data-table"
                                                       id="operations-log-table">
                                                    <thead>
                                                    <tr class="sort-row">
                                                        <th>Operation Code</th>
                                                        <th>Status</th>
                                                        <th>Request created at</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                {{/defineZone}}
                            {{/defineZone}}

                        </div>
                    </div>
                </div>
            </div>
        {{else}}
            <h1 class="page-sub-title">
                Permission Denied
            </h1>
            <br>
            You are not authorized to view specified device in the system.
        {{/if}}
    {{else}}
        <h1 class="page-sub-title">
            Device not found
        </h1>
        </h1>
        <br>
        You have tried to access either a removed or non-existing device.
    {{/if}}
{{/zone}}
{{#zone "bottomJs"}}
    {{js "js/device-view.js"}}
    <script id="policy-view" src="{{@unit.publicUri}}/templates/policy-compliance.hbs"
            data-device-id="{{device.deviceIdentifier}}" data-device-type="{{device.type}}"
            type="text/x-handlebars-template"></script>
    <script id="policy-list" src="{{@unit.publicUri}}/templates/policy-list.hbs"
            data-device-id="{{device.deviceIdentifier}}" data-device-type="{{device.type}}"
            type="text/x-handlebars-template"></script>
    <script id="applications-list" src="{{@unit.publicUri}}/templates/applications-list.hbs"
            data-device-id="{{device.deviceIdentifier}}" data-device-type="{{device.type}}"
            type="text/x-handlebars-template"></script>
{{/zone}}