{% extends 'base.html' %}

{% block content %}
<div class="container">
  <h2>Recipe Dashboard</h2>

  <!-- Flash messages -->
  {% with messages = get_flashed_messages() %}
    {% if messages %}
      {% for message in messages %}
        <div class="alert">{{ message }}</div>
      {% endfor %}
    {% endif %}
  {% endwith %}

  <!-- 🔍 Search & Filter Form -->
  <form action="{{ url_for('search') }}" method="get">
    <input type="text" name="query" placeholder="Search by title or ingredients" value="{{ query or '' }}">
    
    <select name="cuisine">
      <option value="">All Cuisines</option>
      <option value="Italian">Italian</option>
      <option value="Indian">Indian</option>
      <option value="Mexican">Mexican</option>
      <!-- More cuisines as needed -->
    </select>

    <select name="dietary">
      <option value="">All Dietary Types</option>
      <option value="Vegan">Vegan</option>
      <option value="Vegetarian">Vegetarian</option>
      <option value="Gluten-Free">Gluten-Free</option>
    </select>

    <button type="submit">Search</button>
  </form>

  <!-- ➕ Add Recipe -->
  <a href="{{ url_for('new_recipe') }}">
    <button style="margin-top: 1rem;">➕ Add Recipe</button>
  </a>

  <!-- 📋 Recipe List -->
  <div style="margin-top: 2rem;">
    {% for recipe in recipes %}
      <div style="border: 1px solid #ddd; border-radius: 12px; padding: 1rem; margin-bottom: 1rem;">
        <h3>{{ recipe.title }}</h3>
        <p><strong>Cuisine:</strong> {{ recipe.cuisine }} | <strong>Dietary:</strong> {{ recipe.dietary }}</p>
        <div style="display: flex; gap: 1rem;">
          <a href="{{ url_for('view_recipe', id=recipe.id) }}"><button>👁 View</button></a>
          <a href="{{ url_for('edit_recipe', id=recipe.id) }}"><button>✏️ Edit</button></a>
          <a href="{{ url_for('delete_recipe', id=recipe.id) }}" onclick="return confirm('Are you sure you want to delete this recipe?')"><button>🗑 Delete</button></a>
        </div>
      </div>
    {% else %}
      <p>No recipes found.</p>
    {% endfor %}
  </div>
</div>
{% endblock %}