<div id="errorOperations" class="operation">
    <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-error fw-stack-1x"></i>
            </span>
            Operation cannot be performed !
        </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">
        <h4>
            Please select a device or a list of devices to perform an operation.
        </h4>
    </div>
    <div class="modal-footer">
        <div class="buttons">
            <a href="javascript:hidePopup()" class="btn-operations">Ok</a>
        </div>
    </div>
</div>
<div id="errorOperationUnexpected" class="operation">
    <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-error fw-stack-1x"></i>
            </span>
            Operation cannot be performed !
        </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">
        <h4>
            Unexpected error occurred. Please Try again later.
        </h4>
    </div>
    <div class="modal-footer">
        <div class="buttons">
            <a href="javascript:hidePopup()" class="btn-operations">Ok</a>
        </div>
    </div>
</div>
<div id="operationSuccess" class="operation">
    <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-check fw-stack-1x"></i>
            </span>
            Operation queued successfully !
        </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">
        <h4>
            Operation has been queued successfully to be sent to the device.
        </h4>
    </div>
    <div class="modal-footer">
        <div class="buttons">
            <a href="javascript:hidePopup()" class="btn-operations">Ok</a>
        </div>
    </div>
</div>

<div id="messageSuccess" class="operation">
    <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-check fw-stack-1x"></i>
                    </span>
            Message sent successfully !
        </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">
        <h4>Message has been queued to be sent to the device.</h4>
    </div>
    <div class="modal-footer">
        <div class="buttons">
            <a href="javascript:hidePopup()" class="btn-operations">Ok</a>
        </div>
    </div>
</div>
{{#each features}}
    <a href="javascript:operationSelect('{{code}}')" title="{{description}}">
        <i class="fw {{icon}}"></i>
        <span>{{name}}</span>
    </a>
    <div class="operation" data-operation-code="{{code}}">

        <div class="modal-content clearfix">
            <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 {{icon}} fw-stack-1x"></i>
                    </span>
                    {{name}}
                    <br>
                </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">
                <h4>
                    {{#equal code "WIPE_DATA"}}
                        {{#equal deviceType "android"}}
                            {{#equal ownership "BYOD"}}
                                Enter PIN code* of the device
                                <br><br>
                                <div>
                                    <input id="pin" type="password"
                                        class="form-control modal-input operationDataKeys"
                                            placeholder="[ Required for a BYOD device ]" data-key="pin" />
                                </div>
                            {{/equal}}
                        {{/equal}}
                    {{/equal}}
                    {{#equal code "NOTIFICATION"}}
                        Type your message below.
                        <br><br>
                        <div id="notification-error-msg" class="alert alert-danger hidden" role="alert">
                            <i class="icon fw fw-error"></i><span></span>
                        </div>
                        <div class="form-group">
                            <input class="form-control modal-input operationDataKeys"
                                   id="messageTitle" data-key="messageTitle"  placeholder="Title here..." />
                        </div>
                        <div class="form-group">
                                <textarea class="form-control modal-input operationDataKeys"
                                          id="messageText" data-key="messageText" placeholder="Message here..."></textarea>
                        </div>
                        <br>
                    {{/equal}}
                    {{#equal code "CHANGE_LOCK_CODE"}}
                        Type new lock-code below.
                        <br><br>
                        <input type="password" class="form-control modal-input operationDataKeys" id="lockcode"
                               data-key="lockCode" placeholder="Enter Lockcode"/>
                        <br>
                    {{/equal}}
                    {{#equal code "DEVICE_LOCK"}}
                        {{#equal deviceType "android"}}
                            {{#equal ownership "COPE"}}
                                <label class="wr-input-control checkbox">
                                    <input id="hard-lock" type="checkbox" class="form-control operationDataKeys"
                                           data-key="hard-lock"/>
                                    <span class="helper" title="Once it enables, device will be blocked permanently.">
                                            &nbsp;&nbsp;&nbsp;Enable Permanent Lock
                                        <span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
                                        </span>
                                </label>
                                <br><br>
                            {{/equal}}
                            Type your message to be shown in the lock screen
                            <br><br>
                            <div>
                                <textarea id="lock-message" class="form-control modal-input operationDataKeys"
                                    data-key="lock-message" placeholder="[ Message content is optional ]"></textarea>
                            </div>
                        {{/equal}}
                    {{/equal}}
                    {{#equal code "UPGRADE_FIRMWARE"}}
                        {{#equal deviceType "android"}}
                            Enter firmware upgrade scheduling information.
                            <br><br>
                            <label class="wr-input-control checkbox">
                                <input id="instant-upgrade" type="checkbox" class="form-control operationDataKeys"
                                       data-key="instant-upgrade"/>
                                    <span class="helper"
                                          title="Once enabled, device firmware upgrade process will start instantly.">
                                            &nbsp;&nbsp;&nbsp;Instant Upgrade
                                        <span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
                                        </span>
                            </label>
                            <br><br>
                            <div class='input-group date' id='dateTimePicker'>
                                Enter the date and time to schedule firmware upgrade.
                                <br><br>
                                <div id="firmware-error-msg" class="alert alert-danger hidden" role="alert">
                                    <i class="icon fw fw-error"></i><span></span>
                                </div>
                                <input type='text' class="form-control modal-input operationDataKeys"
                                       style="z-index : 900;" name="daterange" id="schedule" data-key="schedule"/>
                            </div>
                            <br><br>
                            <div class='wr-input-control' id='firmwareServerInfo'>
                                Enter firmware upgrade server URL (ie. http://abc.com or http://abc.com/ota)
                                (Optional).
                                <br><br>
                                <input type='text' class="form-control modal-input operationDataKeys" id="server"
                                       data-key="server"/>
                            </div>
                            <script type="text/javascript">
                                $(function () {
                                    $('.modalpopup-bg').css('z-index', '1000');
                                    $('.modalpopup-container').css('z-index', '1200');

                                    $('input[name="daterange"]').daterangepicker({
                                        singleDatePicker: true,
                                        timePicker: true,
                                        showDropdowns: true,
                                        timePickerIncrement: 1,
                                        locale: {
                                            format: 'MM-DD-YYYY hh:mm a'
                                        }
                                    });
                                });
                                $('#instant-upgrade').change(function () {
                                    if ($(this).is(":checked")) {
                                        $('#dateTimePicker').addClass("hidden");
                                        $("#schedule").val('');

                                    } else {
                                        $('#dateTimePicker').removeClass("hidden");
                                        $('input[name="daterange"]').daterangepicker({
                                            singleDatePicker: true,
                                            timePicker: true,
                                            showDropdowns: true,
                                            timePickerIncrement: 1,
                                            locale: {
                                                format: 'MM-DD-YYYY hh:mm a'
                                            }
                                        });
                                    }
                                });
                            </script>
                            <br>
                        {{/equal}}
                    {{/equal}}
                    <br><br>
                    Do you want to perform this operation on selected device(s) ?
                    <br>
                </h4>
            </div>
            <div class="modal-footer">
                <div class="buttons">
                    <a href="javascript:runOperation('{{code}}')" class="btn-operations">Yes</a>
                    <a href="javascript:hidePopup()" class="btn-operations btn-default">No</a>
                </div>
            </div>
        </div>

    </div>
{{/each}}
<br class="c-both"/>