{{unit "cdmf.unit.lib.editable"}}
{{unit "cdmf.unit.lib.qrcode"}}
{{unit "cdmf.unit.device.type.qr-modal"}}

{{#if deviceFound}}
    {{#if isAuthorized}}

        {{#zone "device-thumbnail"}}
          <i class="fw fw-windows device-type fw-1x"></i>
        {{/zone}}

        {{#zone "device-details-header"}}
            <h1 class="device-id"
            data-deviceid="{{device.deviceIdentifier}}"
            data-type="{{device.type}}"
            data-ownership="{{device.ownership}}"
            data-owner="{{device.owner}}"
            data-status="{{device.status}}">
            {{device.owner}}'s {{device.name}}
              <a id="device-info-tooltip" href="#" data-toggle="tooltip" title="Device Identifier: {{device.deviceIdentifier}}
              Firmware Build Date: {{device.osBuildDate}}
              UDID: {{device.udid}}">
                <i class="fw fw-info"></i>
              </a>
            </h1>
            {{#if device.model}}
              <h4>{{device.vendor}} {{device.model}}</h4>
            {{/if}}
            <h4>Ownership - <strong>{{device.ownership}}</strong></h4>
            <h4>Device is
              <strong>
                {{#equal device.status "ACTIVE"}}Active{{/equal}}
                {{#equal device.status "INACTIVE"}}Inactive{{/equal}}
                {{#equal device.status "BLOCKED"}}Blocked{{/equal}}
                {{#equal device.status "REMOVED"}}Removed{{/equal}}
                {{#equal device.status "UNREACHABLE"}}Unreachable{{/equal}}
              </strong>
            </h4>
        {{/zone}}

        {{#zone "device-opetations"}}
            {{#if device.isNotRemoved}}
                <div class="operation-container">
                  <div class="operation-title">
                      <h4>Device Operations</h4>
                  </div>
                  {{unit "cdmf.unit.device.type.windows.new.operation-bar" device=device
                  backendApiUri=backendApiUri autoCompleteParams=autoCompleteParams}}
                </div>
            {{/if}}
        {{/zone}}

        {{#zone "device-details"}}
          <div class="vital-strip">
            {{#if device.deviceInfoAvailable}}
              {{#if device.BatteryLevel}}
                <p><i class="icon fw fw-battery fw-2x"></i> <span>{{device.BatteryLevel.value}}%</span></p>
              {{/if}}
              {{#if device.ramUsage}}
                <p><i class="icon fw fw-hardware fw-2x fw-rotate-90"></i> <span>{{device.ramUsage.value}} MB</span></p>
              {{/if}}
              {{#if device.internalMemory}}
                <p><i class="icon fw fw-hdd fw-2x fw-rotate-90"></i> <span>{{device.internalMemory.value}} GB</span>
                </p>
              {{/if}}
            {{else}}
              <p>Battery, RAM and Storage related information are not
              available yet.</p>
            {{/if}}
        </div>
        {{/zone}}

        {{#zone "device-details-tab-injected"}}
            <li><a data-toggle="tab" href="#location"
                   data-lat="{{device.location.latitude}}"
                   data-long="{{device.location.longitude}}"
                   class="initGeoLocationLink">Location</a></li>
            <li><a data-toggle="tab" href="#policy">Policy Compliance</a></li>
        {{/zone}}

        {{#zone "device-view-tab-injected-conents"}}
            <div id="location" class="tab-pane fade ">
                {{#if device.location}}
                    <div class="tab-actions">
                        <div class="action-btn-container" id="location-action-bar">
                        </div>
                    </div>
                    <br/>
                    {{unit "cdmf.unit.geo-dashboard" device=device noGeoFencing=false hideSearch=true}}
                {{else}}
                    <div id="map-error" class="message message-warning">
                        <h4 class="remove-margin">
                            <i class="icon fw fw-warning"></i>
                            Device location information is not available.
                        </h4>
                    </div>
                    <p class="add-padding-5x"></p>
                    <p class="add-padding-5x"></p>
                    <p class="add-padding-5x"></p>
                {{/if}}
            </div>
            <div id="policy" class="tab-pane fade">
              <div id="policy-list-container">
              </div>
            </div>

        {{/zone}}

        </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>
    <br>
    You have tried to access either a removed or non-existing device.
{{/if}}

{{#zone "bottomJs"}}
    {{#if isAuthorized}}
        <!--suppress HtmlUnknownTarget -->
        <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>
        {{js "js/device-detail.js"}}
    {{/if}}
{{/zone}}
