<ng-container *ngIf="state === 'loadingConnection'; else renderListAndForm">
  <c8y-loading></c8y-loading>
</ng-container>

<c8y-title>{{ 'Connectivity' | translate }}</c8y-title>

<c8y-breadcrumb>
  <c8y-breadcrumb-item
    [icon]="'cog'"
    [label]="'Settings' | translate"
  ></c8y-breadcrumb-item>
  <c8y-breadcrumb-item
    [icon]="'cog'"
    [label]="'Connectivity' | translate"
  ></c8y-breadcrumb-item>
  <c8y-breadcrumb-item
    [icon]="'cog'"
    [label]="'LORIOT' | translate"
  ></c8y-breadcrumb-item>
</c8y-breadcrumb>

<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">
        <div class="card-title">{{ cardHeader | translate }}</div>
      </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(cloneDeep(connection))"
            >
              <c8y-li-icon [icon]="'plug'"></c8y-li-icon>
              <span title="{{ connection.name }}">
                {{ connection.name }}
              </span>
            </c8y-li>

            <c8y-li
              class="c8y-nav-stacked active"
              *ngIf="state === 'addConnections'"
              (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
            class="btn btn-default"
            title="{{ 'Add connection' | translate }}"
            [disabled]="state === 'addConnections'"
            (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
            class="btn btn-clean text-primary"
            title="{{ 'Back' | translate }}"
            (click)="resetEditedUnsavedConnection()"
          >
            <i [c8yIcon]="'chevron-left'"></i>
            <span>{{ 'Back' | translate }}</span>
          </button>
        </div>
        <form
          class="d-contents"
          #connectorsForm="ngForm"
        >
          <div class="flex-grow">
            <div class="card-block large-padding">
              <c8y-form-group>
                <label for="name">
                  {{ 'Name' | translate }}
                </label>
                <input
                  class="form-control"
                  id="name"
                  name="name"
                  type="text"
                  required
                  [placeholder]="'e.g. LORIOT connection' | translate"
                  [(ngModel)]="connection.name"
                  [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
                  class="form-control"
                  id="description"
                  name="description"
                  type="text"
                  [placeholder]="
                    'e.g. This connection has a built-in functionality to…' | translate
                  "
                  [(ngModel)]="connection.description"
                />
              </c8y-form-group>

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

              <button
                class="btn btn-default"
                name="changePassword"
                type="button"
                *ngIf="state === 'updateConnection'"
                (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
              class="btn btn-default"
              title="{{ 'Cancel' | translate }}"
              type="button"
              (click)="setModel()"
              translate
            >
              Cancel
            </button>
            <button
              class="btn btn-danger"
              title="{{ 'Delete' | translate }}"
              type="button"
              data-cy="loriot-multiple-lns-connector.component--delete-connectivity"
              *ngIf="state === 'updateConnection'"
              (click)="deleteConnection(originalConnection)"
              translate
            >
              Delete
            </button>
            <button
              class="btn btn-primary"
              title="{{ 'Save' | translate }}"
              type="submit"
              [disabled]="!this.connectorsForm.form.valid || this.connectorsForm.form.pristine"
              (click)="save()"
              data-cy="loriot-multiple-lns-connector.component--button-save"
              translate
            >
              Save
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</ng-template>