<ng-container *transloco="let t; prefix: 'settingsEmail'">
  <div class="email-settings-container">
    <div class="settings-header">
      <h2 class="settings-title">
        <i class="pi pi-envelope"></i>
        {{ t('title') }}
        <app-external-doc-link docType="email"></app-external-doc-link>
      </h2>
      <p class="settings-description">
        {{ t('description') }}
      </p>
    </div>

    @if (hasPermission) {
      <app-email-v2-provider></app-email-v2-provider>
      <div class="section-divider"><hr></div>
      <app-email-v2-recipient></app-email-v2-recipient>
    } @else {
      <div class="access-denied-card">
        <i class="pi pi-lock"></i>
        <div class="access-denied-content">
          <h3>{{ t('accessRestricted') }}</h3>
          <p>
            {{ t('accessDenied') }}
            <br>
            {{ t('contactAdmin') }}
          </p>
        </div>
      </div>
    }
  </div>
</ng-container>
