<ng-container *ngIf="state === 'loadingConnection'; else renderListAndForm">
  <c8y-loading></c8y-loading>
</ng-container>
<ng-template #renderListAndForm>
  <no-connections-found
    (onAction)="addConnection()"
    *ngIf="connections.length === 0 && state !== 'addConnections'"
    [header]="cardHeader | translate"
  >
  </no-connections-found>
  <div>
    <div
      class="card content-fullpage split-view--5-7"
      *ngIf="connections.length !== 0 || state === 'addConnections'"
    >
      <div class="card-header separator grid__col--fullspan">
        <h4>{{ cardHeader | translate }}</h4>
      </div>
      <div class="inner-scroll split-view__list">
        <div class="bg-gray-white flex-grow">
          <c8y-list-group class="nav c8y-nav-stacked">
            <c8y-li
              class="c8y-stacked-item p-0"
              [class.active]="connection.name === connectionBeingEdited"
              *ngFor="let connection of connections; let index = index"
              (click)="setModel(connection)"
            >
              <c8y-li-icon [icon]="'plug'"></c8y-li-icon>
              <span title="{{ connection.name }}">
                {{ connection.name }}
              </span>
            </c8y-li>

            <c8y-li
              *ngIf="state === 'addConnections'"
              class="c8y-nav-stacked active"
              (click)="addConnection()"
            >
              <c8y-li-icon [icon]="'plug'"></c8y-li-icon>
              {{ 'New connection' | translate }}
            </c8y-li>
          </c8y-list-group>
        </div>
        <div class="card-footer separator-top">
          <button
            [disabled]="state === 'addConnections'"
            title="{{ 'Add connection' | translate }}"
            class="btn btn-default"
            (click)="addConnection()"
          >
            <i [c8yIcon]="'plus-circle'"></i>
            {{ 'Add connection' | translate }}
          </button>
        </div>
      </div>

      <!-- 'split-view__detail--selected' condition needs to be fixed. this is needed so that both columns are visible in tablet format -->

      <div
        class="inner-scroll split-view__detail"
        [class]="{ 'split-view__detail--selected': connection }"
      >
        <div class="card-header separator visible-sm visible-xs fit-w sticky-top">
          <button
            title="{{ 'Back' | translate }}"
            class="btn btn-clean text-primary"
            (click)="resetEditedUnsavedConnection()"
          >
            <i [c8yIcon]="'chevron-left'"></i>
            <span>{{ 'Back' | translate }}</span>
          </button>
        </div>
        <form #connectorsForm="ngForm" class="d-contents">
          <div class="flex-grow">
            <div class="card-block large-padding">
              <c8y-form-group>
                <label for="name">
                  {{ 'Name' | translate }}
                </label>
                <input
                  type="text"
                  class="form-control"
                  [placeholder]="'e.g. LORIOT connection' | translate"
                  id="name"
                  name="name"
                  [(ngModel)]="connection.name"
                  required                  
                  [pattern]="namePattern"
                />
                <c8y-messages >
                  <c8y-message name="pattern" [text]="namePatternError"></c8y-message>
                </c8y-messages>
              </c8y-form-group>

              <c8y-form-group>
                <label for="description">
                  {{ 'Description' | translate }}
                </label>
                <input
                  type="text"
                  class="form-control"
                  [placeholder]="'e.g. This connection has a built-in functionality to…' | translate"
                  id="description"
                  name="description"
                  [(ngModel)]="connection.description"                  
                />
              </c8y-form-group>

              <c8y-form-group>
                <label for="baseUrl">
                  {{ 'URL' | translate }}
                </label>
                <input
                  type="text"
                  class="form-control"
                  [placeholder]="
                    'e.g. {{ example }}' | translate: { example: 'https://ap3.loriot.io' }
                  "
                  id="baseUrl"
                  name="baseUrl"
                  [(ngModel)]="connection.baseUrl"
                  required
                />
              </c8y-form-group>
              <c8y-form-group>
                <label for="username">
                  {{ 'Username' | translate }}
                </label>
                <input
                  type="text"
                  class="form-control"
                  placeholder="{{ 'e.g. joe`LOCALIZE`' | translate }}"
                  id="username"
                  name="username"
                  [(ngModel)]="connection.username"
                  required
                />
              </c8y-form-group>
              <c8y-form-group *ngIf="showPassword">
                <label for="password">
                  {{ 'Password' | translate }}
                </label>
                <input
                  type="password"
                  class="form-control"
                  placeholder="{{ 'e.g. my_password' | translate }}"
                  id="password"
                  name="password"
                  [(ngModel)]="connection.password"
                  required
                />
              </c8y-form-group>

              <button
                *ngIf="state === 'updateConnection'"
                type="button"
                class="btn btn-default"
                name="changePassword"
                (click)="changePassword()"
              >
                <span title="{{ 'Change password' | translate }}" *ngIf="!showPassword">{{
                  'Change password' | translate
                }}</span>
                <span title="{{ 'Cancel password change' | translate }}" *ngIf="showPassword">{{
                  'Cancel password change' | translate
                }}</span>
              </button>
            </div>
          </div>

          <div class="card-footer separator-top">
            <button
              title="{{ 'Cancel' | translate }}"
              class="btn btn-default"
              (click)="setModel()"
              translate
              type="button"
            >
              Cancel
          </button>
            <button
              *ngIf="state === 'updateConnection'"
              title="{{ 'Delete' | translate }}"
              class="btn btn-danger"
              (click)="deleteConnection(connection)"
              translate
              type="button"
            >
              Delete
          </button>
            <button
              [disabled]="!this.connectorsForm.form.valid || this.connectorsForm.form.pristine"
              title="{{ 'Save' | translate }}"
              class="btn btn-primary"
              (click)="save()"
              translate
              type="submit"
            >
              Save
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</ng-template>