<ng-template #matcherTpl let-matcher="matcher" let-index="index">
  <div class="input-group">
    <ng-container *ngFor="let config of matcherConfig">
      <span class="input-group-addon"
            [tooltip]=config.tooltip>
        <i class="icon-prepend" [ngClass]="[config.icon]"></i>
      </span>
      <ng-container *ngIf="config.attribute !== 'isRegex'">
        <input type="text"
               id="matcher-{{config.attribute}}-{{index}}"
               class="form-control"
               [value]="matcher[config.attribute]"
               disabled
               readonly>
      </ng-container>
      <ng-container *ngIf="config.attribute === 'isRegex'">
        <span class="input-group-addon">
          <input type="checkbox"
                 id="matcher-{{config.attribute}}-{{index}}"
                 [checked]="matcher[config.attribute]"
                 disabled
                 readonly>
        </span>
      </ng-container>
    </ng-container>
    <!-- Matcher actions -->
    <span class="input-group-btn">
      <button type="button"
              class="btn btn-default"
              id="matcher-edit-{{index}}"
              i18n-tooltip
              tooltip="Edit"
              (click)="showMatcherModal(index)">
        <i [ngClass]="[icons.edit]"></i>
      </button>
      <button type="button"
              class="btn btn-default"
              id="matcher-delete-{{index}}"
              i18n-tooltip
              tooltip="Delete"
              (click)="deleteMatcher(index)">
        <i [ngClass]="[icons.trash]"></i>
      </button>
    </span>
  </div>
  <span class="help-block"></span>
</ng-template>

<div class="col-sm-12 col-lg-6">
  <form #formDir="ngForm"
        [formGroup]="form"
        class="form-horizontal"
        name="form"
        novalidate>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">
          <span i18n="@@formTitle">
            {{ action | titlecase }} {{ resource | upperFirst }}
          </span>
          <cd-helper *ngIf="edit"
                     i18n>Editing a silence will expire the old silence and recreate it as a new silence</cd-helper>
        </h3>
      </div>

      <!-- Creator -->
      <div class="panel-body">
        <div [ngClass]="{'has-error': form.showError('createdBy', formDir)}"
             class="form-group">
          <label class="control-label col-sm-3"
                 for="created-by">
            <ng-container i18n>Creator</ng-container>
            <span class="required"></span>
          </label>
          <div class="col-sm-9">
            <input class="form-control"
                   formControlName="createdBy"
                   id="created-by"
                   name="created-by"
                   type="text">
            <span *ngIf="form.showError('createdBy', formDir, 'required')"
                  class="help-block"
                  i18n>This field is required!</span>
          </div>
        </div>

        <!-- Comment -->
        <div [ngClass]="{'has-error': form.showError('comment', formDir)}"
             class="form-group">
          <label class="control-label col-sm-3"
                 for="comment">
            <ng-container i18n>Comment</ng-container>
            <span class="required"></span>
          </label>
          <div class="col-sm-9">
            <textarea class="form-control"
                      formControlName="comment"
                      id="comment"
                      name="comment"
                      type="text">
            </textarea>
            <span *ngIf="form.showError('comment', formDir, 'required')"
                  class="help-block"
                  i18n>This field is required!</span>
          </div>
        </div>

        <!-- Start time -->
        <div [ngClass]="{'has-error': form.showError('startsAt', formDir)}"
             class="form-group">
          <label class="control-label col-sm-3"
                 for="starts-at">
            <ng-container i18n>Start time</ng-container>
            <cd-helper i18n>If the start time lies in the past the creation time will be used</cd-helper>
            <span class="required"></span>
          </label>
          <div class="col-sm-9">
            <input [bsConfig]="bsConfig"
                   bsDatepicker
                   class="form-control"
                   formControlName="startsAt"
                   id="starts-at"
                   name="starts-at">
            <span *ngIf="form.showError('startsAt', formDir, 'required')"
                  class="help-block"
                  i18n>This field is required!</span>
          </div>
        </div>

        <!-- Duration -->
        <div [ngClass]="{'has-error': form.showError('duration', formDir)}"
             class="form-group">
          <label class="control-label col-sm-3"
                 for="duration">
            <ng-container i18n>Duration</ng-container>
            <span class="required"></span>
          </label>
          <div class="col-sm-9">
            <input class="form-control"
                   formControlName="duration"
                   id="duration"
                   name="duration"
                   type="text">
            <span *ngIf="form.showError('duration', formDir, 'required')"
                  class="help-block"
                  i18n>This field is required!</span>
          </div>
        </div>

        <!-- End time -->
        <div [ngClass]="{'has-error': form.showError('endsAt', formDir)}"
             class="form-group">
          <label class="control-label col-sm-3"
                 for="ends-at">
            <ng-container i18n>End time</ng-container>
            <span class="required"></span>
          </label>
          <div class="col-sm-9">
            <input [bsConfig]="bsConfig"
                   bsDatepicker
                   class="form-control"
                   formControlName="endsAt"
                   id="ends-at"
                   name="ends-at">
            <span *ngIf="form.showError('endsAt', formDir, 'required')"
                  class="help-block"
                  i18n>This field is required!</span>
          </div>
        </div>

        <!-- Matchers -->
        <fieldset>
          <legend i18n>Matchers<span class="required">*</span></legend>
          <div class="col-sm-offset-3 col-sm-9">
            <h5 *ngIf="matchers.length === 0"
                [ngClass]="{'text-warning': !formDir.submitted, 'text-danger': formDir.submitted}">
              <strong i18n>A silence requires at least one matcher</strong>
            </h5>

            <span *ngFor="let matcher of matchers; let i=index;">
              <ng-container *ngTemplateOutlet="matcherTpl; context:{index: i, matcher: matcher}"></ng-container>
            </span>

            <span class="form-control no-border">
              <button type="button"
                      id="add-matcher"
                      class="btn btn-sm btn-default btn-label pull-right"
                      [ngClass]="{'btn-warning': formDir.submitted && matchers.length === 0 }"
                      (click)="showMatcherModal()">
                <i [ngClass]="[icons.width, icons.add]"></i>
                <ng-container i18n>Add matcher</ng-container>
              </button>
            </span>
          </div>
          <div *ngIf="matchers.length && matcherMatch"
               class="col-sm-offset-3 col-sm-9 {{matcherMatch.cssClass}}"
               id="match-state">
            <span class="help-block {{matcherMatch.cssClass}}">
              {{ matcherMatch.status }}
            </span>
          </div>
        </fieldset>
      </div>

      <div class="panel-footer">
        <div class="button-group text-right">
          <cd-submit-button (submitAction)="submit()"
                            [form]="formDir"
                            id="submit"
                            i18n="@@formTitle"
                            type="button">
            {{ action | titlecase }} {{ resource | upperFirst }}
          </cd-submit-button>
          <cd-back-button></cd-back-button>
        </div>
      </div>
    </div>
  </form>
</div>
