<ng-container *transloco="let t; read: 'manage-email-settings'">
  <div class="container-fluid">
    <form [formGroup]="settingsForm" *ngIf="serverSettings !== undefined">
      <h4>{{t('title')}}</h4>
      <p [innerHTML]="t('description', {link: link}) | safeHtml">
        <span class="text-warning">{{t('send-to-warning')}}</span>
      </p>
      <div class="mb-3">
        <label for="settings-emailservice" class="form-label">{{t('email-url-label')}}</label><i class="ms-1 fa fa-info-circle" placement="right" [ngbTooltip]="emailServiceTooltip" role="button" tabindex="0"></i>
        <ng-template #emailServiceTooltip>{{t('email-url-tooltip')}}</ng-template>
        <span class="visually-hidden" id="settings-emailservice-help"><ng-container [ngTemplateOutlet]="emailServiceTooltip"></ng-container></span>
        <div class="input-group">
          <input id="settings-emailservice" aria-describedby="settings-emailservice-help" class="form-control" formControlName="emailServiceUrl" type="url" autocapitalize="off" inputmode="url">
          <button class="btn btn-outline-secondary" (click)="resetEmailServiceUrl()">
            {{t('reset')}}
          </button>
          <button class="btn btn-outline-secondary" (click)="testEmailServiceUrl()">
            {{t('test')}}
          </button>
        </div>
      </div>

      <div class="mb-3">
        <label for="settings-hostname" class="form-label">{{t('host-name-label')}}</label><i class="fa fa-info-circle ms-1" placement="right" [ngbTooltip]="hostNameTooltip" role="button" tabindex="0"></i>
        <ng-template #hostNameTooltip>{{t('host-name-tooltip')}}</ng-template>
        <span class="visually-hidden" id="settings-hostname-help">
          <ng-container [ngTemplateOutlet]="hostNameTooltip"></ng-container>
        </span>
        <input id="settings-hostname" aria-describedby="settings-hostname-help" class="form-control" formControlName="hostName" type="text"
               [class.is-invalid]="settingsForm.get('hostName')?.invalid && settingsForm.get('hostName')?.touched">
        <div id="hostname-validations" class="invalid-feedback" *ngIf="settingsForm.dirty || settingsForm.touched">
          <div *ngIf="settingsForm.get('hostName')?.errors?.pattern">
            {{t('host-name-validation')}}
          </div>
        </div>
      </div>

      <div class="col-auto d-flex d-md-block justify-content-sm-center text-md-end">
        <button type="button" class="flex-fill btn btn-secondary me-2" (click)="resetToDefaults()">{{t('reset-to-default')}}</button>
        <button type="button" class="flex-fill btn btn-secondary me-2" (click)="resetForm()">{{t('reset')}}</button>
        <button type="submit" class="flex-fill btn btn-primary" (click)="saveSettings()" [disabled]="!settingsForm.dirty">{{t('save')}}</button>
      </div>
    </form>
  </div>

</ng-container>
