<section class="admin-seller-management-page">
  <app-empty-state
    [title]="'adminSellerManagement.emptyState.title' | translate"
    [description]="'adminSellerManagement.emptyState.description' | translate"
  >
    <div slot="icon" class="admin-seller-management-page__icon">
      <app-icon name="store" [size]="48" />
    </div>
    <div slot="actions" class="admin-seller-management-page__actions">
      <app-button variant="primary" (click)="openRequestDialog()">
        {{ 'adminSellerManagement.emptyState.requestAccess' | translate }}
      </app-button>
      <app-button variant="secondary" (click)="openLearnMoreDialog()">
        {{ 'adminSellerManagement.emptyState.learnMore' | translate }}
      </app-button>
    </div>
  </app-empty-state>
</section>

<app-dialog
  [open]="requestDialogOpen()"
  [titleText]="dialogTitle('adminSellerManagement.requestDialog.title')"
  size="md"
  (closed)="closeRequestDialog()"
>
  <form class="admin-seller-management-page__form" (ngSubmit)="submitRequest()">
    <app-form-field [label]="'adminSellerManagement.requestDialog.companyLabel' | translate" [required]="true">
      <app-input
        type="text"
        [fullWidth]="true"
        [placeholder]="'adminSellerManagement.requestDialog.companyPlaceholder' | translate"
        [ngModel]="form().company"
        (ngModelChange)="updateCompany($event)"
        name="company"
        required
      />
    </app-form-field>

    <app-form-field [label]="'adminSellerManagement.requestDialog.emailLabel' | translate" [required]="true">
      <app-input
        type="email"
        [fullWidth]="true"
        [placeholder]="'adminSellerManagement.requestDialog.emailPlaceholder' | translate"
        [ngModel]="form().email"
        (ngModelChange)="updateEmail($event)"
        name="email"
        required
      />
    </app-form-field>

    <app-form-field [label]="'adminSellerManagement.requestDialog.messageLabel' | translate">
      <textarea
        class="admin-seller-management-page__textarea"
        rows="4"
        [placeholder]="'adminSellerManagement.requestDialog.messagePlaceholder' | translate"
        [attr.aria-label]="'adminSellerManagement.requestDialog.messageLabel' | translate"
        [ngModel]="form().message"
        (ngModelChange)="updateMessage($event)"
        name="message"
      ></textarea>
    </app-form-field>

    <div class="admin-seller-management-page__dialog-actions">
      <app-button type="button" variant="ghost" (click)="closeRequestDialog()">
        {{ 'adminSellerManagement.requestDialog.cancel' | translate }}
      </app-button>
      <app-button type="submit" variant="primary" [loading]="submitting()">
        {{ 'adminSellerManagement.requestDialog.send' | translate }}
      </app-button>
    </div>
  </form>
</app-dialog>

<app-dialog
  [open]="successDialogOpen()"
  [titleText]="dialogTitle('adminSellerManagement.requestSuccessDialog.title')"
  size="sm"
  (closed)="closeSuccessDialog()"
>
  <p>{{ 'adminSellerManagement.requestSuccessDialog.message' | translate }}</p>
  <div class="admin-seller-management-page__dialog-actions">
    <app-button variant="primary" (click)="closeSuccessDialog()">
      {{ 'adminSellerManagement.requestSuccessDialog.close' | translate }}
    </app-button>
  </div>
</app-dialog>

<app-dialog
  [open]="learnMoreDialogOpen()"
  [titleText]="dialogTitle('adminSellerManagement.learnMoreDialog.title')"
  size="md"
  (closed)="closeLearnMoreDialog()"
>
  <app-badge variant="info">{{ 'adminSellerManagement.learnMoreDialog.comingSoonBadge' | translate }}</app-badge>
  <ul class="admin-seller-management-page__feature-list">
    @for (featureKey of learnMoreFeatureKeys; track featureKey) {
      <li class="admin-seller-management-page__feature-item">
        <app-icon name="checkCircle" [size]="18" />
        <span>{{ ('adminSellerManagement.learnMoreDialog.features.' + featureKey) | translate }}</span>
      </li>
    }
  </ul>
  <div class="admin-seller-management-page__dialog-actions">
    <app-button variant="primary" (click)="closeLearnMoreDialog()">
      {{ 'adminSellerManagement.learnMoreDialog.close' | translate }}
    </app-button>
  </div>
</app-dialog>
