<div class="row" style="padding-top: 11px;">
</div>
<div ng-if="loading" class="loading"><i class="fa fa-spinner fa-spin"></i></div>
<div class="alert {{alertMessage.type}} alert-dismissable alert-fixed fade in" ng-if="alertMessage.show">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close" ng-click="alertMessage.show = false">&times;</button>
  <strong>{{alertMessage.text}}</strong>
</div>
<div class="row" style="padding-top: 10px">
  <div class="col-xs-12">
          <h4 style="padding-left: 15px;"><a href="/admin/">Admin</a> / Settings</h4>
          <hr />
          <form ng-submit="settingsSubmit()" class="form-horizontal" style="padding-bottom: 70px;">

            <h5>Global</h5>
            <div class="form-group">
              <label for="global.loglevel" class="col-xs-4 col-sm-3 control-label">Log level</label>
              <div class="col-xs-8 col-sm-9">
                <select name="global.loglevel" ng-model="settings.global.loglevel" class="form-control">
                  <option value="debug">Debug</option>
                  <option value="info">Info</option>
                  <option value="warn">Warning</option>
                </select>
                <span id="helpBlock" class="help-block">Sets the level of information available in log files.</span>
              </div>
            </div>
            <div class="form-group">
              <label for="global.theme" class="col-xs-4 col-sm-3 control-label">Theme</label>
              <div class="col-xs-8 col-sm-9">
                <select name="global.theme" ng-model="settings.global.theme" class="form-control">
                  <option ng-repeat="theme in themes" value="{{theme}}">{{theme}}</option>
                </select>
                <span id="helpBlock" class="help-block">Choose an installed theme. Note: An application restart is required. </span>
              </div>
            </div>
            <div class="form-group">
              <label for="global.sessionSecret" class="col-xs-4 col-sm-3 control-label">Session Secret</label>
              <div class="col-xs-8 col-sm-9">
                <div class="input-group">
                  <input class="form-control" type="text" name="global.sessionSecret" ng-model="settings.global.sessionSecret" required readonly>
                  <span class="input-group-addon" id="global.sessionSecret.addon">
                    <button class="btn btn-default" ng-click="generateKey('sessionSecret')" type="button">Generate</button>
                  </span>
                </div>
                <span id="helpBlock" class="help-block">Secret key for cookie sessions, should be changed before deploying the application. Changing this will invalidate existing sessions.</span>
              </div>
            </div>
            <div class="form-group">
              <label for="global.searchLocation" class="col-xs-4 col-sm-3 control-label">Homepage Search Bar Location</label>
              <div class="col-xs-8 col-sm-9">
                <select name="global.searchLocation" ng-model="settings.global.searchLocation" class="form-control">
                  <option value="top">Top</option>
                  <option value="bottom">Bottom</option>
                </select>
                <span id="helpBlock" class="help-block">Sets the location of the Search Bar.</span>
              </div>
            </div>
            <div class="form-group">
              <label for="global.monitorName" class="col-xs-4 col-sm-3 control-label">Monitor Name</label>
              <div class="col-xs-8 col-sm-9">
                  <input class="form-control" type="text" name="global.monitorName" ng-model="settings.global.monitorName">
                <span id="helpBlock" class="help-block">Set the title of your PagerMon website</span>
              </div>
            </div>
            <div class="form-group">
              <label for="global.frontPopupEnable" class="col-xs-4 col-sm-3 control-label">Enable One Time Modal</label>
              <div class="col-xs-8 col-sm-9">
                <div class="checkbox">
                  <label>
                    <input type="checkbox" name="global.frontPopupEnable" ng-model="settings.global.frontPopupEnable"> Enable showing a modal to new visitors. This can be used for showing a disclamer or Site/Contact information. 
                  </label>
                  </div>
              </div>
            </div>
            <div class="form-group" ng-hide="!settings.global.frontPopupEnable">
              <label for="global.frontPopupTitle" class="col-xs-4 col-sm-3 control-label">Modal Title </label>
              <div class="col-xs-8 col-sm-9">
                  <input class="form-control" type="text" name="global.frontPopupTitle" ng-model="settings.global.frontPopupTitle" ng-required="settings.global.frontPopupEnable">
                <span id="helpBlock" class="help-block">Modal Title</span>
              </div>
            </div>
            <div class="form-group" ng-hide="!settings.global.frontPopupEnable">
              <label for="global.frontPopupContent" class="col-xs-4 col-sm-3 control-label">Modal Content </label>
              <div class="col-xs-8 col-sm-9">
                <div text-angular name="global.frontPopupContent" ng-model="settings.global.frontPopupContent" ng-required="settings.global.frontPopupEnable" ta-toolbar="[['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'pre', 'quote'],['bold', 'italics', 'underline', 'strikeThrough', 'ul', 'ol', 'redo', 'undo', 'clear'],['justifyLeft', 'justifyCenter', 'justifyRight', 'indent', 'outdent'],['html', 'insertImage','insertLink']]" ta-text-editor-class="clearfix border-around" ta-html-editor-class="border-around"></div>
		            <span id="helpBlock" class="help-block">Modal Content</span>
              </div>
            </div>

            <h5>Database</h5>
            <div class="form-group">
              <label for="database.type" class="col-xs-4 col-sm-3 control-label">Type</label>
              <div class="col-xs-8 col-sm-9">
                <select name="database.type" ng-model="settings.database.type" class="form-control" required>
                  <option value="sqlite3">SQLite</option>
                  <option value="mysql">MySQL / MariaDB</option>
                  <option value="oracledb">Oracle DB</option>
                  <!--<option value="mssql">MSSQL</option>
                  <option value="pg">Postgres</option> -->
                </select>
              </div>
            </div>
            <div class="form-group" ng-if="settings.database.type == 'sqlite3'">
              <label for="database.file" class="col-xs-4 col-sm-3 control-label">Path to Database File</label>
              <div class="col-xs-8 col-sm-9">
              <input type="text" class="form-control" name="database.file" ng-model="settings.database.file" required>
              <span id="helpBlock" class="help-block">Configure the path to the SQLite Database</span>
              </div>
            </div>
            <div class="form-group" ng-if="settings.database.type == 'oracledb'">
              <label for="database.connectString" class="col-xs-4 col-sm-3 control-label">Database Connection String</label>
              <div class="col-xs-8 col-sm-9">
              <input type="text" class="form-control" name="database.connectString" ng-model="settings.database.connectString" required>
              <span id="helpBlock" class="help-block">Oracle connection string</span>
              </div>
            </div>
            <div class="form-group" ng-if="settings.database.type == 'pg' || settings.database.type == 'mysql' || settings.database.type == 'mssql'">
              <label for="database.server" class="col-xs-4 col-sm-3 control-label">Database Server</label>
              <div class="col-xs-8 col-sm-9">
              <input type="text" class="form-control" name="database.server" ng-model="settings.database.server" required>
              <span id="helpBlock" class="help-block">Database Server Address</span>
              </div>
            </div>
            <div class="form-group" ng-if="settings.database.type == 'pg' || settings.database.type == 'mysql' || settings.database.type == 'mssql'">
              <label for="database.database" class="col-xs-4 col-sm-3 control-label">Database Name</label>
              <div class="col-xs-8 col-sm-9">
              <input type="text" class="form-control" name="database.database" ng-model="settings.database.database" required>
              <span id="helpBlock" class="help-block">Name of the database.</span>
              </div>
            </div>
            <div class="form-group" ng-if="settings.database.type == 'pg' || settings.database.type == 'mysql' || settings.database.type == 'mssql' || settings.database.type == 'oracledb'">
              <label for="database.username" class="col-xs-4 col-sm-3 control-label">Database Username</label>
              <div class="col-xs-8 col-sm-9">
              <input type="text" class="form-control" name="database.username" ng-model="settings.database.username" required>
              <span id="helpBlock" class="help-block">Database Username</span>
              </div>
            </div>
            <div class="form-group" ng-if="settings.database.type == 'pg' || settings.database.type == 'mysql' || settings.database.type == 'mssql' || settings.database.type == 'oracledb'">
              <label for="database.password" class="col-xs-4 col-sm-3 control-label">Database Password</label>
              <div class="col-xs-8 col-sm-9">
                  <div class="input-group">
                  <input type="password" ng-attr-type="{{ showPassword ? 'text' : 'password' }}" class="form-control" name="database.password" ng-model="settings.database.password" required>
                  <span class="input-group-addon" id="database.password.addon">
                      <div ng-click="toggleShowPassword()" ng-class="{'fa fa-eye': showPassword,'fa fa-eye-slash': !showPassword}" style="cursor: pointer; pointer-events: all;"></div>
                  </span>  
                  </div>
                <span id="helpBlock" class="help-block">Database Password</span>
                </div>
            </div> 
            
            <fieldset disabled>
            <div class="form-group">
              <div class="col-xs-8 col-xs-offset-2 col-sm-9 col-sm-offset-3">
                <div class="checkbox">
                <label>
                  <input type="checkbox" name="messages.rotationEnabled" ng-model="settings.messages.rotationEnabled"> Rotate out old messages
                </label>
                </div>
              </div>
            </div>
            <div class="form-group">
              <label for="messages.rotateDays" class="col-xs-4 col-sm-3 control-label">Rotation interval</label>
              <div class="col-xs-8 col-sm-9">
              <input type="number" class="form-control" name="messages.rotateDays" ng-model="settings.messages.rotateDays" ng-disabled="!settings.messages.rotationEnabled">
              <span id="helpBlock" class="help-block">Rotate the messages database every {{settings.messages.rotateDays}} days.</span>
              </div>
            </div>
            <div class="form-group">
              <label for="messages.rotateKeep" class="col-xs-4 col-sm-3 control-label">Rotation retention</label>
              <div class="col-xs-8 col-sm-9">
              <input type="number" class="form-control" name="messages.rotateKeep" ng-model="settings.messages.rotateKeep" ng-disabled="!settings.messages.rotationEnabled">
              <span id="helpBlock" class="help-block">Keep {{settings.messages.rotateKeep}} rotated database files.</span>
              <span class="text-warning">Message rotation is not yet implemented</span>
              </div>
            </div>
            </fieldset>

            <h5>Messages</h5>
            <div class="form-group">
              <label for="messages.maxLimit" class="col-xs-4 col-sm-3 control-label">Max limit per page</label>
              <div class="col-xs-8 col-sm-9">
              <input type="number" class="form-control" name="messages.maxLimit" ng-model="settings.messages.maxLimit">
              <span id="helpBlock" class="help-block">The maximum number of messages a user can display per page.</span>
              </div>
            </div>
            <div class="form-group">
              <label for="messages.defaultLimit" class="col-xs-4 col-sm-3 control-label">Default limit per page</label>
              <div class="col-xs-8 col-sm-9">
              <input type="number" class="form-control" name="messages.defaultLimit" ng-model="settings.messages.defaultLimit">
              <span id="helpBlock" class="help-block">Default number of messages to show per page.</span>
              </div>
            </div>
            <div class="form-group">
              <label for="messages.iconsize" class="col-xs-4 col-sm-3 control-label">Icon Size</label>
              <div class="col-xs-8 col-sm-9">
                <select name="messages.iconsize" ng-model="settings.messages.iconsize" class="form-control">
                  <option value="small">Small</option>
                  <option value="normal">Normal</option>
                </select>
                <span id="helpBlock" class="help-block">Set the size of the icons on the message list.</span>
              </div>
            </div>
            <div class="form-group">
              <label for="messages.pdwMode" class="col-xs-4 col-sm-3 control-label">Duplicate filtering</label>
              <div class="col-xs-8 col-sm-9">
                <div class="checkbox">
                <label>
                  <input type="checkbox" name="messages.duplicateFiltering" ng-model="settings.messages.duplicateFiltering"> Filter out duplicate messages
                </label>
                <span id="helpBlock" class="help-block">Limit filtering in one or both of the below fields.</span>
                </div>
              </div>
            </div>
            <div class="form-group">
              <label for="messages.duplicateLimit" class="col-xs-4 col-sm-3 control-label">Duplicate message limit</label>
              <div class="col-xs-8 col-sm-9">
              <input type="number" class="form-control" name="messages.duplicateLimit" ng-model="settings.messages.duplicateLimit" ng-disabled="!settings.messages.duplicateFiltering">
              </div>
            </div>
            <div class="form-group">
              <label for="messages.duplicateLimit" class="col-xs-4 col-sm-3 control-label">Duplicate time limit</label>
              <div class="col-xs-8 col-sm-9">
              <input type="number" class="form-control" name="messages.duplicateTime" ng-model="settings.messages.duplicateTime" ng-disabled="!settings.messages.duplicateFiltering">
              <span id="helpBlock" class="help-block">Ignore a message if one of the last {{settings.messages.duplicateLimit}} messages in the past {{settings.messages.duplicateTime}} seconds contains the same address and content.
                  <br />Set to 0 or blank to not limit the duplicate check query. This can impact database performance if both this and the above field are blank.</span>
              </div>
            </div>
            <div class="form-group">
              <label for="messages.pdwMode" class="col-xs-4 col-sm-3 control-label">PDW mode</label>
              <div class="col-xs-8 col-sm-9">
              <div class="checkbox">
                <label>
                <input type="checkbox" name="messages.pdwMode" ng-model="settings.messages.pdwMode">
                Hide any messages that don't have a matching alias.
                </label>
              </div>
              </div>
            </div>
            <div class="form-group">
              <label for="messages.adminShow" class="col-xs-4 col-sm-3 control-label">PDW Mode - Admin Disable</label>
              <div class="col-xs-8 col-sm-9">
              <div class="checkbox">
                <label>
                <input type="checkbox" name="messages.adminShow" ng-model="settings.messages.adminShow" ng-disabled="!settings.messages.pdwMode">
                When PDW Mode is enabled, use this option to show all messages to logged in user's only.
                </label>
              </div>
              </div>
            </div>
            <div class="form-group">
              <label for="messages.HideCapcode" class="col-xs-4 col-sm-3 control-label">Hide Capcodes</label>
              <div class="col-xs-8 col-sm-9">
              <div class="checkbox">
                <label>
                <input type="checkbox" name="messages.HideCapcode" ng-model="settings.messages.HideCapcode">
                Hide Capcodes for non-logged in users. 
			<br><b> Note: You must restart the application after making this change.</b>
                </label>
              </div>
              </div>
            </div>
            <div class="form-group">
              <label for="messages.HideSource" class="col-xs-4 col-sm-3 control-label">Hide Source</label>
              <div class="col-xs-8 col-sm-9">
              <div class="checkbox">
                <label>
                <input type="checkbox" name="messages.HideSource" ng-model="settings.messages.HideSource">
                Hide Source field for non-logged in users. Note: Does not secure source data at the API level, only hides it.
                </label>
              </div>
              </div>
            </div>
            <div class="form-group">
              <label for="messages.apiSecurity" class="col-xs-4 col-sm-3 control-label">Enable Secure Mode</label>
              <div class="col-xs-8 col-sm-9">
              <div class="checkbox">
                <label>
                <input type="checkbox" name="messages.SecureApi" ng-model="settings.messages.apiSecurity">
                Secures all API's and WebInterface from being accessed unless logged in.
                  <p><b> Note: You must restart the application after making this change.</b>
                </label>
              </div>
              </div>
            </div>
            
            <div class="row">
            <label class="col-xs-4 col-sm-3 control-label">Text Matching</label>
            <div class="col-xs-8 col-sm-9">
            <span id="helpBlock" class="help-block">Highlights or labels text. If Label is present, then it will be displayed as a tooltip when hovering over the matched text. Text Match field can be regex.</span>
            </div>
            </div>
            <div class="form-group">
              <div class="col-sm-11 col-sm-offset-1">
              <table class="table table-striped table-condensed">
                <thead>
                  <tr>
                    <th width="1%"></th>
                    <th width="25%">Text Match</th>
                    <th width="1%">Highlight</th>
                    <th width="99%">Label</th>
                  </tr>
                </thead>
                <tbody>
                  <tr ng-repeat="text in settings.messages.replaceText track by $index">
                    <td style="text-align: center; vertical-align: middle;">
                      <input type="checkbox" ng-model="text.selected"/></td>
                    <td>
                      <input type="text" class="form-control" placeholder="Text Match" ng-model="text.match" required></td>
                    <td style="text-align: center; vertical-align: middle;">
                      <input type="checkbox" ng-model="text.highlight"/></td>
                    <td>
                      <input type="text" class="form-control" placeholder="Text Replace" ng-model="text.replace" ></td>
                  </tr>
                  <tr>
                    <td style="text-align: left;">
                      <input ng-disabled="!matchSelected()" type="button" class="btn btn-sm btn-danger" ng-click="removeMatch()" value="&times;">
                    </td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td>
                      <input type="button" class="btn btn-success btn-sm addnew pull-right" ng-click="addMatch()" value="&plus;">
                    </td>
                  </tr>
                </tbody>
              </table>
              </div>
            </div>

            <h5>Auth</h5>
            <div class="form-group">
            <fieldset disabled>
              <label for="auth.type" class="col-xs-4 col-sm-3 control-label">Type</label>
              <div class="col-xs-8 col-sm-9">
                <select name="auth.type" ng-model="settings.auth.type" class="form-control" readonly>
                  <option value="local">Local</option>
                  <option value="database">Database</option>
                </select>
                <span class="text-warning">Authentication methods are not yet implemented</span>
              </div>
            </fieldset>
            </div>
            <div class="row">
            <label class="col-xs-4 col-sm-3 control-label">API Keys</label>
            </div>
            <div class="form-group">
              <div class="col-sm-11 col-sm-offset-1">
              <table class="table table-striped table-condensed">
                <thead>
                  <tr>
                    <th width="1%"></th>
                    <th width="25%">Name</th>
                    <th width="99%">Key</th>
                    <th width="1%"></th>
                  </tr>
                </thead>
                <tbody>
                  <tr ng-repeat="key in settings.auth.keys track by $index">
                    <td style="text-align: center; vertical-align: middle;">
                      <input type="checkbox" ng-model="key.selected"/></td>
                    <td>
                      <input type="text" class="form-control" placeholder="Name" ng-model="key.name" required></td>
                    <td colspan="{{key.key ? '2' : '1'}}">
                      <input type="text" class="form-control" placeholder="Key" ng-model="key.key" readonly required></td>
                    <td ng-if="key.key == ''">
                      <button class="btn btn-default" ng-click="generateKey($index)" type="button">Generate</button>
                    </td>
                  </tr>
                  <tr>
                    <td style="text-align: left;">
                      <input ng-disabled="!keySelected()" type="button" class="btn btn-sm btn-danger" ng-click="removeKey()" value="&times;">
                    </td>
                    <td></td>
                    <td></td>
                    <td>
                      <input type="button" class="btn btn-success btn-sm addnew pull-right" ng-click="addKey()" value="&plus;">
                    </td>
                  </tr>
                </tbody>
              </table>
              </div>
            </div>

            <h5>Monitoring</h5>
            <div class="form-group">
              <label for="monitoring.azureEnable" class="col-xs-4 col-sm-3 control-label">Azure Application Insights</label>
              <div class="col-xs-8 col-sm-9">
                <div class="checkbox">
                  <label>
                    <input type="checkbox" name="monitoring.azureEnable" ng-model="settings.monitoring.azureEnable"> Enable Azure Application Insights Monitoring
                  </label>
                  </div>
              </div>
            </div>
            <div class="form-group" ng-hide="!settings.monitoring.azureEnable">
              <label for="monitoring.azureKey" class="col-xs-4 col-sm-3 control-label">Azure Application Insights Key </label>
              <div class="col-xs-8 col-sm-9">
                  <input class="form-control" type="text" name="monitoring.azureKey" ng-model="settings.monitoring.azureKey" ng-required="settings.monitoring.azureEnable">
                <span id="helpBlock" class="help-block">Azure Application Insights Key. See <a href=https://docs.microsoft.com/en-us/azure/azure-monitor/learn/nodejs-quick-start#configure-app-insights-sdk>Documentation</a></span>
              </div>
            </div>

            <div class="form-group">
              <label for="monitoring.gaEnable" class="col-xs-4 col-sm-3 control-label">Google Analytics</label>
              <div class="col-xs-8 col-sm-9">
                <div class="checkbox">
                  <label>
                    <input type="checkbox" name="monitoring.gaEnable" ng-model="settings.monitoring.gaEnable"> Enable Google Analytics
                  </label>
                  </div>
              </div>
            </div>
            <div class="form-group" ng-hide="!settings.monitoring.gaEnable">
              <label for="monitoring.gaTrackingCode" class="col-xs-4 col-sm-3 control-label">Tracking ID. </label>
              <div class="col-xs-8 col-sm-9">
                  <input class="form-control" type="text" name="monitoring.gaTrackingCode" ng-model="settings.monitoring.gaTrackingCode" ng-required="settings.monitoring.gaEnable">
                <span id="helpBlock" class="help-block">Tracking ID. See <a href=https://support.google.com/analytics/answer/1008080?hl=en>Documentation</a></span>
              </div>
            </div>



            <h4>Plugins</h4>
            <div class="plugin-group" ng-repeat="plugin in plugins">
              <hr />
              <div class="row">
                <div class="col-xs-12 col-sm-6"><h5>{{plugin.name}}</h5><p><em ng-bind-html="plugin.description"></em></p></div>
              </div>
              <div class="form-group">
                <label for="{{plugin.name}}.enable" class="col-xs-4 col-sm-3 control-label">Enable</label>
                <div class="col-xs-8 col-sm-9">
                  <div class="checkbox">
                    <label>
                      <input type="checkbox" name="{{plugin.name}}.enable" ng-model="settings.plugins[plugin.name].enable">
                      Enable the {{plugin.name}} plugin
                    </label>
                  </div>
                </div>
              </div>
              <div class="form-group" ng-repeat="configItem in plugin.config">
                <div ng-hide="!settings.plugins[plugin.name].enable">
                  <label for="{{plugin.name}}.{{configItem.name}}" class="col-xs-4 col-sm-3 control-label">{{configItem.label}}</label>
                  <div class="col-xs-8 col-sm-9">
                    <div ng-if="configItem.type == 'checkbox'" class="checkbox">
                      <label>
                        <input type="checkbox" name="{{plugin.name}}.{{configItem.name}}" ng-model="settings.plugins[plugin.name][configItem.name]">
                        {{configItem.description}}
                      </label>
                    </div>
                    <div ng-if="configItem.type == 'select'">
                        <select name="{{plugin.name}}.{{configItem.name}}" ng-model="settings.plugins[plugin.name][configItem.name]" class="form-control" ng-options="obj.text for obj in configItem.options track by obj.value" ng-hide="!settings.plugins[plugin.name].enable" ng-required="settings.plugins[plugin.name].enable && configItem.required">
                          </select>
                          <span id="helpBlock" class="help-block">{{configItem.description}}</span>
                    </div>
                    <div ng-if="configItem.type != 'checkbox' && configItem.type != 'select'">
                      <input type="{{configItem.type}}" class="form-control" name="{{plugin.name}}.{{configItem.name}}" ng-model="settings.plugins[plugin.name][configItem.name]" ng-hide="!settings.plugins[plugin.name].enable" ng-required="settings.plugins[plugin.name].enable && configItem.required">
                      <span id="helpBlock" class="help-block">{{configItem.description}}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="btn-group-vertical">
              <button type="submit" class="btn btn-success ">Save</button>
            </div>
          </form>
        </div>
</div>
