{{unit "cdmf.unit.ui.title" pageTitle="Group Management"}}
{{unit "cdmf.unit.ui.modal"}}

{{#zone "breadcrumbs"}}
    <li>
        <a href="{{@app.context}}/">
            <i class="icon fw fw-home"></i>
        </a>
    </li>
    <li>
        <a href="{{@app.context}}/groups">
            Groups
        </a>
    </li>
    <li>
        <a href="{{@app.context}}/group/add">
            Add
        </a>
    </li>
{{/zone}}

{{#zone "content"}}
    <div class="container container-bg  white-bg">
        <div class="col-md-12 col-lg-6 col-centered wr-content wr-login col-centered sign-panel" id="group-create-form">

            <p class="page-sub-title">Add New Group</p>

            <p>Create new device group on
                {{#if isCloud}}
                    Device Cloud
                {{else}}
                    IoT Server
                {{/if}}
                .
            </p>

            <!-- validation -->
            <span class="wr-validation-summary hidden center-block col-centered">
		    <strong class="label label-danger col-centered"></strong>
		</span>

            <hr/>
            <div class="form-login-box" >
                <label class="wr-input-label" title="{{groupNameHelpMsg}}">Group Name
                    <span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
                </label>

                <div class="form-group wr-input-control">
                    <input type="text right" id="name" placeholder="Group Name" data-regex="{{groupNameJSRegEx}}"
                           data-errormsg="{{groupNameRegExViolationErrorMsg}}" class="form-control">
                    <span class="groupNameError hidden glyphicon glyphicon-remove form-control-feedback"></span>
                    <label class="error groupNameEmpty hidden" for="summary"></label>
                </div>

                <label class="wr-input-label">Description</label>

                <div class="wr-input-control">
                    <input type="text right" id="description" placeholder="Description">
                </div>

                <div class="wr-input-control">
                    <button class="wr-btn" id="add-group-btn">
                        Add
                    </button>
                    <button class="wr-btn" onclick="window.location = '{{@app.context}}/groups';return false;">
                        Cancel
                    </button>
                </div>
            </div>
        </div>

        <div id="group-created-msg" class="container col-centered wr-content hidden">
            <div class="wr-form">
                <p class="page-sub-title">Group was created successfully.</p>

                <br>Please click <b>"Add Another Group"</b>, if you wish to add another group or click
                <b>"View Group List"</b> to complete the process and go back to the group list.
                <hr/>
                <button class="wr-btn" onclick="window.location.href='{{@app.context}}/groups'">View Group List
                </button>
                <a href="{{@app.context}}/group/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 Group
                </a>
            </div>
        </div>

    </div>
{{/zone}}
{{#zone "bottomJs"}}
    {{js "js/group-add.js"}}
{{/zone}}
