<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">
        <h4 class="text-normal text-right text-left-xs">
          {{ requestName }}
        </h4>
      </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"
                    id="url"
                    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="body" class="control-label" translate>Body</label>
                  <input
                    type="text"
                    class="form-control"
                    name="body"
                    id="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" *ngFor="let header of requestConfiguration.headers; index as headerIndex;">
              <div class="col-md-5">
                <c8y-form-group>
                  <label [for]="'headerKey' + headerIndex" class="visible-sm visible-xs" translate>Key</label>
                  <input
                    class="form-control"
                    [name]="'headerKey' + headerIndex"
                    [id]="'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]="'headerValue' + headerIndex" class="visible-sm visible-xs" translate>Value</label>
                  <input
                    class="form-control"
                    [name]="'headerValue' + headerIndex"
                    [id]="'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-add-block m-t-8"
            (click)="addCustomValue(requestConfiguration.headers)"
          >
            <i c8yIcon="plus-circle"></i>
            <span translate>Add header</span>
          </button>
        </div>

        <div class="legend form-block" translate>Request parameters</div>
        <div class="tight-grid" *ngFor="let requestParam of requestConfiguration.requestParams; index as paramIndex;">
            <div class="col-md-5">
              <c8y-form-group>
                <label [for]="'paramKey' + paramIndex" class="visible-sm visible-xs" translate>Key</label>
                <input
                  class="form-control"
                  [name]="'paramKey' + paramIndex"
                  [id]="'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]="'paramValue' + paramIndex" class="visible-sm visible-xs" translate>Value</label>
                <input
                  class="form-control"
                  [name]="'paramValue' + paramIndex"
                  [id]="'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 }}"
          class="btn-add-block m-t-8"
          (click)="addCustomValue(requestConfiguration.requestParams)"
        >
          <i c8yIcon="plus-circle"></i>
          <span translate>Add request parameter</span>
        </button>
      </div>
    </div>
  </div>
</fieldset>