<app-blog-nav [showBack]="true"></app-blog-nav>

<main class="blog-detail">

  @if (loading()) {
  <div class="blog-detail__skeleton">
    <div class="blog-detail__cover-skeleton"></div>
    <div class="blog-detail__wrapper">
      <div class="skeleton-line skeleton-line--tag"></div>
      <div class="skeleton-line skeleton-line--title"></div>
      <div class="skeleton-line skeleton-line--meta"></div>
      <div class="skeleton-line skeleton-line--body"></div>
      <div class="skeleton-line skeleton-line--body"></div>
      <div class="skeleton-line skeleton-line--body skeleton-line--short"></div>
    </div>
  </div>
  } @else if (notFound()) {
  <div class="blog-detail__wrapper blog-detail__not-found">
    <h1>Artikel nicht gefunden</h1>
    <p class="text-muted">Dieser Artikel existiert nicht oder wurde entfernt.</p>
  </div>
  } @else if (post(); as post) {

  @if (getCoverUrl(post); as coverUrl) {
  <div class="blog-detail__cover">
    <img [src]="coverUrl" [alt]="post.title" />
    <div class="blog-detail__cover-overlay"></div>
  </div>
  }

  <div class="blog-detail__wrapper">

    <header class="blog-detail__header">
      @if (post.tags.length > 0) {
      <div class="blog-detail__tags">
        @for (tag of post.tags; track tag.tags_id.id) {
        <span class="blog-detail__tag">{{ tag.tags_id.name }}</span>
        }
      </div>
      }

      <h1 class="blog-detail__title">{{ post.title }}</h1>

      <div class="blog-detail__meta">
        <time class="blog-detail__date" [dateTime]="post.published_at">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
            <line x1="16" y1="2" x2="16" y2="6"></line>
            <line x1="8" y1="2" x2="8" y2="6"></line>
            <line x1="3" y1="10" x2="21" y2="10"></line>
          </svg>
          {{ post.published_at | date:'d. MMMM yyyy':'':'de' }}
        </time>
        <span class="blog-detail__read-time">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <circle cx="12" cy="12" r="10"></circle>
            <polyline points="12 6 12 12 16 14"></polyline>
          </svg>
          5 Min. Lesezeit
        </span>
      </div>

      <p class="blog-detail__summary">{{ post.summary }}</p>
    </header>

    <article class="blog-detail__content" [innerHTML]="parsedContent()"></article>

    <footer class="blog-detail__footer">
      <div class="blog-detail__share">
        <span class="blog-detail__share-label">Artikel teilen:</span>
        <a href="#" class="blog-detail__share-btn" aria-label="Auf Twitter teilen">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
            <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
          </svg>
        </a>
        <a href="#" class="blog-detail__share-btn" aria-label="Auf LinkedIn teilen">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
            <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
          </svg>
        </a>
      </div>
    </footer>

  </div>
  }

</main>