<ng-container *transloco="let t; prefix: 'settingsEmail.recipient'">
  <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-users"></i>
            {{ t('title') }}
          </h3>
          <p class="section-description">
            {{ t('description') }}
          </p>
        </div>
        <p-button
          icon="pi pi-plus"
          [label]="t('addRecipient')"
          severity="success"
          size="small"
          [outlined]="true"
          (onClick)="openAddRecipientDialog()">
        </p-button>
      </div>
    </div>

    <div class="section-body">
      @if (recipientEmails.length === 0) {
        <div class="empty-state">
          <i class="pi pi-users"></i>
          <p class="empty-title">{{ t('emptyTitle') }}</p>
          <p class="empty-subtitle">{{ t('emptySubtitle') }}</p>
        </div>
      } @else {
        <div class="recipients-list">
          @for (recipient of recipientEmails; track recipient.id) {
            <div class="recipient-item" [class.is-default]="recipient.id === defaultRecipientId">
              <div class="recipient-content">
                <div class="recipient-select">
                  <p-radioButton
                    name="defaultRecipient"
                    [value]="recipient.id"
                    [(ngModel)]="defaultRecipientId"
                    (onClick)="setDefaultRecipient(recipient)">
                  </p-radioButton>
                </div>

                <div class="recipient-info">
                  @if (recipient.isEditing) {
                    <div class="edit-form">
                      <div class="form-field">
                        <label class="field-label">
                          <i class="pi pi-envelope"></i>
                          {{ t('email') }}
                        </label>
                        <input type="email" pInputText [(ngModel)]="recipient.email" [placeholder]="t('emailPlaceholder')"/>
                      </div>
                      <div class="form-field">
                        <label class="field-label">
                          <i class="pi pi-user"></i>
                          {{ t('name') }}
                        </label>
                        <input type="text" pInputText [(ngModel)]="recipient.name" [placeholder]="t('namePlaceholder')"/>
                      </div>
                    </div>
                  } @else {
                    <div class="recipient-details">
                      <div class="recipient-email">
                        <i class="pi pi-envelope"></i>
                        <span>{{ recipient.email }}</span>
                        @if (recipient.id === defaultRecipientId) {
                          <span class="default-badge">{{ t('default') }}</span>
                        }
                      </div>
                      @if (recipient.name) {
                        <div class="recipient-name">
                          <i class="pi pi-user"></i>
                          <span>{{ recipient.name }}</span>
                        </div>
                      }
                    </div>
                  }
                </div>

                <div class="recipient-actions">
                  @if (!recipient.isEditing) {
                    <p-button
                      icon="pi pi-pencil"
                      severity="info"
                      size="small"
                      [outlined]="true"
                      [rounded]="true"
                      (onClick)="toggleEditRecipient(recipient)"
                      [pTooltip]="t('editRecipient')">
                    </p-button>
                    <p-button
                      icon="pi pi-trash"
                      severity="danger"
                      size="small"
                      [outlined]="true"
                      [rounded]="true"
                      (onClick)="deleteRecipient(recipient)"
                      [pTooltip]="t('deleteRecipient')">
                    </p-button>
                  } @else {
                    <p-button
                      icon="pi pi-check"
                      severity="success"
                      size="small"
                      [outlined]="true"
                      [rounded]="true"
                      (onClick)="saveRecipient(recipient)"
                      [pTooltip]="t('saveChanges')">
                    </p-button>
                    <p-button
                      icon="pi pi-times"
                      severity="secondary"
                      size="small"
                      [outlined]="true"
                      [rounded]="true"
                      (onClick)="toggleEditRecipient(recipient)"
                      [pTooltip]="'common.cancel' | transloco">
                    </p-button>
                  }
                </div>
              </div>
            </div>
          }
        </div>
      }
    </div>
  </div>
</ng-container>
