<div class="list-header">
  <h1>My Recipes</h1>
  <p class="subtitle">{{ filteredRecipes.length }} recipe{{ filteredRecipes.length !== 1 ? 's' : '' }} found</p>
</div>

<div class="filter-bar">
  <input
    type="text"
    class="search-input"
    placeholder="Search recipes..."
    [(ngModel)]="searchTerm"
    (ngModelChange)="onSearchChange()"
  />
  <select class="category-select" title="Filter by category" [(ngModel)]="selectedCategory" (ngModelChange)="onCategoryChange()">
    <option value="">All Categories</option>
    <option *ngFor="let cat of categories" [value]="cat">{{ cat }}</option>
  </select>
  <button type="button" class="btn btn-outline" (click)="clearFilters()" *ngIf="searchTerm || selectedCategory">
    Clear
  </button>
</div>

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

<div *ngIf="!loading && !errorMessage && filteredRecipes.length === 0" class="empty-state">
  <p>No recipes found.</p>
  <a routerLink="/recipes/new" class="btn btn-primary">Add Your First Recipe</a>
</div>

<div class="recipe-grid" *ngIf="!loading && !errorMessage">
  <div class="recipe-card" *ngFor="let recipe of filteredRecipes" [routerLink]="['/recipes', recipe._id]">
    <div class="card-header">
      <span class="category-badge">{{ recipe.category }}</span>
      <span class="rating">
        <span *ngFor="let star of getStars(recipe.rating)" class="star">{{ star }}</span>
      </span>
    </div>
    <h2 class="card-title">{{ recipe.title }}</h2>
    <p class="card-desc">{{ recipe.description }}</p>
    <div class="card-meta">
      <span>⏱ {{ getTotalTime(recipe) }} min total</span>
    </div>
    <div class="card-actions">
      <a [routerLink]="['/recipes', recipe._id, 'edit']" class="btn btn-secondary" (click)="$event.stopPropagation()">Edit</a>
      <button type="button" class="btn btn-danger" (click)="deleteRecipe(recipe._id!, $event)">Delete</button>
    </div>
  </div>
</div>
