<div class="row no-gutter">
    <div class="wr-hidden-operations-nav col-lg-4">
        <a href="javascript:void(0)" onclick="showAdvanceOperation('{{features.WIFI.code}}', this)" class="selected">
                <span class="wr-hidden-operations-icon fw-stack">
                    <i class="fw fw-wifi fw-stack-2x"></i>
                </span>
            Wi-fi
        </a>
        <a href="javascript:void(0)" onclick="showAdvanceOperation('application', this)" >
                    <span class="wr-hidden-operations-icon fw-stack">
                        <i class="fw fw-padlock fw-stack-2x"></i>
                    </span>
            Applications
        </a>
        <a href="javascript:void(0)" onclick="showAdvanceOperation('{{features.RESTRICTION.code}}', this)">
                <span class="wr-hidden-operations-icon fw-stack">
                    <i class="fw fw-settings fw-stack-2x"></i>
                </span>
            Restrictions
        </a>
        <a href="javascript:void(0)" onclick="showAdvanceOperation('mail', this)">
                    <span class="wr-hidden-operations-icon fw-stack">
                        <i class="fw fw-message fw-stack-2x"></i>
                    </span>
            Mail
        </a>
        <a href="javascript:void(0)" onclick="showAdvanceOperation('{{features.AIR_PLAY.code}}', this)">
                    <span class="wr-hidden-operations-icon fw-stack">
                        <i class="fw fw-service-provider fw-stack-2x"></i>
                    </span>
            Air Play
        </a>
    </div>
    <div class="wr-hidden-operations-content col-lg-8">

        <!-- application -->
        <div class="wr-hidden-operation" data-operation="application"  style="display: block">
            <div class="panel panel-default operation-data" data-operation="{{features.INSTALL_STORE_APPLICATION.code}}">
                <div class="panel-heading" role="tab">
                    <h2 class="sub-title panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#installPublicAppiOS" aria-expanded="true" aria-controls="installPublicAppiOS">
                                    <span class="fw-stack">
                                        <i class="fw fw-circle-outline fw-stack-2x"></i>
                                        <i class="fw fw-arrow fw-down-arrow fw-stack-1x"></i>
                                    </span>
                            Install Public App
                        </a>
                    </h2>
                </div>
                <div id="installPublicAppiOS" class="panel-collapse panel-body collapse in" role="tabpanel" aria-labelledby="installPublicAppiOS">
                    <label class="wr-input-label" for="appIdentifier">App identifier</label>
                    <div class="wr-input-control">
                        <input type="text" class="form-control operationDataKeys" id="appIdentifier" data-key="appIdentifier" placeholder="Enter App Identifier">
                    </div>
                    <label class="wr-input-label col-sm-4" for="ituneID">iTunes store ID</label>
                    <div class="wr-input-control">
                        <input type="text" class="form-control operationDataKeys" id="ituneID" data-key="ituneID" placeholder="Enter iTunes store ID">
                    </div>

                    <label class="wr-input-label col-sm-4" for="bundleId">Bundle ID</label>
                    <div class="wr-input-control">
                        <input type="text" class="form-control operationDataKeys" id="bundleId" data-key="bundleId" placeholder="Enter Bundle ID">
                    </div>
                    <div class="wr-input-control">
                        <label class="wr-input-control checkbox">
                            <input type="checkbox" class="operationDataKeys" id="appRemoval" data-key="appRemoval"  checked />
                            <span class="helper" title="Remove App upon dis-enrollment">Remove App upon dis-enrollment<span class="wr-help-tip glyphicon glyphicon-question-sign"></span></span>
                        </label>
                        <!--span>Enable if target network is not open or broadcasting</span-->
                    </div>
                    <div class="wr-input-control">
                        <label class="wr-input-control checkbox">
                            <input type="checkbox" class="operationDataKeys" id="backupData" data-key="backupData" checked />
                            <span class="helper" title="Prevent backup of App data">Prevent backup of App data<span class="wr-help-tip glyphicon glyphicon-question-sign"></span></span>
                        </label>
                        <!--span>Enable if target network is not open or broadcasting</span-->
                    </div>
                    <a href="javascript:runOperation('{{features.INSTALL_STORE_APPLICATION.code}}')" class="btn-operations">Install</a>
                </div>

            </div>
            <div class="panel panel-default operation-data" data-operation="{{features.INSTALL_ENTERPRISE_APPLICATION.code}}">
                <div class="panel-heading" role="tab">
                    <h2 class="sub-title panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#installEnterpriseAppiOS" aria-expanded="true" aria-controls="installPublicAppiOS" class="collapsed">
                                    <span class="fw-stack">
                                        <i class="fw fw-circle-outline fw-stack-2x"></i>
                                        <i class="fw fw-arrow fw-down-arrow fw-stack-1x"></i>
                                    </span>
                            Install Enterprise App
                        </a>
                    </h2>
                </div>
                <div id="installEnterpriseAppiOS" class="panel-collapse panel-body collapse" role="tabpanel" aria-labelledby="installEnterpriseAppiOS">
                    <label class="wr-input-label" for="appIdentifier">App identifier</label>
                    <div class="wr-input-control">
                        <input type="text" class="form-control operationDataKeys" id="appIdentifier" data-key="appIdentifier" placeholder="Enter App Identifier">
                    </div>
                    <label class="wr-input-label col-sm-4" for="manifestURL">Manifest URL</label>
                    <div class="wr-input-control">
                        <input type="text" class="form-control operationDataKeys" id="manifestURL" data-key="manifestURL" placeholder="Enter manifest URL">
                    </div>

                    <label class="wr-input-label col-sm-4" for="bundleId">Bundle ID</label>
                    <div class="wr-input-control">
                        <input type="text" class="form-control operationDataKeys" id="bundleId" data-key="bundleId" placeholder="Enter Bundle ID">
                    </div>
                    <div class="wr-input-control">
                        <label class="wr-input-control checkbox">
                            <input type="checkbox" class="operationDataKeys" id="appRemoval" data-key="appRemoval"  checked />
                            <span class="helper" title="Remove App upon dis-enrollment">Remove App upon dis-enrollment<span class="wr-help-tip glyphicon glyphicon-question-sign"></span></span>
                        </label>
                        <!--span>Enable if target network is not open or broadcasting</span-->
                    </div>
                    <div class="wr-input-control">
                        <label class="wr-input-control checkbox">
                            <input type="checkbox" class="operationDataKeys" id="backupData" data-key="backupData" checked />
                            <span class="helper" title="Prevent backup of App data">Prevent backup of App data<span class="wr-help-tip glyphicon glyphicon-question-sign"></span></span>
                        </label>
                        <!--span>Enable if target network is not open or broadcasting</span-->
                    </div>
                    <a href="javascript:runOperation('{{features.INSTALL_ENTERPRISE_APPLICATION.code}}')" class="btn-operations">Install</a>
                </div>
            </div>
            <div class="panel panel-default operation-data" data-operation="{{features.REMOVE_APPLICATION.code}}">
                <div class="panel-heading" role="tab">
                    <h2 class="sub-title panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#removeApplication" aria-expanded="true" aria-controls="removeApplication" class="collapsed">
                                    <span class="fw-stack">
                                        <i class="fw fw-circle-outline fw-stack-2x"></i>
                                        <i class="fw fw-arrow fw-down-arrow fw-stack-1x"></i>
                                    </span>
                            Uninstall App
                        </a>
                    </h2>
                </div>
                <div id="removeApplication" class="panel-collapse panel-body collapse" role="tabpanel" aria-labelledby="removeApplication">
                    <label class="wr-input-label col-sm-4" for="bundleId">Bundle ID</label>
                    <div class="wr-input-control">
                        <input type="text" class="form-control operationDataKeys" id="bundleId" data-key="bundleId" placeholder="Enter Bundle ID">
                    </div>
                    <a href="javascript:runOperation('{{features.REMOVE_APPLICATION.code}}')" class="btn-operations">Uninstall</a>
                </div>
            </div>
        </div>
        <!-- /application -->

        <!-- wi-fi -->
        <div class="wr-hidden-operation panel-body operation-data" data-operation="{{features.WIFI.code}}">
            <label class="wr-input-label" title="Identification of the wireless network to connect to">Service Set Identifier<span class="wr-help-tip glyphicon glyphicon-question-sign"></span></label>
            <!--span>Identification of the wireless network to connect to</span-->
            <div class="wr-input-control">
                <input type="text" class="form-control operationDataKeys" id="ssid" data-key="ssid" placeholder="Enter SSID" />
            </div>

            <div class="wr-input-control">
                <label class="wr-input-control checkbox">
                    <input type="checkbox" class="operationDataKeys" id="hiddenNetwork" data-key="hiddenNetwork" checked />
                    <span class="helper" title="Enable if target network is not open or broadcasting">Hidden Network<span class="wr-help-tip glyphicon glyphicon-question-sign"></span></span>
                </label>
                <!--span>Enable if target network is not open or broadcasting</span-->
            </div>

            <div class="wr-input-control">
                <label class="wr-input-control checkbox">
                    <input type="checkbox" class="operationDataKeys" id="autoJoin" data-key="autoJoin"  checked />
                    <span class="helper" title="Automatically join this wireless network">Auto Join<span class="wr-help-tip glyphicon glyphicon-question-sign"></span></span>
                </label>
                <!--span>Automatically join this wireless network</span-->
            </div>

            <label class="wr-input-label" title="Configures proxies to be used with this network">Proxy Setup<span class="wr-help-tip glyphicon glyphicon-question-sign"></span></label>
            <!--span>Configures proxies to be used with this network</span-->
            <div class="wr-input-control">
                <select class="form-control">
                    <option>None</option>
                </select>
            </div>

            <label class="wr-input-label" title="Wireless network encryption to use when connecting">Security Type<span class="wr-help-tip glyphicon glyphicon-question-sign"></span></label>
            <!--span>Wireless network encryption to use when connecting</span-->
            <div class="wr-input-control">
                <select class="form-control operationDataKeys" id="encryptionType" data-key="encryptionType">
                    <option data-id="WPA">WPA/WPA2 Personal</option>
                </select>
            </div>

            <label class="wr-input-label" title="Password for the wireless network">Password<span class="wr-help-tip glyphicon glyphicon-question-sign"></span></label>
            <!--span>Password for the wireless network</span-->
            <div class="wr-input-control">
                <input type="password" value="" class="operationDataKeys" id="password" data-key="password" placeholder="input text"/>
            </div>

            <label class="wr-input-label" title="Configures network to appear as legacy or Passport">Network Type<span class="wr-help-tip glyphicon glyphicon-question-sign"></span></label>
            <!--span>Configures network to appear as legacy or Passport</span-->
            <div class="wr-input-control">
                <select class="form-control">
                    <option>Standard</option>
                </select>
            </div>
            <a href="javascript:runOperation('{{features.WIFI.code}}')" class="btn-operations">Configure</a>
        </div>
        <!-- /wi-fi -->

        <!-- mail -->
        <div class="wr-hidden-operation panel-body" data-operation="mail">
            <label class="wr-input-label" title="The display name of the account">Account Description<span class="wr-help-tip glyphicon glyphicon-question-sign"></span></label>
            <!--span>Identification of the wireless network to connect to</span-->
            <div class="wr-input-control">
                <input type="text" value="" placeholder="input text"/>
            </div>

            <label class="wr-input-label" title="The protocol for accessing the email account">Account Type<span class="wr-help-tip glyphicon glyphicon-question-sign"></span></label>
            <!--span>Configures proxies to be used with this network</span-->
            <div class="wr-input-control">
                <div class="cus-col-25">
                    <select class="form-control">
                        <option>IMAP</option>
                    </select>
                </div>
                <div class="cus-col-50">
                    <span>Path Prefix</span> <input type="text" value="" placeholder="input text" />
                </div>
                <br class="c-both" />
            </div>

            <label class="wr-input-label" title="The display name of the user">User Display Name<span class="wr-help-tip glyphicon glyphicon-question-sign"></span></label>
            <!--span>Identification of the wireless network to connect to</span-->
            <div class="wr-input-control">
                <input type="text" value="" placeholder="input text"/>
            </div>

            <label class="wr-input-label" title="The address of the account">Email Address<span class="wr-help-tip glyphicon glyphicon-question-sign"></span></label>
            <!--span>Identification of the wireless network to connect to</span-->
            <div class="wr-input-control">
                <input type="text" value="" placeholder="input text"/>
            </div>

            <div class="wr-input-control">
                <label class="wr-input-control checkbox">
                    <input type="checkbox" checked />
                    <span class="helper" title="Messages can be moved from this account to another">Allow user to move messages from this account<span class="wr-help-tip glyphicon glyphicon-question-sign"></span></span>
                </label>
                <!--span>Enable if target network is not open or broadcasting</span-->
            </div>

            <div class="wr-input-control">
                <label class="wr-input-control checkbox">
                    <input type="checkbox" checked />
                    <span class="helper" title="Include this account in recent address syncing">Allow Recent Address syncing<span class="wr-help-tip glyphicon glyphicon-question-sign"></span></span>
                </label>
                <!--span>Enable if target network is not open or broadcasting</span-->
            </div>

            <div class="wr-input-control">
                <label class="wr-input-control checkbox">
                    <input type="checkbox" checked />
                    <span class="helper" title="Send outgoing mail from this account only from Mail app">Use Only in Mail<span class="wr-help-tip glyphicon glyphicon-question-sign"></span></span>
                </label>
                <!--span>Send outgoing mail from this account only from Mail app</span-->
            </div>

            <div class="wr-input-control">
                <label class="wr-input-control checkbox">
                    <input type="checkbox" checked />
                    <span class="helper" title="Support S/MIME for this account">Enable S/MIME<span class="wr-help-tip glyphicon glyphicon-question-sign"></span></span>
                </label>
                <!--span>Support S/MIME for this account</span-->
            </div>

            <label class="wr-input-label" title="The protocol for accessing the email account">Mail Server and Port<span class="wr-help-tip glyphicon glyphicon-question-sign"></span></label>
            <!--span>The protocol for accessing the email account</span-->
            <div class="wr-input-control">
                <div class="cus-col-70">
                    <input type="text" value="" placeholder="input text"/>
                </div>
                <div class="cus-col-25">
                    <span> : </span><input type="text" value="993" placeholder="input text" />
                </div>
                <br class="c-both" />
            </div>

            <label class="wr-input-label" title="The username used to connect to the server for incoming mail">Username<span class="wr-help-tip glyphicon glyphicon-question-sign"></span></label>
            <!--span>The Username used to connect to the server for incoming mail</span-->
            <div class="wr-input-control">
                <input type="text" value="" placeholder="input text"/>
            </div>

            <label class="wr-input-label" title="The autyentication method for the incoming mail server">Authentication Type<span class="wr-help-tip glyphicon glyphicon-question-sign"></span></label>
            <!--span>Wireless network encryption to use when connecting</span-->
            <div class="wr-input-control">
                <select class="form-control">
                    <option>Password</option>
                </select>
            </div>

            <label class="wr-input-label" title="The password for the incoming mail server">Password<span class="wr-help-tip glyphicon glyphicon-question-sign"></span></label>
            <!--span>The Username used to connect to the server for incoming mail</span-->
            <div class="wr-input-control">
                <input type="text" value="" placeholder="input text"/>
            </div>

            <div class="wr-input-control">
                <label class="wr-input-control checkbox">
                    <input type="checkbox" checked />
                    <span class="helper" title="Retrieve incoming mail through secure socket layer">Use SSL<span class="wr-help-tip glyphicon glyphicon-question-sign"></span></span>
                </label>
                <!--span>Enable if target network is not open or broadcasting</span-->
            </div>
        </div>
        <!-- /mail -->

        <!-- general -->
        <div class="wr-hidden-operation panel-body operation-data" data-operation="{{features.RESTRICTION.code}}">
            <div class="wr-input-control">
                <label class="wr-input-control checkbox">
                    <input type="checkbox" class="operationDataKeys" id="allowCamera" data-key="allowCamera" checked />
                    <span class="helper" title="Allow Camera">Allow Camera<span class="wr-help-tip glyphicon glyphicon-question-sign"></span></span>
                </label>
            </div>
            <div class="wr-input-control">
                <label class="wr-input-control checkbox">
                    <input type="checkbox" class="operationDataKeys" id="allowCloudBackup" data-key="allowCloudBackup" checked/>
                    <span class="helper" title="Allow Cloud Backup">Allow Cloud Backup<span class="wr-help-tip glyphicon glyphicon-question-sign"></span></span>
                </label>
            </div>
            <div class="wr-input-control">
                <label class="wr-input-control checkbox">
                    <input type="checkbox" class="operationDataKeys" id="allowScreenShot" data-key="allowScreenShot" checked/>
                    <span class="helper" title="Allow Screenshots">Allow Screenshots<span class="wr-help-tip glyphicon glyphicon-question-sign"></span></span>
                </label>
            </div>
            <div class="wr-input-control">
                <label class="wr-input-control checkbox">
                    <input type="checkbox" class="operationDataKeys" id="allowSafari" data-key="allowSafari" checked />
                    <span class="helper" title="Allow Safari Browser">Allow Safari Browser<span class="wr-help-tip glyphicon glyphicon-question-sign"></span></span>
                </label>
            </div>
            <div class="wr-input-control">
                <label class="wr-input-control checkbox">
                    <input type="checkbox" class="operationDataKeys" id="allowAirDrop" data-key="allowAirDrop" checked />
                    <span class="helper" title="Allow AirDrop">Allow AirDrop<span class="wr-help-tip glyphicon glyphicon-question-sign"></span></span>
                </label>
            </div>
            <a href="javascript:runOperation('{{features.RESTRICTION.code}}')" class="btn-operations">Configure</a>
        </div>
        <!-- /general -->
        <!-- air play -->
        <div class="wr-hidden-operation panel-body operation-data" data-operation="{{features.AIR_PLAY.code}}">
            <label class="wr-input-label col-sm-4" for="airPlayLocation">Location</label>
            <div class="wr-input-control">
                <input type="text" class="form-control operationDataKeys" id="airPlayLocation" data-key="location" placeholder="Enter location" />
            </div>
            <label class="wr-input-label col-sm-4" for="airPlayDeviceName">Device Name</label>
            <div class="wr-input-control">
                <input type="text" class="form-control operationDataKeys" id="airPlayDeviceName" data-key="deviceName" placeholder="Enter Device Name" />
            </div
            <label class="wr-input-label col-sm-4" for="airPlayPassword">AirPlay password</label>
            <div class="wr-input-control">
                <input type="password" class="form-control operationDataKeys" id="airPlayPassword" data-key="password" placeholder="Password" />
            </div>
            <a href="javascript:runOperation('{{features.AIR_PLAY.code}}')" class="btn-operations">Configure</a>
        </div>
        <!-- /air play -->
    </div>
</div>