<ng-container *transloco="let t; prefix: 'settingsReader.fonts'">
  <div>
    <div class="settings-content" style="position: relative;">
      <div class="float-top-right">
        <p-button
          icon="pi pi-upload"
          rounded
          size="large"
          (click)="openUploadDialog()"
          [disabled]="customFonts.length >= maxFonts"
        ></p-button>
      </div>
      @if (customFonts.length === 0 && !isLoading) {
        <div class="preferences-section">
          <div class="empty-state">
            <div class="empty-icon-wrapper">
              <i class="pi pi-palette empty-icon"></i>
            </div>
            <h3 class="empty-title">{{ t('emptyTitle') }}</h3>
            <p class="empty-description">
              {{ t('emptyDesc') }}<br>
              {{ t('emptyHint') }}
            </p>
            <p class="empty-hint">
              <i class="pi pi-info-circle"></i>
              {{ t('supportedFormats') }} <strong>TTF</strong>, <strong>OTF</strong>, <strong>WOFF</strong>, <strong>WOFF2</strong>
            </p>
          </div>
        </div>
      } @else {
        <div class="preferences-section">
          <div class="section-header">
            <div>
              <h3 class="section-title">
                {{ t('yourLibrary') }}
                <span class="font-count">({{ customFonts.length }})</span>
              </h3>
            </div>
          </div>

          <div class="fonts-grid">
            @for (font of customFonts; track font.id) {
              <div class="settings-card font-card">
                <div class="font-card-header">
                  <div class="font-title-group">
                    <h4 class="font-name">{{ font.fontName }}</h4>
                    <span class="format-tag">{{ font.format }}</span>
                  </div>
                  <p-button
                    icon="pi pi-trash"
                    severity="danger"
                    [text]="true"
                    [rounded]="true"
                    size="small"
                    (click)="deleteFont(font)"
                    [pTooltip]="t('deleteFont')"
                    tooltipPosition="left"
                  ></p-button>
                </div>

                <div class="font-preview-area">
                  <label class="preview-label">
                    <i class="pi pi-eye"></i>
                    {{ t('preview') }}
                  </label>
                  @if (!fontsLoadedInBrowser) {
                    <div class="font-preview-skeleton">
                      <p-skeleton width="100%" height="1rem" class="mb-3"></p-skeleton>
                      <p-skeleton width="100%" height="1rem" class="mb-3"></p-skeleton>
                      <p-skeleton width="85%" height="1rem" class="mb-3"></p-skeleton>
                      <p-skeleton width="60%" height="1rem" class="mb-3"></p-skeleton>
                      <p-skeleton width="85%" height="1rem" class="mb-3"></p-skeleton>
                      <p-skeleton width="95%" height="0.875rem"></p-skeleton>
                    </div>
                  } @else {
                    <div class="font-preview" [style.font-family]="font.fontName">
                      <p class="preview-paragraph">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                      </p>
                      <p class="preview-paragraph-small">
                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                      </p>
                      <div class="preview-characters">
                        <span>ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789</span>
                      </div>
                    </div>
                  }
                </div>

                <div class="font-metadata">
                  <div class="metadata-row">
                    <span class="meta-label"><i class="pi pi-file"></i>{{ t('file') }}</span>
                    <span class="meta-value">{{ font.originalFileName }}</span>
                  </div>
                  <div class="metadata-row">
                    <span class="meta-label"><i class="pi pi-database"></i>{{ t('size') }}</span>
                    <span class="meta-value">{{ formatFileSize(font.fileSize) }}</span>
                  </div>
                  <div class="metadata-row">
                    <span class="meta-label"><i class="pi pi-calendar"></i>{{ t('uploaded') }}</span>
                    <span class="meta-value">{{ font.uploadedAt | date: 'mediumDate' }}</span>
                  </div>
                </div>
              </div>
            }
          </div>
        </div>
      }
    </div>
  </div>

  <p-confirmDialog></p-confirmDialog>
</ng-container>
