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

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

        {{#zone "device-thumbnail"}}
          <i class="fw fw-android device-type fw-2x"></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.android.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}}%</span></p>
              {{/if}}
              {{#if device.internalMemory}}
                <p><i class="icon fw fw-hdd fw-2x fw-rotate-90"></i> <span>{{device.internalMemory.usage}}</span>
                  <span class="memory-amt">GB/{{device.internalMemory.total}}GB</span></p>
              {{/if}}
              {{#if device.externalMemory}}
                <p><i class="icon fw fw-usb-drive fw-2x"></i> <span>{{device.externalMemory.usage}}</span>
                  <span class="memory-amt">GB/{{device.externalMemory.total}}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="#app">Applications</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="app" class="tab-pane fade">
              <div id="applications-list-container" data-public-uri="{{@unit.publicUri}}">
              </div>
            </div>
            <div id="policy" class="tab-pane fade">
              <div id="policy-list-container">
              </div>
            </div>
            <div class="panel panel-default visible-xs-block" role="tabpanel"
                 id="policy_compliance_tab">
                <div class="panel-heading visible-xs collapsed" id="policy_compliance">
                    <h4 class="panel-title">
                        <a role="button"
                           data-toggle="collapse" data-parent="#tabs" href="#collapseTwo"
                           aria-expanded="true" aria-controls="collapseTwo">
                            <i class="fw fw-policy fw-2x"></i>
                            Policy Compliance
                            <i class="caret-updown fw fw-down"></i>
                        </a>
                    </h4>
                </div>
                <div class="panel-heading display-none-xs">
                    Policy Compliance

                    <span>
                            <a href="javascript:void(0);" id="refresh-policy">
                                <i class="fw fw-refresh"></i>
                            </a>
                        </span>
                </div>
                <div id="collapseTwo" class="panel-collapse collapse in" role="tabpanel"
                     aria-labelledby="policy_compliance">
                    <div class="panel-body ">
                            <span class="visible-xs add-padding-2x text-right">
                                <a href="javascript:void(0);" id="refresh-policy">
                                    <i class="fw fw-refresh"></i>
                                </a>
                            </span>
                        <div id="policy-spinner"
                             class="wr-advance-operations-init add-padding-bottom-2x add-padding-bottom-4x hidden">
                            <i class="fw fw-settings fw-spin fw-2x"></i>Loading Policy
                            Compliance...
                        </div>
                        <div id="policy-list-container">
                        </div>
                    </div>
                </div>
            </div>

            <div class="panel panel-default visible-xs-block" role="tabpanel"
                 id="device_location_tab">
                <div class="panel-heading visible-xs collapsed" id="device_location">
                    <h4 class="panel-title">
                        <a role="button" data-toggle="collapse" data-parent="#tabs"
                           href="#collapseThree" aria-expanded="true" aria-controls="collapseThree">
                            <i class="fw fw-map-location fw-2x"></i>
                            Device Location
                            <i class="caret-updown fw fw-down"></i>
                        </a>
                    </h4>
                </div>
                <div class="panel-heading display-none-xs">
                    Device Location
                    <span>
                        <a href="javascript:void(0);" id="refresh-location">
                            <i class="fw fw-refresh"></i>
                        </a>
                    </span>
                    <div id="map-spinner" class="wr-advance-operations-init hidden">
                        <i class="fw fw-settings fw-spin fw-2x"></i> Fetching the latest location...
                    </div>
                </div>
                <div id="collapseThree" class="panel-collapse collapse in" role="tabpanel"
                     aria-labelledby="device_location">
                    <div class="panel-body">
                        {{#if device.location}}
                            {{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>
            </div>

            <div class="panel panel-default visible-xs-block" role="tabpanel"
                 id="installed_applications_tab">
                <div class="panel-heading visible-xs collapsed" id="installed_applications">
                    <h4 class="panel-title">
                        <a role="button" data-toggle="collapse" data-parent="#tabs"
                           href="#collapseFour" aria-expanded="true" aria-controls="collapseFour">
                            <i class="fw fw-application fw-2x"></i>
                            Installed Applications
                            <i class="caret-updown fw fw-down"></i>
                        </a>
                    </h4>
                </div>
                <div class="panel-heading display-none-xs">
                    Installed Applications

                    <span>
                            <a href="javascript:void(0);" id="refresh-apps">
                                <i class="fw fw-refresh"></i>
                            </a>
                        </span>
                </div>
                <div id="collapseFour" class="panel-collapse collapse in" role="tabpanel"
                     aria-labelledby="installed_applications">
                    <div class="panel-body">
                            <span class="visible-xs add-padding-2x text-right">
                                <a href="javascript:void(0);" id="refresh-apps">
                                    <i class="fw fw-refresh"></i>
                                </a>
                            </span>
                        <div id="apps-spinner" class="wr-advance-operations-init hidden">
                            <i class="fw fw-settings fw-spin fw-2x"></i> Loading Applications
                            List...
                        </div>
                        <div id="applications-list-container">
                            <div class="message message-info">
                                <h4>
                                    <i class="icon fw fw-info"></i>
                                    No applications found.
                                </h4>
                                <p>Please try refreshing in a while.</p>
                            </div>
                        </div>
                    </div>
                </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>
        <!--suppress HtmlUnknownTarget -->
        <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>
        <!--suppress HtmlUnknownTarget -->
        {{js "js/device-detail.js"}}
    {{/if}}
{{/zone}}
