<ng-container *transloco="let t; prefix:'edit-external-source-item'">
  <div class="card mt-2">
    <div class="card-body">
      <div class="card-title">
        <div class="container-fluid row mb-2">
          <div class="col-9 col-sm-9"><h4 id="anilist-token-header">{{source.name || t('title')}}</h4></div>
          <div class="col-3 text-end">
            <button class="btn btn-primary btn-sm me-1" (click)="toggleViewMode()">
              @if (isViewMode) {
                <i class="fa-solid fa-pen" aria-hidden="true"></i>
                <span class="visually-hidden">
                  {{t('edit')}}
                </span>
              } @else {
                {{t('cancel')}}
              }
            </button>
            <button class="btn btn-danger btn-sm" (click)="delete()">
              <span class="visually-hidden">{{t('delete')}}</span>
              <i class="fa-solid fa-trash" aria-hidden="true"></i>
            </button>
          </div>
        </div>
      </div>


      <div #collapse="ngbCollapse" [(ngbCollapse)]="isViewMode">
        <form [formGroup]="formGroup">
          <div class="form-group mb-3">
            <label for="host">{{t('name-label')}}</label>
            @if (formGroup.get('name'); as formControl) {
              <input id="name" class="form-control" formControlName="name" type="text"
                     [class.is-invalid]="formControl.invalid && formControl.touched" aria-describedby="name-validations">
              @if (formControl.errors; as errors) {
                <div id="name-validations" class="invalid-feedback">
                  @if (errors.required) {
                    <div>{{t('required')}}</div>
                  }
                  @if (errors.notUnique) {
                    <div>{{t('not-unique')}}</div>
                  }
                </div>
              }

            }

          </div>

          <div class="form-group mb-3">
            <label for="host">{{t('host-label')}}</label>
            @if(formGroup.get('host'); as formControl) {
              <input id="host" class="form-control" formControlName="host" type="url"
                     [class.is-invalid]="formControl.invalid && formControl.touched" aria-describedby="host-validations">
              @if (formControl.errors; as errors) {
                <div id="host-validations" class="invalid-feedback">
                  @if (errors.required) {
                    <div>{{t('required')}}</div>
                  }
                  @if (errors.notUnique) {
                    <div>{{t('not-unique')}}</div>
                  }
                  @if (errors.pattern) {
                    <div>{{t('pattern')}}</div>
                  }
                </div>
              }
            }


          </div>
          <div class="form-group mb-3">
            <label for="api-key">{{t('api-key-label')}}</label>
            @if (formGroup.get('apiKey'); as formControl) {
              <input id="api-key" class="form-control" formControlName="apiKey" type="text"
                     [class.is-invalid]="formControl.invalid && formControl.touched" aria-describedby="api-key-validations">
              @if (formControl.errors; as errors) {
                <div id="api-key-validations" class="invalid-feedback">
                  @if (errors.required) {
                    <div>{{t('required')}}</div>
                  }
                </div>
              }
            }
            <span class="text-muted">{{t('api-key-tooltip')}}</span>

          </div>
        </form>
        <div class="col-auto d-flex d-md-block justify-content-sm-center text-md-end mb-3">
          <button type="submit" class="flex-fill btn btn-primary" aria-describedby="anilist-token-header" (click)="saveForm()">{{t('save')}}</button>
        </div>
      </div>

    </div>
  </div>


</ng-container>
