{{!
  Copyright (c) 2018, 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.ui.title" pageTitle="Device Management"}}

{{unit "cdmf.unit.data-tables-extended"}}
{{unit "cdmf.unit.lib.ui-permissions-utility"}}

{{#zone "breadcrumbs"}}
    <li>
        <a href="{{@app.context}}/">
            <i class="icon fw fw-home"></i>
        </a>
    </li>
    <li>
        <a href="{{@app.context}}/devices">
            DEP Devices
        </a>
    </li>
{{/zone}}

{{#zone "navbarActions"}}
    <li>
        <a href="javascript:void(0)" class="trigger-sync cu-btn">
        <span class="icon fw-stack">
            <i class="fw fw-sync fw-stack-1x"></i>
            <i class="fw fw-circle-outline fw-stack-2x"></i>
        </span>
            Sync Devices
        </a>
    </li>
    <li>
        <a href="javascript:void(0)" class="add-profile cu-btn">
        <span class="icon fw-stack">
            <i class="fw fw-add fw-stack-1x"></i>
            <i class="fw fw-circle-outline fw-stack-2x"></i>
        </span>
            Create Profile
        </a>
    </li>
{{/zone}}

{{#zone "content"}}

    <span id="logged-in-user" class="hidden" data-username="{{@user.username}}" data-domain="{{@user.domain}}"
          data-tenant-id="{{@user.tenantId}}" data-iscloud="{{isCloud}}"
          data-isDeviceOwnerEnabled="{{isDeviceOwnerEnabled}}"></span>

    <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#devices">Devices</a></li>
        <li><a data-toggle="tab" href="#profiles">Profiles</a></li>
    </ul>

    <div class="tab-content">
        <div id="devices" class="tab-pane fade in active">
            <div class="wr-device-list row">
                <div class="wr-hidden-operations wr-advance-operations"></div>
                <div class="col-md-12 wr-page-content">
                    <div>
                        <span id="permission" data-permission="{{permissions.list}}"></span>
                        <div id="loading-content" class="col-centered">
                            <i class="fw fw-wso2-logo fw-pulse fw-2x"></i>
                            Loading devices . . .
                            <br>
                        </div>
                        <div id="device-listing-status" class="raw hidden">
                            <ul style="list-style-type: none;">
                                <li class="message message-info">
                                    <h4>
                                        <i class="icon fw fw-info"></i>
                                        <a id="device-listing-status-msg"></a>
                                    </h4>
                                </li>
                            </ul>
                        </div>
                        <div id="device-table">
                            <table class="table table-striped table-hover list-table display responsive nowrap data-table grid-view hidden sorting-enabled"
                                   id="device-grid">
                                <thead>
                                <tr class="sort-row">
                                    <th class="no-sort"></th>
                                    <th class="no-sort"></th>
                                    <th>By Model</th>
                                    <th>By Username</th>
                                    <th>By Status</th>
                                    <th>By Login Required</th>
                                    <th>By Agent Required</th>
                                    <th class="no-sort"></th>
                                </tr>
                                <tr class="filter-row filter-box">
                                    <th class="no-sort"></th>
                                    <th class="no-sort"></th>
                                    <th data-for="By Model" class="text-filter"></th>
                                    <th data-for="By Username" class="text-filter"></th>
                                    <th data-for="By Status" class="select-filter data-dep-status"></th>
                                    <th data-for="By Login Required" class="select-filter data-boolean"></th>
                                    <th data-for="By Agent Required" class="select-filter data-boolean"></th>
                                    <th class="no-sort"></th>
                                </tr>
                                <tr class="bulk-action-row hidden">
                                    <th colspan="8">
                                        <ul class="tiles">
                                            <li>
                                                <a href="#" style="width: 100px;height: 80px;;"
                                                   data-click-event="remove-form"
                                                   class="btn square-element add-devices-to-user-link"
                                                   data-toggle="modal" data-target="#modalDemo">
                                                        <span class="fw-stack fw-lg">
                                                            <i class="fw fw-circle-outline fw-stack-2x"></i>
                                                            <i class="fw fw-user fw-stack-1x"></i>
                                                            <span class="fw-stack fw-move-right fw-move-bottom">
                                                            <i class="fw fw-circle fw-stack-2x"></i>
                                                            <i class="fw fw-edit fw-stack-1x fw-inverse"></i>
                                                            </span>
                                                        </span><br/>
                                                    Edit Enrollment
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#" style="width: 100px;height: 80px;;"
                                                   data-click-event="remove-form"
                                                   class="btn square-element add-devices-to-profile-link"
                                                   data-toggle="modal" data-target="#modalDemo">
                                                    <span class="icon fw-stack">
                                                        <i class="fw fw-circle-outline fw-stack-2x"></i>
                                                            <i class="fw fw-document fw-stack-1x"></i>
                                                    </span>
                                                    Assign DEP Profile
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#" style="width: 100px;height: 80px;;"
                                                   data-click-event="remove-form"
                                                   class="btn square-element remove-devices-to-profile-link"
                                                   data-toggle="modal" data-target="#modalDemo">
                                                    <span class="fw-stack fw-lg">
                                                    <i class="fw fw-circle-outline fw-stack-2x"></i>
                                                    <i class="fw fw-document fw-stack-1x"></i>
                                                    <span class="fw-stack fw-move-right fw-move-bottom">
                                                      <i class="fw fw-circle fw-stack-2x"></i>
                                                      <i class="fw fw-minus fw-stack-1x fw-inverse"></i>
                                                    </span></span>
                                                    Remove DEP Profile
                                                </a>
                                            </li>
                                        </ul>
                                    </th>
                                </tr>
                                </thead>
                                <tbody id="ast-container">
                                <br class="c-both" />
                                </tbody>
                            </table>
                            <div id="empty-ast-container" class="ast-container list-view" style="display: none">
                                <div class="ctrl-info-panel col-centered text-center wr-login">
                                    <h3 class="text-muted">
                                        <i class="fw fw-devices fw-3x"></i>
                                    </h3>
                                    <h3 class="text-muted">
                                        You don't have any DEP devices. Try syncing devices!
                                    </h3>
                                    <h3>
                                        <!--suppress HtmlUnknownTarget -->
                                        <a href="javascript:void(0)"
                                           class="btn-operations btn-default trigger-sync">
                                                        <span class="fw-stack">
                                                            <i class="fw fw-circle-outline fw-stack-2x"></i>
                                                            <i class="fw fw-sync fw-stack-1x"></i>
                                                        </span>
                                            Sync Devices
                                        </a>
                                    </h3>
                                </div>
                            </div>
                        </div>
                        <br class="c-both" />
                        <div id="content-filter-types" style="display: none">
                            <div class="sort-title">Sort By</div>
                            <div class="sort-options">
                                <a href="#">By Serial<span class="ico-sort-asc"></span></a>
                                <a href="#">By Model</a>
                                <a href="#">By Username</a>
                                <a href="#">By Status</a>
                                <a href="#">By Login Required</a>
                                <a href="#">By Agent Required</a>
                            </div>
                        </div>

                        <div id="device-info-modal-content" class="hide">
                            <div class="modal-header">
                                <h3 class="pull-left modal-title">
                            <span>
                                <span class="fw-stack">
                                    <i class="fw fw-circle-outline fw-stack-2x"></i>
                                    <i class="fw fw-user fw-stack-1x"></i>
                                </span>DEP Device Information
                            </span>
                                </h3>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i
                                        class="fw fw-cancel"></i></button>
                            </div>
                            <div class="modal-body add-margin-top-2x add-margin-bottom-2x">
                                <div id="notification-error-msg" class="alert alert-danger hidden" role="alert">
                                    <i class="icon fw fw-error"></i><span></span>
                                </div>
                                <div>
                                    <form role="form">
                                        <div class="form-group">
                                            <label for="view-serial">Device Serial</label>
                                            <input id="view-serial" type="text" class="form-control"
                                                   disabled="disabled" />
                                        </div>
                                        <div class="form-group">
                                            <label for="view-model">Device Model</label>
                                            <input id="view-model" type="text" class="form-control"
                                                   disabled="disabled" />
                                        </div>
                                        <div class="form-group">
                                            <label for="view-user">Assigned Username</label>
                                            <input id="view-user" type="text" class="form-control"
                                                   disabled="disabled" />
                                        </div>
                                        <div class="form-group">
                                            <label for="view-profile">Device Profile</label>
                                            <input id="view-profile" type="text" class="form-control"
                                                   disabled="disabled" />
                                        </div>
                                        <div class="form-group">
                                            <label for="view-status">Status</label>
                                            <input id="view-status" type="text" class="form-control"
                                                   disabled="disabled" />
                                        </div>
                                        <div class="form-group">
                                            <label class="wr-input-control checkbox">
                                                <input type="checkbox" id="view-login-required"
                                                       class="form-control child-input" disabled="disabled" />
                                                <span class="helper" title=""></span>
                                            </label>
                                            <label for="view-login-required">Login Required</label>
                                        </div>
                                        <div class="form-group">
                                            <label class="wr-input-control checkbox">
                                                <input type="checkbox" id="view-agent-required"
                                                       class="form-control child-input" disabled="disabled" />
                                                <span class="helper" title=""></span>
                                            </label>
                                            <label for="view-agent-required">Agent Install Required</label>
                                        </div>
                                    </form>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <div class="buttons">
                                    <a href="#" id="group-device-cancel-link" class="btn-operations btn-default">
                                        Hide
                                    </a>
                                </div>
                            </div>
                        </div>

                        <div id="user-device-modal-content" class="hide">
                            <div class="modal-header">
                                <h3 class="pull-left modal-title">
                                <span class="fw-stack">
                                    <i class="fw fw-circle-outline fw-stack-2x"></i>
                                    <i class="fw fw-user fw-stack-1x"></i>
                                </span>Edit Enrollment Configuration
                                    </span>
                                </h3>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i
                                        class="fw fw-cancel"></i></button>
                            </div>
                            <div class="modal-body add-margin-top-2x add-margin-bottom-2x">
                                <div id="notification-error-msg" class="alert alert-danger hidden" role="alert">
                                    <i class="icon fw fw-error"></i><span></span>
                                </div>
                                <div id="user-groups">
                                    <form role="form">
                                        <div class="form-group">
                                            <label for="username">Assigned User's Username</label>
                                            <input id="username" type="text" class="form-control"
                                                   placeholder="Type username here..." />
                                        </div>
                                        <div class="form-group">
                                            <label class="wr-input-control checkbox">
                                                <input type="checkbox" id="isLoginRequired"
                                                       class="form-control child-input" />
                                                <span class="helper" title=""></span>
                                            </label>
                                            <label for="isLoginRequired">Login Required</label>
                                        </div>
                                        <div class="form-group">
                                            <label class="wr-input-control checkbox">
                                                <input type="checkbox" id="isAgentRequired"
                                                       class="form-control child-input" />
                                                <span class="helper" title=""></span>
                                            </label>
                                            <label for="isAgentRequired">Agent Install Required</label>
                                        </div>
                                    </form>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <div class="buttons">
                                    <a href="javascript:void(0)" id="user-add-link" class="btn-operations">
                                        Save
                                    </a>
                                    <a href="#" id="group-device-cancel-link" class="btn-operations btn-default">
                                        Cancel
                                    </a>
                                </div>
                            </div>
                        </div>

                        <div id="user-associate-device-200-content" class="hide">
                            <div class="modal-content">
                                <div class="row">
                                    <div class="col-md-6 col-centered">
                                        <h3>Successfully added the device/s to the user!</h3>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div id="profile-device-modal-content" class="hide">
                            <div class="modal-header">
                                <h3 class="pull-left modal-title">
                            <span>
                                <span class="fw-stack">
                                    <i class="fw fw-circle-outline fw-stack-2x"></i>
                                    <i class="fw fw-document fw-stack-1x"></i>
                                </span>Assign Device
                            </span>
                                </h3>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i
                                        class="fw fw-cancel"></i></button>
                            </div>
                            <div class="modal-body add-margin-top-2x add-margin-bottom-2x">
                                <div id="notification-error-msg" class="alert alert-danger hidden" role="alert">
                                    <i class="icon fw fw-error"></i><span></span>
                                </div>
                                <div id="profile-details">
                                    <form role="form">
                                        <div class="form-group">
                                            <label for="profile-uuid">DEP Profile UUID</label>
                                            <input id="profile-uuid" type="text" class="form-control"
                                                   placeholder="Type DEP profile UUID here..." />
                                        </div>
                                    </form>
                                </div>
                                <div id="profile-to-device">
                                    <form role="form">
                                        <div class="form-group">
                                            <label for="device-serial">Device Serials(comma separated)</label>
                                            <input id="device-serial" type="text" class="form-control"
                                                   placeholder="Type device serials here..." />
                                        </div>
                                    </form>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <div class="buttons">
                                    <a href="javascript:void(0)" id="profile-device-assign-link" class="btn-operations">
                                        Assign device
                                    </a>
                                    <a href="#" id="profile-device-cancel-link" class="btn-operations btn-default">
                                        Cancel
                                    </a>
                                </div>
                            </div>
                        </div>

                        <div id="profile-associate-device-200-content" class="hide">
                            <div class="modal-header">
                                <h3 class="pull-left modal-title">
                                    Successfully assigned.
                                </h3>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i
                                        class="fw fw-cancel"></i>
                                </button>
                            </div>
                            <div class="modal-body add-margin-top-2x add-margin-bottom-2x">

                            </div>
                            <div class="modal-footer">
                                <div class="buttons">
                                    <a href="javascript:hidePopup()" class="btn-operations">Ok</a>
                                </div>
                            </div>
                        </div>

                        <div id="edit-device-modal-content" class="hide">
                            <div class="modal-header">
                                <h3 class="pull-left modal-title">
                                    Please enter a new name for the device.
                                </h3>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i
                                        class="fw fw-cancel"></i>
                                </button>
                            </div>
                            <div class="modal-body add-margin-top-2x add-margin-bottom-2x">
                                <input id="edit-device-name" style="color:#3f3f3f;padding:5px" type="text"
                                       value=""
                                       placeholder="Type here" size="60">
                            </div>
                            <div class="modal-footer">
                                <div class="buttons">
                                    <a href="#" id="edit-device-yes-link" class="btn-operations">
                                        Rename
                                    </a>

                                    <a href="#" id="edit-device-cancel-link" class="btn-operations">
                                        Cancel
                                    </a>
                                </div>
                            </div>
                        </div>

                        <div id="device-400-content" class="hide">
                            <div class="modal-content">
                                <div class="row">
                                    <div class="col-md-offset-2 col-md-8 col-centered">
                                        <h3>Exception at backend. Try Later.</h3>
                                        <br />
                                        <div class="buttons">
                                            <a href="#" id="device-400-link" class="btn-operations">
                                                Ok
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div id="device-403-content" class="hide">
                            <div class="modal-content">
                                <div class="row">
                                    <div class="col-md-offset-2 col-md-8 col-centered">
                                        <h3>Operation not permitted.</h3>
                                        <br />
                                        <div class="buttons">
                                            <a href="#" id="device-403-link" class="btn-operations">
                                                Ok
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div id="device-409-content" class="hide">
                            <div class="modal-content">
                                <div class="row">
                                    <div class="col-md-offset-2 col-md-8 col-centered">
                                        <h3>Device does not exist.</h3>
                                        <br />
                                        <div class="buttons">
                                            <a href="#" id="remove-device-409-link"
                                               class="btn-operations">
                                                Ok
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div id="no-device-selected" class="hide">
                            <div class="modal-content">
                                <div class="row">
                                    <div class="col-md-offset-2 col-md-8 col-centered">
                                        <h3>Please select one or more devices in order to perform this
                                            operation.</h3>
                                        <br />
                                        <div class="buttons">
                                            <a href="#" id="no-device-selected-link"
                                               class="btn-operations">
                                                Ok
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="profiles" class="tab-pane fade">
            <div class="wr-profile-list row">
                <div class="wr-hidden-operations wr-advance-operations"></div>
                <div class="col-md-12 wr-page-content">
                    <div>
                        <span id="permission" data-permission="{{permissions.list}}"></span>
                        <div id="loading-profiles" class="col-centered">
                            <i class="fw fw-wso2-logo fw-pulse fw-2x"></i>
                            Loading profiles . . .
                            <br>
                        </div>
                        <div id="profile-listing-status" class="raw hidden">
                            <ul style="list-style-type: none;">
                                <li class="message message-info">
                                    <h4>
                                        <i class="icon fw fw-info"></i>
                                        <a id="profile-listing-status-msg"></a>
                                    </h4>
                                </li>
                            </ul>
                        </div>
                        <div id="profile-table">
                            <table class="table table-striped table-hover list-table display responsive nowrap data-table grid-view hidden un-selectable"
                                   id="profile-grid">
                                <thead>
                                <tr class="sort-row">
                                    <th class="no-sort"></th>
                                    <th class="no-sort"></th>
                                    <th>By UUID</th>
                                    <th>By Department</th>
                                    <th>By Removable</th>
                                    <th>By Mandatory</th>
                                    <th class="no-sort"></th>
                                </tr>
                                <tr class="filter-row filter-box">
                                    <th class="no-sort"></th>
                                    <th class="no-sort"></th>
                                    <th data-for="By UUID" class="text-filter"></th>
                                    <th data-for="By Department" class="text-filter"></th>
                                    <th data-for="By Removable" class="select-filter data-boolean"></th>
                                    <th data-for="By Mandatory" class="select-filter data-boolean"></th>
                                    <th class="no-sort"></th>
                                </tr>
                                </thead>
                                <tbody id="ast-container">
                                <br class="c-both" />
                                </tbody>
                            </table>
                        </div>
                        <br class="c-both" />
                        <div id="content-filter-types" style="display: none">
                            <div class="sort-title">Sort By</div>
                            <div class="sort-options">
                                <a href="#">By Profile Name<span class="ico-sort-asc"></span></a>
                                <a href="#">By UUID</a>
                                <a href="#">By Department</a>
                                <a href="#">By Removable</a>
                                <a href="#">By Mandatory</a>
                            </div>
                        </div>
                        <div id="profile-ast-container" class="ast-container list-view" style="display: none">
                            <div class="ctrl-info-panel col-centered text-center wr-login">
                                <h3 class="text-muted">
                                    <i class="fw fw-devices fw-3x"></i>
                                </h3>
                                <h3 class="text-muted">
                                    You don't have any DEP profiles. Let's create a DEP profile!
                                </h3>
                                <h3>
                                    <!--suppress HtmlUnknownTarget -->
                                    <a href="javascript:void(0)" class="btn-operations btn-default add-profile">
                                        <span class="fw-stack">
                                            <i class="fw fw-circle-outline fw-stack-2x"></i>
                                            <i class="fw fw-add fw-stack-1x"></i>
                                        </span>
                                        Create New Profile
                                    </a>
                                </h3>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="add-profile-window" class="hide">
            <input type="hidden" id="user" value=" {{@user.username}} ">
            <div class="modal-header">
                <h4 class="pull-left modal-title">
                            <span class="fw-stack">
                                <i class="fw fw-document fw-stack-2x document-icon-black"></i>
                                <span class="fw-stack fw-move-right fw-move-bottom">
                                  <i class="fw fw-circle-outline fw-stack-2x"></i>
                                  <i class="fw fw-circle fw-stack-2x fw-stroke text-info"></i>
                                  <i class="fw fw-edit fw-stack-1x fw-inverse"></i>
                               </span>
                            </span>
                    Create new Profile
                </h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i
                        class="fw fw-cancel"></i></button>
            </div>
            <hr>
            <div class="modal-body add-margin-top-2x add-margin-bottom-2x">
                <div id="add-profile-error-msg" class="alert alert-danger hidden" role="alert">
                    <i class="icon fw fw-error"></i><span></span>
                </div>
                <h5>
                    Enter profile name (mandatory)
                    <br><br>
                    <div>
                        <input id="profile-name" type="text" autocomplete="off"
                               class="form-control modal-input" />
                    </div>
                    <br><br>

                    Enter profile URL (mandatory)
                    <br><br>
                    <div><input id="url" type="text" autocomplete="off" class="form-control modal-input" />
                    </div>
                    <br>

                    <div class="form-group">
                        <label class="wr-input-control checkbox">
                            <input type="checkbox" id="is-supervised"
                                   class="form-control child-input" />
                            <span class="helper" title=""></span>
                        </label>
                        Is Supervised
                    </div>
                    <br>

                    <div class="form-group">
                        <label class="wr-input-control checkbox">
                            <input type="checkbox" id="mdm-removable"
                                   class="form-control child-input" />
                            <span class="helper" title=""></span>
                        </label>
                        Is MDM removable
                    </div>
                    <br>

                    <div class="form-group">
                        <label class="wr-input-control checkbox">
                            <input type="checkbox" id="is-mandatory"
                                   class="form-control child-input" />
                            <span class="helper" title=""></span>
                        </label>
                        Is mandatory
                    </div>
                    <br>

                    Department
                    <br><br>
                    <div>
                        <input id="department" type="text" autocomplete="off"
                               class="form-control modal-input" />
                    </div>
                    <br><br>

                    Support phone number
                    <br><br>
                    <div>
                        <input id="sup-phone" type="text" autocomplete="off"
                               class="form-control modal-input" />
                    </div>
                    <br><br>

                    Support email address
                    <br><br>
                    <div>
                        <input id="sup-email" type="text" autocomplete="off"
                               class="form-control modal-input" />
                    </div>
                    <br><br>

                    <!--TODO: fix UI jumping issues-->
                    Anchor certs
                    <br><br>
                    <div>
                        <textarea rows="4" cols="10" id="anchor-certs"></textarea>
                    </div>
                    <br><br>

                    <div class="form-group">
                        <label class="wr-input-control checkbox">
                            <input type="checkbox" id="skip"
                                   class="form-control child-input" />
                            <span class="helper" title=""></span>
                        </label>
                        Skip setup iteams
                    </div>

                    <div style="padding-left: 30px">
                        <div class="form-group">
                            <label class="wr-input-control checkbox">
                                <input type="checkbox" id="id-check"
                                       class="form-control child-input subOption" />
                                <span class="helper" title=""></span>
                            </label>
                            Apple ID
                        </div>

                        <div class="form-group">
                            <label class="wr-input-control checkbox">
                                <input type="checkbox" id="biometric-check"
                                       class="form-control child-input subOption" />
                                <span class="helper" title=""></span>
                            </label>
                            Biometric
                        </div>

                        <div class="form-group">
                            <label class="wr-input-control checkbox">
                                <input type="checkbox" id="diagnostic-check"
                                       class="form-control child-input subOption" />
                                <span class="helper" title=""></span>
                            </label>
                            Diagnostics
                        </div>

                        <div class="form-group">
                            <label class="wr-input-control checkbox">
                                <input type="checkbox" id="display-tone-check"
                                       class="form-control child-input subOption" />
                                <span class="helper" title=""></span>
                            </label>
                            Display Tone
                        </div>

                        <div class="form-group">
                            <label class="wr-input-control checkbox">
                                <input type="checkbox" id="location-check"
                                       class="form-control child-input subOption" />
                                <span class="helper" title=""></span>
                            </label>
                            Location
                        </div>

                        <div class="form-group">
                            <label class="wr-input-control checkbox">
                                <input type="checkbox" id="passcode-check"
                                       class="form-control child-input subOption" />
                                <span class="helper" title=""></span>
                            </label>
                            Passcode
                        </div>

                        <div class="form-group">
                            <label class="wr-input-control checkbox">
                                <input type="checkbox" id="payment-check"
                                       class="form-control child-input subOption" />
                                <span class="helper" title=""></span>
                            </label>
                            Payment
                        </div>

                        <div class="form-group">
                            <label class="wr-input-control checkbox">
                                <input type="checkbox" id="privacy-check"
                                       class="form-control child-input subOption" />
                                <span class="helper" title=""></span>
                            </label>
                            Privacy
                        </div>

                        <div class="form-group">
                            <label class="wr-input-control checkbox">
                                <input type="checkbox" id="restore-check"
                                       class="form-control child-input subOption" />
                                <span class="helper" title=""></span>
                            </label>
                            Restore
                        </div>

                        <div class="form-group">
                            <label class="wr-input-control checkbox">
                                <input type="checkbox" id="siri-check"
                                       class="form-control child-input subOption" />
                                <span class="helper" title=""></span>
                            </label>
                            SIRI
                        </div>

                        <div class="form-group">
                            <label class="wr-input-control checkbox">
                                <input type="checkbox" id="tos-check"
                                       class="form-control child-input subOption" />
                                <span class="helper" title=""></span>
                            </label>
                            Terms of Service
                        </div>

                        <div class="form-group">
                            <label class="wr-input-control checkbox">
                                <input type="checkbox" id="zoom-check"
                                       class="form-control child-input subOption" />
                                <span class="helper" title=""></span>
                            </label>
                            Zoom
                        </div>

                        <div class="form-group">
                            <label class="wr-input-control checkbox">
                                <input type="checkbox" id="move-check"
                                       class="form-control child-input subOption" />
                                <span class="helper" title=""></span>
                            </label>
                            Move from Android
                        </div>

                        <div class="form-group">
                            <label class="wr-input-control checkbox">
                                <input type="checkbox" id="homeSensitivity-check"
                                       class="form-control child-input subOption" />
                                <span class="helper" title=""></span>
                            </label>
                            Home Button Sensitivity
                        </div>

                        <div class="form-group">
                            <label class="wr-input-control checkbox">
                                <input type="checkbox" id="watchMigration-check"
                                       class="form-control child-input subOption" />
                                <span class="helper" title=""></span>
                            </label>
                            Watch Migration
                        </div>
                    </div>
                    <br><br>
                </h5>
            </div>
            <div class="modal-footer">
                <div class="buttons">
                    <a href="#" id="add-profile-link" class="btn-operations">Add</a>
                    <a href="#" id="cancel-link" class="btn-operations">Cancel</a>
                </div>
            </div>
        </div>

        <div id="remove-profile-modal-content" class="hide">
            <div class="modal-header">
                <h3 class="pull-left modal-title">
                    Do you really want to remove this DEP profile from your Devices?
                </h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i
                        class="fw fw-cancel"></i>
                </button>
            </div>
            <div class="modal-body add-margin-top-2x add-margin-bottom-2x">

            </div>
            <div class="modal-footer">
                <div class="buttons">
                    <a href="#" id="remove-profile-yes-link" class="btn-operations">
                        Yes
                    </a>

                    <a href="#" id="remove-profile-cancel-link" class="btn-operations">
                        Cancel
                    </a>
                </div>
            </div>
        </div>

        <div id="remove-profile-200-content" class="hide">
            <div class="modal-header">
                <h3 class="pull-left modal-title">
                    Successfully removed.
                </h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i
                        class="fw fw-cancel"></i>
                </button>
            </div>
            <div class="modal-body add-margin-top-2x add-margin-bottom-2x">

            </div>
            <div class="modal-footer">
                <div class="buttons">
                    <a href="javascript:hidePopup()" class="btn-operations">Ok</a>
                </div>
            </div>
        </div>

        <div id="add-profile-success-content" class="hide">
            <div class="modal-header">
                <h4 class="pull-left modal-title">
                            <span class="fw-stack fw-move-right fw-move-bottom">
                                <i class="fw fw-circle fw-stack-2x fw-stroke text-success"></i>
                                <i class="fw fw-check fw-stack-1x fw-inverse"></i>
                            </span>
                    Profile has been added Successfully
                </h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i
                        class="fw fw-cancel"></i></button>
            </div>
            <hr>
            <div class="modal-body add-margin-top-2x add-margin-bottom-2x">
                <h5 class="text-center">
                    You can now refresh to see the new Policy in the listing
                </h5>
            </div>
            <div class="modal-footer">
                <div class="buttons">
                    <a href="#" id="add-profile-success-link" class="btn-operations">Ok</a>
                </div>
            </div>
        </div>

        <div id="edit-profile-success-content" class="hide">
            <div class="modal-header">
                <h4 class="pull-left modal-title">
                            <span class="fw-stack fw-move-right fw-move-bottom">
                                <i class="fw fw-circle fw-stack-2x fw-stroke text-success"></i>
                                <i class="fw fw-check fw-stack-1x fw-inverse"></i>
                            </span>
                    Profile has been updated Successfully
                </h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i
                        class="fw fw-cancel"></i></button>
            </div>
            <div class="modal-footer">
                <div class="buttons">
                    <a href="#" id="add-profile-success-link" class="btn-operations">Ok</a>
                </div>
            </div>
        </div>

        <div id="sync-devices-window" class="hide">
            <div class="modal-header">
                <h4 class="pull-left modal-title">
                            <span class="fw-stack fw-move-right fw-move-bottom">
                                <i class="fw fw-circle fw-stack-2x fw-stroke text-success"></i>
                                <i class="fw fw-sync fw-stack-1x fw-inverse"></i>
                            </span>
                    Sync with DEP Server
                </h4>
            </div>
            <hr>
            <div class="modal-body add-margin-top-2x add-margin-bottom-2x">
                <h4 class="text-center">
                    <div id="sync-state-text">Devices are currently syncing with DEP server...</div>
                    <br><br>
                    <div id="sync-state-image"><i class="fw fw-sync fw-spin fw-3x"></i></div>
                </h4>
            </div>
            <div class="modal-footer">
            </div>
        </div>

        <div id="sync-devices-window-success" class="hide">
            <div class="modal-header">
                </h4>
            </div>
            <div class="modal-body add-margin-top-2x add-margin-bottom-2x">
                <h4 class="text-center">
                    Sync Complete
                    <br><br>
                    <i class="fw fw-success fw-3x"></i>
                </h4>
            </div>
            <div class="modal-footer">
            </div>
        </div>

        <div id="sync-devices-window-error" class="hide">
            <div class="modal-header">
                </h4>
            </div>
            <div class="modal-body add-margin-top-2x add-margin-bottom-2x">
                <h4 class="text-center">
                    Sync Failure
                    <br><br>
                    <i class="fw fw-alert fw-3x"></i>
                </h4>
            </div>
            <div class="modal-footer">
            </div>
        </div>
    </div>

{{/zone}}

{{#zone "bottomJs"}}
    <script id="device-listing" data-server-url="{{serverUrl}}" data-current-user="{{@user.username}}"
            data-device-types="{{deviceTypes}}"
            data-portal-url="{{portalUrl}}" data-user-domain="{{userDomain}}"
            type="text/x-handlebars-template"></script>
    {{js "js/listing.js"}}
{{/zone}}

{{#zone "topCss"}}
    <style>
        .select2-dropdown {
            z-index: 999999999;
        }

        .wr-input-control {
            color: black;
        }

        .select2-selection__choice {
            font-size: medium;
        }

        form .form-group label {
            color: whitesmoke;
        }
    </style>
{{/zone}}
