<div *ngIf="loading" class="status-msg">Loading recipe...</div>
<div *ngIf="errorMessage" class="status-msg error">{{ errorMessage }}</div>

<div *ngIf="recipe && !loading" class="detail-page">

  <div class="detail-header">
    <a routerLink="/recipes" class="back-link">← Back to Recipes</a>
    <div class="header-actions">
      <a [routerLink]="['/recipes', recipe._id, 'edit']" class="btn btn-edit">Edit</a>
      <button type="button" class="btn btn-delete" (click)="deleteRecipe()">Delete</button>
    </div>
  </div>

  <div class="detail-card">
    <div class="detail-top">
      <div>
        <span class="category-badge">{{ recipe.category }}</span>
        <h1 class="recipe-title">{{ recipe.title }}</h1>
        <p class="recipe-desc" *ngIf="recipe.description">{{ recipe.description }}</p>
      </div>
      <div class="rating-block">
        <span *ngFor="let star of getStars(recipe.rating)" class="star">{{ star }}</span>
        <span class="rating-label">{{ recipe.rating }}/5</span>
      </div>
    </div>

    <div class="time-row">
      <div class="time-chip">
        <span class="time-label">Prep</span>
        <span class="time-value">{{ recipe.prepTime }} min</span>
      </div>
      <div class="time-chip">
        <span class="time-label">Cook</span>
        <span class="time-value">{{ recipe.cookTime }} min</span>
      </div>
      <div class="time-chip total">
        <span class="time-label">Total</span>
        <span class="time-value">{{ (recipe.prepTime || 0) + (recipe.cookTime || 0) }} min</span>
      </div>
    </div>

    <div class="detail-body">
      <section class="ingredients-section">
        <h2>Ingredients</h2>
        <ul class="ingredients-list">
          <li *ngFor="let item of recipe.ingredients">{{ item }}</li>
        </ul>
      </section>

      <section class="instructions-section">
        <h2>Instructions</h2>
        <p class="instructions-text">{{ recipe.instructions }}</p>
      </section>
    </div>
  </div>
</div>
