<ng-container *transloco="let t; prefix: 'settingsEmail.provider'">
  <div class="settings-card">
    <div class="section-header">
      <div class="section-header-row">
        <div class="section-header-text">
          <h3 class="section-title">
            <i class="pi pi-server"></i>
            {{ t('title') }}
          </h3>
          <p class="section-description">
            {{ t('description') }}
          </p>
        </div>
        <p-button
          icon="pi pi-plus"
          [label]="t('addProvider')"
          severity="success"
          size="small"
          [outlined]="true"
          (onClick)="openCreateProviderDialog()">
        </p-button>
      </div>
    </div>

    <div class="section-body">
      @if (emailProviders.length === 0) {
        <div class="empty-state">
          <i class="pi pi-envelope"></i>
          <p class="empty-title">{{ t('emptyTitle') }}</p>
          <p class="empty-subtitle">{{ t('emptySubtitle') }}</p>
        </div>
      } @else {
        <div class="providers-list">
          @for (provider of emailProviders; track provider.id) {
            <div class="provider-item" [class.is-default]="provider.id === defaultProviderId">
              <div class="provider-header">
                <div class="provider-info">
                  <div class="provider-name-row">
                    <p-radioButton
                      name="defaultProvider"
                      [value]="provider.id"
                      [(ngModel)]="defaultProviderId"
                      (onClick)="setDefaultProvider(provider)">
                    </p-radioButton>
                    @if (provider.isEditing) {
                      <input type="text" pInputText [(ngModel)]="provider.name" [placeholder]="t('providerNamePlaceholder')" class="name-input"/>
                    } @else {
                      <span class="provider-name">{{ provider.name }}</span>
                      @if (provider.shared) {
                        <span class="shared-badge" [pTooltip]="t('sharedTooltip')">
                          <i class="pi pi-share-alt"></i>
                        </span>
                      }
                      @if (provider.id === defaultProviderId) {
                        <span class="default-badge">{{ t('default') }}</span>
                      }
                    }
                  </div>
                </div>
                <div class="provider-actions">
                  @if (!provider.isEditing) {
                    <p-button
                      [icon]="canModifyProvider(provider) ? 'pi pi-pencil' : 'pi pi-lock'"
                      [severity]="canModifyProvider(provider) ? 'info' : 'secondary'"
                      size="small"
                      [outlined]="true"
                      [rounded]="true"
                      [disabled]="!canModifyProvider(provider)"
                      (onClick)="canModifyProvider(provider) && toggleEdit(provider)"
                      [pTooltip]="canModifyProvider(provider) ? t('editProvider') : t('cannotEditShared')"
                      tooltipPosition="left">
                    </p-button>
                    <p-button
                      [icon]="canModifyProvider(provider) ? 'pi pi-trash' : 'pi pi-lock'"
                      [severity]="canModifyProvider(provider) ? 'danger' : 'secondary'"
                      size="small"
                      [outlined]="true"
                      [rounded]="true"
                      [disabled]="!canModifyProvider(provider)"
                      (onClick)="canModifyProvider(provider) && deleteProvider(provider)"
                      [pTooltip]="canModifyProvider(provider) ? t('deleteProvider') : t('cannotDeleteShared')"
                      tooltipPosition="left">
                    </p-button>
                  } @else {
                    <p-button
                      icon="pi pi-check"
                      severity="success"
                      size="small"
                      [outlined]="true"
                      [rounded]="true"
                      (onClick)="saveProvider(provider)"
                      [pTooltip]="t('saveChanges')">
                    </p-button>
                    <p-button
                      icon="pi pi-times"
                      severity="secondary"
                      size="small"
                      [outlined]="true"
                      [rounded]="true"
                      (onClick)="toggleEdit(provider)"
                      [pTooltip]="'common.cancel' | transloco">
                    </p-button>
                  }
                </div>
              </div>

              <div class="provider-details">
                <div class="detail-grid">
                  <div class="detail-item">
                    <label class="detail-label">
                      <i class="pi pi-server"></i>
                      {{ t('host') }}
                    </label>
                    @if (provider.isEditing) {
                      <input type="text" pInputText [(ngModel)]="provider.host" [placeholder]="t('hostPlaceholder')"/>
                    } @else {
                      <span class="detail-value">{{ provider.host }}</span>
                    }
                  </div>

                  <div class="detail-item">
                    <label class="detail-label">
                      <i class="pi pi-link"></i>
                      {{ t('port') }}
                    </label>
                    @if (provider.isEditing) {
                      <input type="number" pInputText [(ngModel)]="provider.port" [placeholder]="t('portPlaceholder')"/>
                    } @else {
                      <span class="detail-value">{{ provider.port }}</span>
                    }
                  </div>

                  <div class="detail-item">
                    <label class="detail-label">
                      <i class="pi pi-user"></i>
                      {{ t('username') }}
                    </label>
                    @if (provider.isEditing) {
                      <input type="text" pInputText [(ngModel)]="provider.username" [placeholder]="t('usernamePlaceholder')"/>
                    } @else {
                      <span class="detail-value">{{ provider.username }}</span>
                    }
                  </div>

                  <div class="detail-item">
                    <label class="detail-label">
                      <i class="pi pi-lock"></i>
                      {{ t('password') }}
                    </label>
                    @if (provider.isEditing) {
                      <input type="password" pInputText [(ngModel)]="provider.password" [placeholder]="t('passwordPlaceholder')"/>
                    } @else {
                      <span class="detail-value password-hidden">********</span>
                    }
                  </div>

                  <div class="detail-item detail-item-wide">
                    <label class="detail-label">
                      <i class="pi pi-envelope"></i>
                      {{ t('fromAddress') }}
                    </label>
                    @if (provider.isEditing) {
                      <input type="email" pInputText [(ngModel)]="provider.fromAddress" [placeholder]="t('fromAddressPlaceholder')"/>
                    } @else {
                      <span class="detail-value">{{ provider.fromAddress }}</span>
                    }
                  </div>
                </div>

                <div class="toggle-options">
                  <div class="toggle-item">
                    <p-checkbox
                      [(ngModel)]="provider.auth"
                      [binary]="true"
                      [disabled]="!provider.isEditing"
                      inputId="auth-{{provider.id}}">
                    </p-checkbox>
                    <label [for]="'auth-' + provider.id" class="toggle-label">{{ t('authentication') }}</label>
                  </div>

                  <div class="toggle-item">
                    <p-checkbox
                      [(ngModel)]="provider.startTls"
                      [binary]="true"
                      [disabled]="!provider.isEditing"
                      inputId="starttls-{{provider.id}}">
                    </p-checkbox>
                    <label [for]="'starttls-' + provider.id" class="toggle-label">{{ t('startTls') }}</label>
                  </div>

                  @if (isAdmin) {
                    <div class="toggle-item">
                      <p-checkbox
                        [(ngModel)]="provider.shared"
                        [binary]="true"
                        (onChange)="toggleShared(provider)"
                        inputId="shared-{{provider.id}}"
                        [pTooltip]="t('shareTooltip')">
                      </p-checkbox>
                      <label [for]="'shared-' + provider.id" class="toggle-label">{{ t('shared') }}</label>
                    </div>
                  }
                </div>
              </div>
            </div>
          }
        </div>
      }
    </div>
  </div>
</ng-container>
