{% extends "base.html" %}
{% block title %}Dashboard — Menu Planner{% endblock %}

{% block content %}
<div class="d-flex align-items-center justify-content-between mb-4">
  <div>
    <h1 class="h3 mb-0 fw-bold">This Week's Plan</h1>
    <p class="text-muted mb-0">{{ week_start.strftime('%B %d') }} – {{ (dates[-1]).strftime('%B %d, %Y') }}</p>
  </div>
  <div class="d-flex gap-2">
    <a href="/meal-plan" class="btn btn-primary"><i class="bi bi-pencil-square me-1"></i>Edit Plan</a>
    <a href="/shopping-list" class="btn btn-outline-secondary"><i class="bi bi-cart me-1"></i>Shopping List</a>
  </div>
</div>

<!-- Stats row -->
<div class="row g-3 mb-4">
  <div class="col-6 col-md-3">
    <div class="stat-card">
      <div class="stat-number">{{ plan | length }}</div>
      <div class="stat-label">Meals Planned</div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="stat-card">
      <div class="stat-number">{{ stat_map.get('favorited', 0) }}</div>
      <div class="stat-label">Favorited Recipes</div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <a href="/recipes/overview" class="text-decoration-none">
      <div class="stat-card stat-card-link">
        <div class="stat-number">{{ stat_map.get('candidate', 0) + stat_map.get('favorited', 0) }}</div>
        <div class="stat-label">Active Recipes</div>
      </div>
    </a>
  </div>
  <div class="col-6 col-md-3">
    <div class="stat-card">
      <div class="stat-number">{{ 21 - (plan | length) }}</div>
      <div class="stat-label">Open Slots</div>
    </div>
  </div>
</div>

<!-- Weekly grid -->
<div class="card shadow-sm mb-4">
  <div class="card-body p-0">
    <div class="table-responsive">
      <table class="table table-bordered mb-0 week-table">
        <thead class="table-dark">
          <tr>
            <th style="width:100px"></th>
            {% for d in dates %}
            <th class="text-center {% if d.isoformat() == today_str %}today-col{% endif %}">
              <div class="fw-semibold">{{ d.strftime('%a') }}</div>
              <div class="text-muted small">{{ d.strftime('%b %d') }}</div>
            </th>
            {% endfor %}
          </tr>
        </thead>
        <tbody>
          {% for mt in meal_types %}
          <tr>
            <td class="meal-type-label text-capitalize fw-semibold">{{ mt }}</td>
            {% for d in dates %}
            {% set key = d.isoformat() + '_' + mt %}
            <td class="plan-cell">
              {% if key in plan %}
              {% set entry = plan[key] %}
              <div class="plan-entry">
                <span class="cuisine-badge">{{ cuisine_emoji.get(entry.cuisine, '') }}</span>
                <span class="recipe-name">{{ entry.recipe_name }}</span>
              </div>
              {% else %}
              <span class="empty-slot">—</span>
              {% endif %}
            </td>
            {% endfor %}
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>

<!-- Quick links -->
<div class="row g-3">
  <div class="col-md-4">
    <a href="/recipes?status=favorited" class="quick-link-card">
      <i class="bi bi-heart-fill text-danger"></i>
      <span>View Favorites</span>
      <i class="bi bi-arrow-right ms-auto"></i>
    </a>
  </div>
  <div class="col-md-4">
    <a href="/recipes?cuisine=Italian" class="quick-link-card">
      <span>🇮🇹</span>
      <span>Italian Recipes</span>
      <i class="bi bi-arrow-right ms-auto"></i>
    </a>
  </div>
  <div class="col-md-4">
    <a href="/recipes?cuisine=French" class="quick-link-card">
      <span>🇫🇷</span>
      <span>French Recipes</span>
      <i class="bi bi-arrow-right ms-auto"></i>
    </a>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
  const todayStr = '{{ today_str }}';
</script>
{% endblock %}