<div class="list-group">
  <div class="list-group-item">
    <div class="flex-row">
      <div class="list-item-switch">
        <label class="c8y-switch">
          <input
            type="checkbox"
            name="hasCustomAction"
            [(ngModel)]="hasCustomAction"
            (click)="updateCustomAction()"
          />
          <span></span>
        </label>
      </div>
      <div class="list-item-icon">
        <i c8yIcon="wrench"></i>
      </div>
      <div class="list-item-title" translate>
        Custom action
      </div>
    </div>
    <div [collapse]="!hasCustomAction" [isAnimated]="true">
      <div class="p-t-8" *ngIf="hasCustomAction">
        <fieldset ngModelGroup="headers">
          <div class="legend form-block" translate>Headers</div>
          <div class="tight-grid flex-row hidden-xs">
            <div class="col-sm-4">
              <label translate>Key</label>
            </div>
            <div class="col-sm-4">
              <label translate>Value</label>
            </div>
          </div>
          <div
            *ngFor="let header of headers; trackBy: trackByIndex; let i = index; last as isLast"
            class="flex-row tight-grid row"
            [ngModelGroup]="i"
          >
            <div class="col-xs-5 col-sm-4">
              <c8y-form-group class="form-group-sm">
                <label class="visible-xs" translate>Key</label>
                <div class="input-group">
                  <input
                    class="form-control"
                    type="text"
                    name="key"
                    placeholder="{{ 'e.g.' | translate }} Content-Type"
                    required
                    [(ngModel)]="header.key"
                  />
                </div>
              </c8y-form-group>
            </div>
            <div class="col-xs-5 col-sm-4">
              <c8y-form-group class="form-group-sm">
                <label class="visible-xs" translate>Value</label>
                <div class="input-group">
                  <input
                    class="form-control"
                    type="text"
                    name="value"
                    placeholder="{{ 'e.g.' | translate }} application/json"
                    required
                    [(ngModel)]="header.value"
                  />
                </div>
              </c8y-form-group>
            </div>
            <div class="col-xs-2">
              <div class="form-group">
                <label class="visible-xs">&nbsp;</label>
                <button class="btn btn-clean" *ngIf="customAction.headers.length !== 1">
                  <i c8yIcon="minus-circle" class="text-danger" (click)="removeCustomAction(i)"></i>
                </button>
                <button class="btn btn-clean" *ngIf="isLast">
                  <i c8yIcon="plus-circle" class="text-primary" (click)="addHeader()"></i>
                </button>
              </div>
            </div>
          </div>
        </fieldset>
        <div class="legend form-block" translate>Action</div>
        <div class="row">
          <div class="col-md-4">
            <c8y-form-group class="form-group-sm">
              <label>
                <span translate>Endpoint</span>
              </label>
              <div class="input-group">
                <input
                  class="form-control"
                  type="text"
                  name="endpoint"
                  placeholder="{{ 'e.g.' | translate }} http://localhost:1080/cucumber"
                  required
                  [(ngModel)]="customAction.endpoint"
                />
              </div>
            </c8y-form-group>
          </div>
          <div class="col-md-4">
            <c8y-form-group class="form-group-sm">
              <label translate>Body template</label>
              <textarea
                #model='ngModel'
                [heightPerRow]="40"
                class="form-control"
                rows="3"
                name="bodyTemplate"
                placeholder="({{'required' | translate}})"
                [(ngModel)]="customAction.bodyTemplate"
                required
              ></textarea>
              <div class="help-block" *ngIf="model.untouched || !model.errors">
                {{ 'The following placeholders are available:' | translate }} {{ placeholders }}
              </div>
            </c8y-form-group>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>