<app-blog-nav></app-blog-nav>

<main class="blog-list">
  <div class="blog-list__wrapper">

    <header class="blog-list__header">
      <span class="blog-list__label">Wissen & Insights</span>
      <h1>Blog</h1>
      <p class="text-muted">Tipps, Hintergründe und Best Practices rund um Webdesign &amp; digitale Präsenz.</p>
    </header>

    @if (loading()) {
      <div class="blog-list__grid">
        @for (_ of [1, 2, 3]; track $index) {
          <div class="blog-card blog-card--skeleton">
            <div class="blog-card__image blog-card__image--skeleton"></div>
            <div class="blog-card__body">
              <div class="skeleton-line skeleton-line--title"></div>
              <div class="skeleton-line skeleton-line--text"></div>
              <div class="skeleton-line skeleton-line--text skeleton-line--short"></div>
            </div>
          </div>
        }
      </div>
    } @else if (error()) {
      <div class="blog-list__error">
        <p>{{ error() }}</p>
      </div>
    } @else if (posts().length === 0) {
      <div class="blog-list__empty">
        <p>Noch keine Artikel veröffentlicht – schau bald wieder vorbei.</p>
      </div>
    } @else {
      <div class="blog-list__grid">
        @for (post of posts(); track post.id) {
          <a
            class="blog-card"
            [routerLink]="['/blog', post.slug]"
            opTrack="blog_post_click"
            [opTrackProps]="{ slug: post.slug, title: post.title }">

            <div class="blog-card__image">
              @if (getCoverUrl(post); as coverUrl) {
                <img [src]="coverUrl" [alt]="post.title" loading="lazy" />
              } @else {
                <div class="blog-card__image-placeholder">
                  <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                    <path d="M19 20H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h10l6 6v8a2 2 0 0 1-2 2Z"/>
                    <path d="m14 14-3 3-2-2-4 4"/>
                  </svg>
                </div>
              }
              <div class="blog-card__read-time">
                <span>5 Min. Lesezeit</span>
              </div>
            </div>

            <div class="blog-card__body">
              @if (post.tags.length > 0) {
                <div class="blog-card__tags">
                  @for (tag of post.tags; track tag.tags_id.id) {
                    <span class="blog-card__tag">{{ tag.tags_id.name }}</span>
                  }
                </div>
              }
              <h2 class="blog-card__title">{{ post.title }}</h2>
              <p class="blog-card__summary">{{ post.summary }}</p>
              <div class="blog-card__footer">
                <time class="blog-card__date" [dateTime]="post.published_at">
                  {{ post.published_at | date:'d. MMM yyyy':'':'de' }}
                </time>
                <span class="blog-card__cta">
                  Weiterlesen
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M5 12h14M12 5l7 7-7 7"/>
                  </svg>
                </span>
              </div>
            </div>

          </a>
        }
      </div>
    }

  </div>
</main>
