<ng-container *transloco="let t; read:'edit-device'">
  <div class="card">
    <form [formGroup]="settingsForm" class="card-body">
      <div class="row g-0 mb-2">
        <div class="col-md-3 col-sm-12 pe-2">
          <label for="settings-name" class="form-label">{{t('device-name-label')}}</label>
          <input id="settings-name" class="form-control" formControlName="name" type="text" [class.is-invalid]="settingsForm.get('name')?.invalid && settingsForm.get('name')?.touched">
          <ng-container *ngIf="settingsForm.get('name')?.errors as errors">
            <p class="invalid-feedback" *ngIf="errors.required">
              {{t('required-field')}}
            </p>
          </ng-container>
        </div>

        <div class="col-md-3 col-sm-12 pe-2">
          <label for="email" class="form-label">{{t('email-label')}}</label><i class="fa fa-info-circle ms-1" placement="right" [ngbTooltip]="emailTooltip" role="button" tabindex="0"></i>
          <ng-template #emailTooltip>{{t('email-tooltip')}}</ng-template>
          <span class="visually-hidden" id="email-help">
            <ng-container [ngTemplateOutlet]="emailTooltip"></ng-container>
          </span>

          <input id="email" aria-describedby="email-help"
                 class="form-control" formControlName="email" type="email" inputmode="email"
                 placeholder="id@kindle.com" [class.is-invalid]="settingsForm.get('email')?.invalid && settingsForm.get('email')?.touched">
          <ng-container *ngIf="settingsForm.get('email')?.errors as errors">
            <p class="invalid-feedback" *ngIf="errors.email">
              {{t('valid-email')}}
            </p>
            <p class="invalid-feedback" *ngIf="errors.required">
              {{t('required-field')}}
            </p>
          </ng-container>
        </div>

        <div class="col-md-3 col-sm-12 pe-2">
          <label for="device-platform" class="form-label">{{t('device-platform-label')}}</label>
          <select id="device-platform" aria-describedby="device-platform-help" class="form-select" formControlName="platform"
                  [class.is-invalid]="settingsForm.get('platform')?.invalid && settingsForm.get('platform')?.touched">
            <option *ngFor="let platform of devicePlatforms" [value]="platform">{{platform | devicePlatform}}</option>
          </select>
          <ng-container *ngIf="settingsForm.get('platform')?.errors as errors">
            <p class="invalid-feedback" *ngIf="errors.required">
              {{t('required-field')}}
            </p>
          </ng-container>
        </div>
      </div>
      <div class="col-auto d-flex d-md-block justify-content-sm-center text-md-end">
        <button type="submit" class="flex-fill btn btn-primary" (click)="addDevice()" [disabled]="!settingsForm.dirty">{{t('save')}}</button>
      </div>
    </form>
  </div>
</ng-container>
