<fieldset ngModelGroup="{{ requestName }}" id="{{ requestType }}">
  <div class="col-md-12 p-t-24">
    <div class="row m-l-8 m-r-8">
      <div class="col-xs-12 col-sm-3 col-md-2 m-b-xs-8">
        <div class="h4 text-normal text-right text-left-xs">
          {{ requestName }}
        </div>
      </div>

      <div class="col-xs-12 col-sm-9 col-md-10 col-lg-9" *ngIf="templateModel">
        <div class="row" *ngIf="shouldShow('authorizationRequest')">
          <div class="col-sm-6">
            <c8y-form-group>
              <label for="url" class="control-label" translate>URL</label>
              <input
                type="url"
                class="form-control"
                name="url"
                [(ngModel)]="requestConfiguration.url"
                [placeholder]="
                  'e.g. {{ example }}' | translate: { example: 'http://www.example.com/' }
                "
                c8yDefaultValidation="httpUrl"
                [required]="requestType !== 'logoutRequest'"
              />
            </c8y-form-group>
          </div>
        </div>

        <div class="row">
          <div *ngIf="requestType !== 'authorizationRequest' && requestType !== 'logoutRequest'">
            <div class="col-sm-6">
              <c8y-form-group>
                <label [for]="requestType + 'body'" class="control-label" translate>Body</label>
                <input
                  type="text"
                  class="form-control"
                  name="body"
                  [id]="requestType + 'body'"
                  [(ngModel)]="requestConfiguration.body"
                  required
                />
              </c8y-form-group>
            </div>
          </div>
        </div>

        <div *ngIf="requestType !== 'logoutRequest'">
          <div class="legend form-block" translate>Headers</div>
          <div
            class="tight-grid"
            data-cy="refreshRequestHeaders"
            *ngFor="let header of requestConfiguration.headers; index as headerIndex"
          >
            <div class="col-md-5">
              <c8y-form-group>
                <label [for]="requestType + 'headerKey' + headerIndex" class="visible-sm visible-xs" translate>
                  Key
                </label>
                <input
                  class="form-control"
                  [name]="'headerKey' + headerIndex"
                  [id]="requestType + 'headerKey' + headerIndex"
                  [(ngModel)]="header.key"
                  [placeholder]="'e.g. {{ example }}' | translate: { example: 'Authorization' }"
                  required
                />
              </c8y-form-group>
            </div>
            <div class="col-md-5">
              <c8y-form-group>
                <label [for]="requestType + 'headerValue' + headerIndex" class="visible-sm visible-xs" translate>
                  Value
                </label>
                <input
                  class="form-control"
                  [name]="'headerValue' + headerIndex"
                  [id]="requestType + 'headerValue' + headerIndex"
                  [(ngModel)]="header.value"
                  [placeholder]="
                    'e.g. {{ example }}' | translate: { example: 'Basic USY7jW9jb2RlX2=' }
                  "
                  required
                />
              </c8y-form-group>
            </div>
            <div class="col-md-1">
              <c8y-form-group>
                <button
                  title="{{ 'Remove' | translate }}"
                  class="btn btn-link hidden-xs hidden-sm"
                  (click)="removeCustomValue(requestConfiguration.headers, header)"
                  type="button"
                >
                  <i c8yIcon="minus-circle" class="text-danger"></i>
                </button>
                <button
                  title="{{ 'Remove' | translate }}"
                  class="btn btn-danger btn-block btn-sm visible-xs visible-sm"
                  (click)="removeCustomValue(requestConfiguration.headers, header)"
                  type="button"
                >
                  <i c8yIcon="minus-circle"></i>
                  <span translate>Remove</span>
                </button>
              </c8y-form-group>
            </div>
          </div>
          <button
            title="{{ 'Add header' | translate }}"
            class="btn btn-default m-t-8 m-b-16"
            (click)="addCustomValue(requestConfiguration.headers)"
          >
            <i c8yIcon="plus-circle" class="m-r-4"></i>
            <span translate>Add header</span>
          </button>
        </div>

        <div class="legend form-block" translate>Request parameters</div>
        <div
          class="tight-grid"
          data-cy="requestParam"
          *ngFor="let requestParam of requestConfiguration.requestParams; index as paramIndex"
        >
          <div class="col-md-5">
            <c8y-form-group>
              <label [for]="requestType + 'paramKey' + paramIndex" class="visible-sm visible-xs" translate>
                Key - {{paramIndex}}
              </label>
              <input
                class="form-control"
                [name]="'paramKey' + paramIndex"
                [id]="requestType + 'paramKey' + paramIndex"
                [(ngModel)]="requestParam.key"
                [placeholder]="'e.g. {{ example }}' | translate: { example: 'client_id' }"
                required
              />
            </c8y-form-group>
          </div>

          <div class="col-md-5">
            <c8y-form-group>
              <label [for]="requestType + 'paramValue' + paramIndex" class="visible-sm visible-xs" translate>
                Value
              </label>
              <input
                class="form-control"
                [name]="'paramValue' + paramIndex"
                [id]="requestType + 'paramValue' + paramIndex"
                [(ngModel)]="requestParam.value"
                [placeholder]="'e.g. {{ example }}' | translate: { example: '${clientId}' }"
                required
              />
            </c8y-form-group>
          </div>

          <div class="col-md-1">
            <c8y-form-group>
              <button
                class="btn btn-link hidden-xs hidden-sm"
                (click)="removeCustomValue(requestConfiguration.requestParams, requestParam)"
                type="button"
                title="{{ 'Remove' | translate }}"
              >
                <i c8yIcon="minus-circle" class="text-danger"></i>
              </button>

              <button
                class="btn btn-danger btn-block btn-sm visible-xs visible-sm"
                (click)="removeCustomValue(requestConfiguration.requestParams, requestParam)"
                type="button"
                title="{{ 'Remove' | translate }}"
              >
                <i c8yIcon="minus-circle"></i>
                <span translate>Remove</span>
              </button>
            </c8y-form-group>
          </div>
        </div>

        <button
          title="{{ 'Add request parameter' | translate }}"
          type="button"
          class="btn btn-default m-t-8 m-b-16"
          (click)="addCustomValue(requestConfiguration.requestParams)"
        >
          <i c8yIcon="plus-circle" class="m-r-4"></i>
          <span translate>Add request parameter</span>
        </button>
      </div>
    </div>
  </div>
</fieldset>