<div class="row">
  <div class="col-xs-12 col-md-8">
    <form class="card card--fullpage"
      [formGroup]="formGroup"
      novalidate
    >
      <div class="card-header separator">
        <h4 class="card-title" translate>Credentials</h4>
      </div>
      <div class="inner-scroll">
        <div class="card-block" *ngIf="isEdit">
          <c8y-form-group>
            <label for="baseUrl" translate>
              Base URL
            </label>
            <input
              id="baseUrl"
              name="baseUrl"
              type="text"
              class="form-control"
              placeholder="{{ 'e.g. https://impact.example.com' | translate }}"
              autocomplete="off"
              formControlName="baseUrl"
            />
          </c8y-form-group>
          <c8y-form-group>
            <label for="user" translate>
              User
            </label>
            <input
              id="user"
              name="user"
              type="text"
              class="form-control"
              placeholder="{{ 'e.g. joe`LOCALIZE`' | translate }}"
              required
              autocomplete="off"
              formControlName="user"
            />
            <c8y-messages>
              <c8y-message *ngIf="formGroup?.controls?.user?.errors?.required" translate>
                This field is required.
              </c8y-message>
            </c8y-messages>
          </c8y-form-group>
          <c8y-form-group>
            <label for="password" translate>
              Password
            </label>
            <input
              id="password"
              name="password"
              type="password"
              class="form-control"
              placeholder="{{ 'e.g. my_password' | translate }}"
              required
              autocomplete="off"
              formControlName="password"
            />
            <c8y-messages>
              <c8y-message *ngIf="formGroup?.controls?.password?.errors?.required" translate>
                This field is required.
              </c8y-message>
            </c8y-messages>
          </c8y-form-group>
          <c8y-form-group>
            <label for="groupName" translate>
              IMPACT group name prefix
            </label>
            <input
              id="groupName"
              name="groupName"
              type="text"
              class="form-control"
              placeholder="{{ 'e.g. Europe.Nokia`LOCALIZE`' | translate }}"
              formControlName="groupName"
            />
          </c8y-form-group>
        </div>
        <div class="card-block bg-gray-white">
          <div class="d-flex">
            <c8y-status-display
              [status]="connectionStatus?.status"
              [baseUrl]="connectionStatus?.options?.baseUrl"
            ></c8y-status-display>

            <div class="d-flex flex-item-middle flex-item-right">
              <label class="c8y-switch">
                <input type="checkbox" formControlName="initializeDevices" />
                <span></span> {{ 'Refresh devices' | translate }}
              </label>
              <a
                container="body"
                class="btn-clean m-l-4 flex-item-middle"
                popover="{{ 'Refresh device resources as part of connecting' | translate }}"
                placement="right"
                outsideClick="false"
              >
                <i c8yIcon="question-circle-o text-primary"></i>
              </a>
            </div>
          </div>
        </div>
        <div class="card-block" *ngIf="credentialsExist && !isEdit">
          <p translate>
            Credentials already provided.<br />
            Click "Replace credentials" below to overwrite them.
          </p>
        </div>
      </div>
      <div class="card-footer separator">
        <button class="btn btn-default"
          title="{{ 'Replace credentials' | translate }}"
          type="submit"
          *ngIf="!isEdit"
          (click)="replaceCredentials()"
        >
          {{ 'Replace credentials' | translate }}
        </button>
        <button class="btn btn-danger"
          title="{{ 'Delete credentials' | translate }}"
          type="button"
          *ngIf="credentialsExist && isEdit"
          (click)="deleteCredentials()"
        >
          {{ 'Delete credentials' | translate }}
        </button>
        <button class="btn btn-primary"
          title="{{ 'Save credentials & connect' | translate }}"
          type="button"
          *ngIf="isEdit"
          [disabled]="formGroup.invalid"
          (click)="saveCredentials()"
        >
          {{ 'Save credentials & connect' | translate }}
        </button>
      </div>
    </form>
  </div>
</div>