<ng-container *transloco="let t; prefix: 'shared.supportDialog'">
<div class="support-dialog-container">
  <div class="panel-header">
    <div class="header-icon-wrapper">
      <i class="pi pi-heart header-icon"></i>
    </div>
    <div class="header-text">
      <h2 class="panel-title">{{ t('title') }}</h2>
      <p class="panel-description">{{ t('subtitle') }}</p>
    </div>
    <p-button
      icon="pi pi-times"
      [rounded]="true"
      [text]="true"
      severity="secondary"
      (click)="close()"
      class="close-button">
    </p-button>
  </div>

  <div class="dialog-content">
    <p class="intro">
      {{ t('intro') }}
    </p>

    <div class="support-cards">
      <a class="support-card star-card" href="https://github.com/booklore-app/booklore" target="_blank" rel="noopener noreferrer">
        <i class="pi pi-github card-icon"></i>
        <div class="card-text">
          <span class="card-title">{{ t('starTitle') }}</span>
          <span class="card-desc">{{ t('starDesc') }}</span>
        </div>
        <i class="pi pi-arrow-up-right card-arrow"></i>
      </a>

      <a class="support-card collective-card" href="https://opencollective.com/booklore" target="_blank" rel="noopener noreferrer">
        <i class="pi pi-heart card-icon"></i>
        <div class="card-text">
          <span class="card-title">{{ t('collectiveTitle') }}</span>
          <span class="card-desc">{{ t('collectiveDesc') }}</span>
        </div>
        <i class="pi pi-arrow-up-right card-arrow"></i>
      </a>

      <a class="support-card kofi-card" href="https://ko-fi.com/bookloredev" target="_blank" rel="noopener noreferrer">
        <i class="pi pi-gift card-icon"></i>
        <div class="card-text">
          <span class="card-title">{{ t('kofiTitle') }}</span>
          <span class="card-desc">{{ t('kofiDesc') }}</span>
        </div>
        <i class="pi pi-arrow-up-right card-arrow"></i>
      </a>
    </div>

    <p class="closing">{{ t('closing') }}</p>
  </div>
</div>
</ng-container>
