{{#zone "content"}}
    {{#if isAuthorized }}
        <span id="logged-in-user" class="hidden" data-username="{{user.username}}" data-domain="{{user.domain}}"
              data-tenant-id="{{user.tenantId}}"></span>
        <span id="policy-operations" class="hidden" data-template="{{policyOperations.template}}"
              data-script="{{policyOperations.script}}" data-style="{{policyOperations.style}}"></span>
        <div class="row">
            <div class="col-md-12">

                <div class="wr-steps hidden">
                    <div class="col-md-3 col-xs-3">
                        <div class="itm-wiz itm-wiz-current" data-step="policy-profile">
                            <div class="wiz-no">1</div>
                            <div class="wiz-lbl hidden-xs"><span>Edit current profile</span></div>
                        </div>
                        <br class="c-both"/>
                    </div>
                    <div class="col-md-3 col-xs-3">
                        <div class="itm-wiz" data-step="policy-criteria">
                            <div class="wiz-no">2</div>
                            <div class="wiz-lbl hidden-xs"><span>Edit assignment groups</span></div>
                        </div>
                        <br class="c-both"/>
                    </div>
                    <div class="col-md-3 col-xs-3">
                        <div class="itm-wiz" data-step="policy-naming">
                            <div class="wiz-no">3</div>
                            <div class="wiz-lbl hidden-xs"><span>Republish to devices</span></div>
                        </div>
                        <br class="c-both"/>
                    </div>
                </div>

                <div class="col-centered wr-content policy-message hidden">
                    <div class="wr-form">
                        <h1 id="policy-message-page-wizard-title" class="page-sub-title">Policy is successfully
                            re-configured.</h1>
                        <br>Please click <b>"Add Another Policy"</b>, if you wish to add another policy or click
                        <b>"View policy list"</b> to complete the process and go back to the policy list.
                        <hr>
                        <button class="wr-btn wizard-stepper" data-current="policy-message"
                                data-direct="{{@app.context}}/policies/">
                            View policy list
                        </button>
                        <a href="{{@app.context}}/policies/add" class="cu-btn-inner">
                        <span class="fw-stack">
                            <i class="fw fw-circle-outline fw-stack-2x"></i>
                            <i class="fw fw-add fw-stack-1x"></i>
                        </span>
                            Add another policy
                        </a>
                    </div>
                </div>

                <div class="col-centered wr-content policy-naming hidden">
                    <div class="wr-form">
                        <h1 id="policy-naming-page-wizard-title" class="page-sub-title">EDIT POLICY</h1>
                        <hr>
                        <div id="policy-naming-wizard-steps" class="row wr-wizard"></div>
                        <hr>
                        <div class="row">
                            <div class="col-lg-12">
                                <h4 class="visible-xs">Step 3: Republish to devices</h4>
                                <br>
                                <div id="policy-naming-main-error-msg" class="alert alert-danger hidden" role="alert">
                                    <i class="icon fw fw-error"></i><span></span>
                                </div>
                                <div class="clearfix">
                                    <label class="wr-input-label">
                                        Set a name * to your policy<br>
                                        ( should be 1-to-30 characters long )
                                    </label>
                                    <div id="policy-name-field" class="form-group wr-input-control">
                                        <div class="cus-col-50">
                                            <input id="policy-name-input" class="form-control" type="text" value=""
                                                   placeholder="[ Required field ]"/>
                                        </div>
                                        <br class="c-both"/>
                                        <span class=" nameError hidden glyphicon glyphicon-remove form-control-feedback"></span>
                                        <label class="error nameEmpty hidden" for="summary">Policy name is required &
                                            Should be be 1-to-30 characters long.</label>
                                    </div>
                                    <label class="wr-input-label">
                                        Add a description
                                    </label>
                                    <div class="wr-input-control">
                                        <div class="cus-col-50">
                                            <textarea id="policy-description-input" class="form-control" rows="10"
                                                      placeholder="[ Optional field ]"></textarea>
                                        </div>
                                        <br class="c-both"/>
                                    </div>
                                </div>
                                <div class="wr-input-control wr-btn-grp">
                                    <a href="#" class="wr-btn wizard-stepper" data-is-back-btn="true"
                                       data-current="policy-naming" data-next="policy-criteria">
                                        Back
                                    </a>
                                    <a href="#" class="wr-btn wizard-stepper" data-current="policy-naming-publish"
                                       data-next="policy-message" data-validate="true">
                                        Save & Publish
                                    </a>
                                    <a href="#" class="wr-btn wizard-stepper" data-current="policy-naming"
                                       data-next="policy-message" data-validate="true">
                                        Save
                                    </a>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-centered wr-content policy-criteria hidden">
                    <div class="wr-form">
                        <h1 id="policy-criteria-page-wizard-title" class="page-sub-title">EDIT POLICY</h1>
                        <hr>
                        <div id="policy-criteria-wizard-steps" class="row wr-wizard"></div>
                        <hr>
                        <div class="row">
                            <div class="col-lg-12">
                                <h4 class="visible-xs">Step 2: Edit assignment groups</h4>
                                <br>
                                <div id="policy-criteria-main-error-msg" class="alert alert-danger hidden" role="alert">
                                    <i class="icon fw fw-error"></i><span></span>
                                </div>
                                <div>
                                    <div class="wr-input-control">
                                        {{#if isAuthorizedViewRoles}}
                                            <label class="wr-input-control radio light">
                                                <input id="user-roles-radio-btn" type="radio"
                                                       name="select-users-radio-btn"
                                                       class="select-users-radio" checked/>
                                                <span class="helper">Set user role(s)</span>
                                            </label>
                                        {{/if}}
                                        {{#if isAuthorizedViewUsers}}
                                            <label class="wr-input-control radio light" rel="assetfilter">
                                                <input id="users-radio-btn" type="radio" name="select-users-radio-btn"
                                                       class="select-users-radio"/>
                                                <span class="helper">Set user(s)</span>
                                            </label>
                                        {{/if}}
                                    </div>
                                    {{#if isAuthorizedViewRoles}}
                                        <div id="user-roles-select-field" class="select-users">
                                            <div class="wr-input-control">
                                                <div class="cus-col-50">
                                                    <!--suppress HtmlFormInputWithoutLabel -->
                                                    <select id="user-roles-input" class="form-control select2"
                                                            multiple="multiple">
                                                        <option value="ANY" selected>ANY</option>
                                                        {{#each roles}}
                                                            <option>{{this}}</option>
                                                        {{/each}}
                                                    </select>
                                                </div>
                                                <br class="c-both"/>
                                            </div>
                                        </div>
                                    {{/if}}
                                    {{#if isAuthorizedViewUsers}}
                                        <div id="users-select-field" class="select-users">
                                            <div class="wr-input-control">
                                                <div class="cus-col-50">
                                                    <!--suppress HtmlFormInputWithoutLabel -->
                                                    <select id="users-input" class="form-control select2"
                                                            multiple="multiple">
                                                    </select>
                                                </div>
                                                <br class="c-both"/>
                                            </div>
                                        </div>
                                    {{/if}}
                                    {{#if isAuthorizedViewGroups}}
                                        <label class="wr-input-label">
                                            Select Groups
                                        </label>
                                        <div id="groups-select-field" class="select-users">
                                            <div class="wr-input-control">
                                                <div class="cus-col-50">
                                                    <!--suppress HtmlFormInputWithoutLabel -->
                                                    <select id="groups-input" class="form-control select2"
                                                            multiple="multiple">
                                                        <option value="NONE" selected>NONE</option>
                                                        {{#each groups}}
                                                            <option>{{this.name}}</option>
                                                        {{/each}}
                                                    </select>
                                                </div>
                                                <br class="c-both"/>
                                            </div>
                                        </div>
                                    {{/if}}
                                    <label class="wr-input-label" title="">
                                        Set an action upon non-compliance
                                    </label>
                                    <div class="wr-input-control">
                                        <div class="cus-col-50">
                                            <select id="action-input" class="form-control">
                                                <option value="enforce" data-action="enforce" selected>Enforce</option>
                                                <option value="warn" data-action="warn">Warn</option>
                                                <option value="monitor" data-action="monitor">Monitor</option>
                                            </select>
                                        </div>
                                        <br class="c-both"/>
                                    </div>
                                </div>
                                <div class="wr-input-control wr-btn-grp">
                                    <a href="#" class="wr-btn wizard-stepper" data-is-back-btn="true"
                                       data-current="policy-criteria" data-next="policy-profile">
                                        Back
                                    </a>
                                    <a href="#" class="wr-btn wizard-stepper" data-current="policy-criteria"
                                       data-next="policy-naming" data-validate="true">
                                        Continue
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-centered wr-content policy-profile">
                    <div class="wr-form">
                        <h1 id="policy-profile-page-wizard-title" class="page-sub-title">EDIT POLICY</h1>
                        <hr>
                        <div id="policy-profile-wizard-steps" class="row wr-wizard"></div>
                        <hr>
                        <div class="row">
                            <div class="col-lg-12">
                                <h4 class="visible-xs">Step 1: Edit current profile</h4>
                                <br>
                                <div id="policy-profile-main-error-msg" class="alert alert-danger hidden" role="alert">
                                    <i class="icon fw fw-error"></i><span></span>
                                </div>
                                <div class="wr-advance-operations">
                                    <div class='wr-advance-operations-init'>
                                        <br/>
                                        <i class='fw fw-settings fw-spin fw-2x'></i>
                                        Loading Platform Features . . .
                                        <br/>
                                        <br/>
                                    </div>
                                    <div id="device-type-policy-operations" class="hidden">
                                    </div>
                                    <div id="generic-policy-operations" class="hidden">
                                        {{unit "cdmf.unit.device.type.generic.policy-edit"}}
                                    </div>
                                </div>
                                <div class="wr-input-control wr-btn-grp">
                                    <a href="#" class="wr-btn wizard-stepper" data-current="policy-profile"
                                       data-next="policy-criteria" data-validate="true">
                                        Continue
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- content -->

            </div>
        </div>
    {{else}}
        <h1 class="page-sub-title">
            Permission Denied
        </h1>
        <br>
        You not authorized to enter Policy Management Section.
        <br>
    {{/if}}
{{/zone}}
{{#zone "bottomJs"}}
    {{js "js/policy-edit.js"}}
{{/zone}}
