{{#zone "device-opetations"}}
    <div style="background: #11375B; color: #fff; padding: 10px; margin-bottom: 5px">
        Operations
    </div>
    <div class="add-margin-top-4x">
        {{unit "mdm.unit.device.operation-bar"}}
    </div>
{{/zone}}

{{#zone "device-detail-properties"}}
    <div class="media">
        <div class="media-left col-xs-12 col-sm-2 col-md-2 col-lg-2">
            <ul class="list-group" role="tablist">
                <li class="active"><a class="list-group-item"
                                      href="#device_details"
                                      role="tab" data-toggle="tab"
                                      aria-controls="device_details">Device
                                                                     Details</a>
                </li>
                <li><a class="list-group-item" href="#policies"
                       role="tab"
                       data-toggle="tab" aria-controls="policies">Policies</a>
                </li>
                <li><a class="list-group-item" href="#policy_compliance"
                       role="tab"
                       data-toggle="tab" aria-controls="policy_compliance">Policy
                                                                           Compliance</a>
                </li>
                <li><a class="list-group-item" href="#device_location"
                       role="tab"
                       data-toggle="tab" aria-controls="device_location">Device
                                                                         Location</a>
                </li>

                <li><a class="list-group-item" href="#installed_applications" role="tab"
                       data-toggle="tab" aria-controls="installed_applications">Installed
                                                                                Applications</a>
                </li>
                <li><a class="list-group-item" href="#event_log" role="tab"
                       data-toggle="tab" aria-controls="event_log">Operations
                                                                   Log</a></li>
            </ul>
        </div>
        <div class="media-body add-padding-left-5x remove-padding-xs tab-content">
            <div class="panel-group tab-content">

                <div class="panel panel-default tab-pane active"
                     id="device_details" role="tabpanel"
                     aria-labelledby="device_details">
                    {{unit "cdmf.unit.device.details" device=device}}
                </div>
                <div class="panel panel-default tab-pane" id="policies" role="tabpanel"
                     aria-labelledby="policies">
                    <div class="panel-heading">Policies</div>
                    <div class="panel-body">
                        <div id="policy-spinner" class="wr-advance-operations-init hidden">
                            <br>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <i class="fw fw-settings fw-spin fw-2x"></i>
                            &nbsp;&nbsp;&nbsp;
                            Loading Policies . . .
                            <br>
                            <br>
                        </div>
                        <div id="policy-list-container">
                            <div class="panel-body">
                                No policies found
                            </div>
                            <br class="c-both"/>
                        </div>
                    </div>
                    <a class="padding-left"
                       href="{{@app.context}}/policy/add/{{device.type}}?deviceId={{device.deviceIdentifier}}">
                                        <span class="fw-stack">
                                            <i class="fw fw-ring fw-stack-2x"></i>
                                            <i class="fw fw-policy fw-stack-1x"></i>
                                        </span> Add device specific policy</a>
                </div>
                <div class="panel panel-default tab-pane" id="policy_compliance"
                     role="tabpanel" aria-labelledby="policy_compliance">
                    <div class="panel-heading">Policy Compliance <span><a
                            href="#" id="refresh-policy"><i
                            class="fw fw-refresh"></i></a></span></div>
                    <div class="panel-body">
                        <div id="policy-spinner"
                             class="wr-advance-operations-init hidden">
                            <br>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <i class="fw fw-settings fw-spin fw-2x"></i>
                            &nbsp;&nbsp;&nbsp;
                            Loading Policy Compliance . . .
                            <br>
                            <br>
                        </div>
                        <div id="policy-list-container">
                            <div class="panel-body">
                                Not available yet
                            </div>
                            <br class="c-both"/>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default tab-pane" id="device_location"
                     role="tabpanel" aria-labelledby="device_location">
                    <div class="panel-heading">Device Location</div>
                    <div class="panel-body">
                        <div id="device-location"
                             data-lat="{{device.viewModel.location.latitude}}"
                             data-long="{{device.viewModel.location.longitude}}"
                             style="height:450px" class="panel-body">
                        </div>
                        <div id="map-error" class="panel-body">
                            Not available yet
                        </div>
                        <br class="c-both"/>
                    </div>
                </div>
                <div class="panel panel-default tab-pane" id="installed_applications"
                     role="tabpanel" aria-labelledby="installed_applications">
                    <div class="panel-heading">Installed Applications <span><a href="#"
                                                                               id="refresh-apps"><i
                            class="fw fw-refresh"></i></a></span></div>
                    <div class="panel-body">
                        <div id="apps-spinner" class="wr-advance-operations-init hidden">
                            <br>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <i class="fw fw-settings fw-spin fw-2x"></i>
                            &nbsp;&nbsp;&nbsp;
                            Loading App List . . .
                            <br>
                            <br>
                        </div>
                        <div id="applications-list-container">
                            <div class="panel-body">
                                Not available yet
                            </div>
                            <br class="c-both"/>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default tab-pane" id="event_log"
                     role="tabpanel" aria-labelledby="event_log">
                    <div class="panel-heading">Operations Log <span><a href="#"
                                                                       id="refresh-operations"><i
                            class="fw fw-refresh"></i></a></span></div>
                    <div class="panel-body">
                        <div id="operations-spinner"
                             class="wr-advance-operations-init hidden">
                            <br>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <i class="fw fw-settings fw-spin fw-2x"></i>
                            &nbsp;&nbsp;&nbsp;
                            Loading Operations Log . . .
                            <br>
                            <br>
                        </div>
                        <div id="operations-log-container">
                            <div class="panel-body">
                                Not available yet
                            </div>
                            <br class="c-both"/>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{{/zone}}

{{#zone "bottomJs"}}
    {{js "js/device-detail.js"}}
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
    {{js "js/load-map.js"}}
{{/zone}}