<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-sm-6 col-xs-12">
          <h4 style="padding-left: 15px;"><a href="/admin/">Admin</a> / <a href="/admin/aliases/">Aliases</a> / {{alias.id || 'New'}} {{alias.newMessage}}</div>
  <div class="col-xs-12">
          <hr />
          <form ng-submit="aliasSubmit()" class="form-horizontal" name="alias">
          <h5>Alias Details</h5>
          <p>Aliases are ordered so that the closest match takes precedence.<br />
          Aliases with a full 7 digit capcode will be used first, followed by those with one wildcard, and so on.<br />
          Those that start with a wildcard will always be ordered last, and thus are only matched with a message if no other alias matches.</p>
            <div class="form-group has-feedback" ng-class="!alias.address || existingAddress ? 'has-error' : 'has-success'">
              <label for="alias.address" class="col-xs-4 col-sm-3 control-label">Address</label>
              <div class="col-xs-8 col-sm-9">
                <input class="form-control" type="text" name="alias.address" ng-model="alias.address" ng-change="checkAddress()" ng-model-options="{updateOn: 'blur'}" required>
                <span ng-if="aliasLoading" class="fa fa-refresh fa-spin fa-2x fa-fw form-control-feedback" aria-hidden="true"></span>
                <span id="helpBlock" class="help-block">Capcode address matches based on SQL wildcards - % means 0 or more of any character, _ means one of any character.<br />
                    For example:<br />
                    '%200%' will match messages from '0000200', '2009999', or '0002001'<br />
                    '0200___' will match '0200123', but not '0020012'.</span>
                <span ng-if="existingAddress" class="text-danger pull-left">Address already exists! </span>
                <div ng-if="existingAddress" class="btn-group pull-right" role="group" aria-label="Replace existing alias?">
                  <button type="button" ng-click="newButton(existingID)" class="btn btn-danger">Replace Existing</button>
                  <button type="button" ng-click="alias.address = alias.originalAddress; checkAddress()" class="btn btn-danger">Reset<span ng-if="alias.originalAddress"> to {{alias.originalAddress}}</span></button>
                </div>
              </div>
            </div>
            <div class="form-group" ng-class="!alias.agency ? 'has-error' : 'has-success'">
              <label for="alias.agency" class="col-xs-4 col-sm-3 control-label">Agency</label>
              <div class="col-xs-8 col-sm-9">
              <input class="form-control" type="text" name="alias.agency" ng-model="alias.agency" required>
              <span id="helpBlock" class="help-block">Agency or a high level group for aliases.</span>
              </div>
            </div>
            <div class="form-group">
              <label for="alias.icon" class="col-xs-4 col-sm-3 control-label">Icon</label>
              <div class="col-xs-8 col-sm-9">
                <div class="input-group">
                  <span class="input-group-addon" id="alias.icon.addon">
                    <span class="fa-stack fa-lg fa-fw" style="color: {{alias.color || 'black'}};">
                      <i class="fa fa-circle fa-stack-2x"></i>
                      <i class="fa fa-{{alias.icon || 'question'}} fa-stack-1x fa-inverse"></i>
                    </span>
                  </span>
                  <input class="form-control" type="text" name="alias.icon" ng-model="alias.icon" required>
                </div>
              <span id="helpBlock" class="help-block">Fontawesome icon to display with the alias. <a href="https://fontawesome.com/icons?d=gallery&m=free" target="_blank">Available icons.</a></span>
              </div>
            </div>
            <div class="form-group">
              <label for="alias.color" class="col-xs-4 col-sm-3 control-label">Color</label>
              <div class="col-xs-8 col-sm-9">
              <color-picker ng-model="alias.color" options="colorOptions"></color-picker>
              <!-- <input class="form-control" type="text" name="alias.color" ng-model="alias.color" required> -->
              <span id="helpBlock" class="help-block">HTML color to use for the icon and address. Can be a named color or a # color code.</span>
              </div>
            </div>
            <div class="form-group" ng-class="!alias.alias ? 'has-error' : 'has-success'">
              <label for="alias.alias" class="col-xs-4 col-sm-3 control-label">Alias</label>
              <div class="col-xs-8 col-sm-9">
              <input class="form-control" type="text" name="alias.alias" ng-model="alias.alias" required>
              <span id="helpBlock" class="help-block">Text description of the alias.</span>
              </div>
            </div>
            <div class="form-group" ng-class="{'has-warning':alias.ignore == 1}">
              <label for="alias.ignore" class="col-xs-4 col-sm-3 control-label">Filter Alias</label>
              <div class="col-xs-8 col-sm-9">
              <div class="checkbox">
                <label>
                <input type="checkbox" name="alias.ignore" ng-model="alias.ignore" ng-true-value="1" ng-false-value="0">
                Ignore messages matching this alias.
                </label>
                <span id="helpBlock" class="help-block">New messages that come in matching this alias are not stored in the database, but existing messages will not be deleted.</span>
              </div>
              </div>
            </div>


            <h4>Plugins</h4>
            <div class="plugin-group" ng-repeat="plugin in plugins">
              <div ng-if="settings.plugins[plugin.name].enable">
                <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" ng-repeat="configItem in plugin.aliasConfig">
                  <div ng-hide="!alias.pluginconf[plugin.name].enable && configItem.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="alias.pluginconf[plugin.name][configItem.name]">
                          {{configItem.description}}
                        </label>
                      </div>
                      <div ng-if="configItem.type == 'select'">
                          <select name="{{plugin.name}}.{{configItem.name}}" ng-model="alias.pluginconf[plugin.name][configItem.name]" class="form-control" ng-options="obj.text for obj in configItem.options track by obj.value" ng-disabled="!alias.pluginconf[plugin.name].enable" ng-required="alias.pluginconf[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="alias.pluginconf[plugin.name][configItem.name]" ng-disabled="!alias.pluginconf[plugin.name].enable" ng-required="alias.pluginconf[plugin.name].enable && configItem.required">
                        <span id="helpBlock" class="help-block">{{configItem.description}}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="btn-group-vertical" id="buttons-aliasDetail">
              <button type="button" ng-if="!isNew" ng-click="aliasDelete()" class="btn btn-danger">Delete</button>
              <button type="button" ng-click="aliasLoad()" class="btn btn-warning">Reset</button>
              <button type="submit" class="btn btn-success">Save</button>
            </div>
          </form>
        </div>
</div>

<div class="btn-group-vertical" id="buttons-capcodes">
    <button ng-if="aliasRefreshRequired == 1" type="button" ng-click="aliasRefresh();" class="btn btn-warning">Refresh Aliases</button>
    <button ng-if="!isNew" type="button" ng-click="newButton('new');" class="btn btn-success">Add New</button>
</div>
