<main class="article-page">
  @if (loading()) {
    <div class="loading">
      <div class="spinner"></div>
      <p>Diving into the depths...</p>
    </div>
  } @else if (error()) {
    <div class="not-found">
      <h1>Error</h1>
      <p>{{ error() }}</p>
      <a routerLink="/" class="back-link">← Return to surface</a>
    </div>
  } @else if (article()) {
    <nav class="breadcrumb">
      <a routerLink="/" class="back-link">← Back to Ocean</a>
    </nav>

    <article class="article-content">
      <div class="featured-image">
        @if (article()!.image) {
          <img [src]="article()!.image" [alt]="article()!.title" class="article-image" />
        } @else {
          <div class="image-placeholder">
            <span class="placeholder-icon">🐠</span>
            <span class="placeholder-text">Featured image coming soon</span>
          </div>
        }
      </div>
      
      <header class="article-header">
        <span class="article-id">Article #{{ article()!.id }}</span>
        <h1>{{ article()!.title }}</h1>
        <div class="article-meta">
          <span class="author">By {{ article()!.author }}</span>
          <span class="separator">•</span>
          <time>{{ article()!.date }}</time>
        </div>
      </header>

      <div class="article-body">
        @for (paragraph of article()!.content.split("\n\n"); track $index) {
          <p [innerHTML]="trustHtml(paragraph)"></p>
        }
      </div>
    </article>
  } @else {
    <div class="not-found">
      <h1>404</h1>
      <p>Lost at sea - Article not found</p>
      <a routerLink="/" class="back-link">← Return to surface</a>
    </div>
  }
</main>
