{{!
  Copyright (c) 2016, 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.
}}
<span id="platform" class="hidden" data-platform="{{type.name}}" data-platform-id="{{type.id}}"></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" data-step="policy-platform">
                    <div class="wiz-no">1</div>
                    <div class="wiz-lbl hidden-xs"><span>Select a platform</span></div>
                </div>
                <br class="c-both"/>
            </div>
            <div class="col-md-3 col-xs-3">
                <div class="itm-wiz itm-wiz-current" data-step="policy-profile">
                    <div class="wiz-no">2</div>
                    <div class="wiz-lbl hidden-xs"><span>Configure 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">3</div>
                    <div class="wiz-lbl hidden-xs"><span>Assign to 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">4</div>
                    <div class="wiz-lbl hidden-xs"><span>Publish 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 creation is
                                                                                 successful.</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">
                    &nbsp;&nbsp;&nbsp;&nbsp;View policy list&nbsp;&nbsp;&nbsp;&nbsp;
                </button>
                <a href="{{@app.context}}/policy/add" class="cu-btn-inner">
                        <span class="fw-stack">
                            <i class="fw fw-ring 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">ADD 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 4: Publish 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>
                                <label class="wr-input-label">Set a Name to your Policy*</label>
                                <br/>
                                <label class="wr-input-label">
                                    (Policy name should be 1-to-30 characters long)
                                </label>
                                <div id="plicynameField" class="form-group wr-input-control">
                                    <div class="cus-col-50">
                                        <input id="policy-name-input" class="form-control" type="text" value=""/>
                                    </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="[ Summary about the policy ]"></textarea>
                                    </div>
                                    <br class="c-both"/>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="wr-input-control wr-btn-grp">
                            <a href="javascript:void(0)" class="wr-btn wizard-stepper"
                               data-is-back-btn="true" data-current="policy-naming"
                               data-next="policy-criteria">
                                Back
                            </a>
                            <a href="javascript:void(0)" class="wr-btn wizard-stepper"
                               data-current="policy-naming-publish" data-next="policy-message"
                               data-validate="true">
                                Save & Publish
                            </a>
                            <a href="javascript:void(0)" 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">ADD 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 3: Assign to 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>
                            <label class="wr-input-label">
                                Set device ownership type
                            </label>

                            <div class="wr-input-control">
                                <div class="cus-col-50">
                                    <select id="ownership-input" class="form-control">
                                        <option value="ANY" selected>ANY</option>
                                        <option value="BYOD">BYOD (Bring Your Own Device)</option>
                                        <option value="COPE">COPE (Corporate-Owned, Personally
                                                             Enabled)
                                        </option>
                                    </select>
                                </div>
                                <br class="c-both"/>
                            </div>
                            <div class="wr-input-control">
                                <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">&nbsp;Set user role(s)</span>
                                </label>
                                <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">&nbsp;Set user(s)</span>
                                </label>
                            </div>
                            <div id="user-roles-select-field" class="select-users">
                                <div class="wr-input-control">
                                    <div class="cus-col-50">
                                        <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>
                            <div id="users-select-field" class="select-users">
                                <div class="wr-input-control">
                                    <div class="cus-col-50">
                                        <select id="users-input" class="form-control select2"
                                                multiple="multiple">
                                        </select>
                                    </div>
                                    <br class="c-both"/>
                                </div>
                            </div>
                            <br>
                            <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 data-action="enforce" selected>Enforce</option>
                                        <option data-action="warn">Warn</option>
                                        <option data-action="monitor">Monitor</option>
                                    </select>
                                </div>
                                <br class="c-both"/>
                            </div>
                        </div>
                        <div class="wr-input-control wr-btn-grp">
                            <a href="javascript:void(0)" class="wr-btn wizard-stepper"
                               data-is-back-btn="true" data-current="policy-criteria"
                               data-next="policy-profile">
                                &nbsp;&nbsp;&nbsp;&nbsp;Back&nbsp;&nbsp;&nbsp;&nbsp;
                            </a>
                            <a href="javascript:void(0)" class="wr-btn wizard-stepper"
                               data-current="policy-criteria" data-next="policy-naming"
                               data-validate="false">
                                &nbsp;&nbsp;&nbsp;&nbsp;Continue&nbsp;&nbsp;&nbsp;&nbsp;
                            </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">ADD 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 2: Configure 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>
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <i class="fw fw-settings fw-spin fw-2x"></i>
                                &nbsp;&nbsp;&nbsp;
                                Loading platform features . . .
                                <br>
                                <br>
                            </div>
                        </div>
                        <div class="wr-input-control wr-btn-grp">
                            <a href="javascript:window.history.back()"
                               class="wr-btn wizard-stepper" data-is-back-btn="true"
                               data-current="policy-profile" data-next="policy-platform">
                                &nbsp;&nbsp;&nbsp;&nbsp;Back&nbsp;&nbsp;&nbsp;&nbsp;
                            </a>
                            <a href="javascript:void(0)" class="wr-btn wizard-stepper"
                               data-current="policy-profile" data-next="policy-criteria"
                               data-validate="true">
                                &nbsp;&nbsp;&nbsp;&nbsp;Continue&nbsp;&nbsp;&nbsp;&nbsp;
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- content -->

    </div>
</div>
{{#zone "bottomJs"}}
    <script id="hidden-operations-ios" src="{{@unit.publicUri}}/templates/hidden-operations-ios.hbs"
            type="text/x-handlebars-template"></script>
    <script id="hidden-operations-android"
            src="{{@unit.publicUri}}/templates/hidden-operations-android.hbs"
            type="text/x-handlebars-template"></script>
    <script id="hidden-operations-windows"
            src="{{@unit.publicUri}}/templates/hidden-operations-windows.hbs"
            type="text/x-handlebars-template"></script>
    {{js "js/policy-create.js"}}
{{/zone}}