{% extends "recipe_hub/base_recipe_hub.html" %}
{% block recipe_hub_content %}

<div class="d-flex align-items-center justify-content-between mb-4">
  <div>
    <h4 class="mb-1"><i class="fas fa-eye me-2 text-success"></i>Recipe Moderation</h4>
    <div class="text-muted small">
      {{ stats.total }} total &middot;
      <span class="text-danger">{{ stats.flagged }} flagged</span> &middot;
      <span class="text-warning">{{ stats.quarantined }} quarantined</span>
    </div>
  </div>
</div>

{# Filters #}
<div class="card border-0 shadow-sm mb-3">
  <div class="card-body py-2">
    <form method="GET" class="d-flex flex-wrap gap-2 align-items-center">
      <input name="search" class="form-control form-control-sm" style="width:180px"
             placeholder="Search title..." value="{{ search }}">
      <select name="status" class="form-select form-select-sm" style="width:auto">
        <option value="">All Status</option>
        <option value="flagged" {{ 'selected' if status=='flagged' }}>Flagged</option>
        <option value="quarantined" {{ 'selected' if status=='quarantined' }}>Quarantined</option>
        <option value="clean" {{ 'selected' if status=='clean' }}>Clean</option>
      </select>
      <select name="cuisine" class="form-select form-select-sm" style="width:auto">
        <option value="">All Cuisines</option>
        {% for c in cuisines %}
        <option value="{{ c }}" {{ 'selected' if cuisine==c }}>{{ c }}</option>
        {% endfor %}
      </select>
      <button class="btn btn-sm btn-outline-primary">Filter</button>
      <span class="text-muted small ms-auto">{{ total }} recipes</span>
    </form>
  </div>
</div>

{# Recipe table #}
<form method="POST" action="{{ url_for('recipe_hub.bulk_delete') }}">
<div class="card border-0 shadow-sm">
  <div class="card-header bg-white d-flex justify-content-between align-items-center py-2">
    <span class="fw-semibold small">Recipes</span>
    <button type="submit" class="btn btn-danger btn-sm confirm-form"
            data-confirm="Delete all checked recipes?">
      <i class="fas fa-trash me-1"></i>Delete Checked
    </button>
  </div>
  <div class="table-responsive">
    <table class="table table-sm table-hover mb-0 align-middle">
      <thead class="table-light">
        <tr>
          <th class="px-3" style="width:36px">
            <input type="checkbox" onchange="document.querySelectorAll('.rowcheck').forEach(c=>c.checked=this.checked)">
          </th>
          <th>Title</th>
          <th>Cuisine</th>
          <th class="text-center">Ings</th>
          <th>Source</th>
          <th>Status</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
      {% for r in recipes %}
      <tr class="{{ 'table-danger' if r.is_flagged else ('table-warning' if r.is_quarantined else '') }}">
        <td class="px-3"><input type="checkbox" name="ids" value="{{ r.id }}" class="rowcheck"></td>
        <td>
          <a href="{{ url_for('view_recipe', recipe_id=r.id) }}" class="fw-medium text-decoration-none">
            {{ r.title }}</a>
          {% if r.is_flagged %}<span class="badge bg-danger ms-1">Flagged</span>{% endif %}
          {% if r.is_quarantined %}<span class="badge bg-warning text-dark ms-1">Quarantined</span>{% endif %}
        </td>
        <td class="small text-muted">{{ r.cuisine or '—' }}</td>
        <td class="text-center small">{{ r.recipe_details|length if r.recipe_details is defined else '—' }}</td>
        <td class="small text-muted">{{ r.source or '—' }}</td>
        <td class="small">{{ r.created_at.strftime('%m/%d/%y') if r.created_at else '—' }}</td>
        <td class="text-nowrap">
          <a href="{{ url_for('view_recipe', recipe_id=r.id) }}"
             class="btn btn-link btn-sm p-0 me-1"><i class="fas fa-eye"></i></a>
          <a href="{{ url_for('edit_recipe', recipe_id=r.id) }}"
             class="btn btn-link btn-sm p-0 me-1"><i class="fas fa-edit"></i></a>
          {% if r.pdf_filename %}
          <a href="{{ url_for('recipe_hub.comparison') }}?log_id={{ r.id }}"
             class="btn btn-link btn-sm p-0 me-1" title="Compare"><i class="fas fa-columns"></i></a>
          {% endif %}
          <form method="POST" action="{{ url_for('recipe_hub.delete_recipe', recipe_id=r.id) }}"
                class="d-inline confirm-form" data-confirm="Delete {{ r.title }}?">
            <button class="btn btn-link btn-sm p-0 text-danger"><i class="fas fa-trash"></i></button>
          </form>
        </td>
      </tr>
      {% else %}
      <tr><td colspan="7" class="text-center text-muted py-5">No recipes found.</td></tr>
      {% endfor %}
      </tbody>
    </table>
  </div>
</div>
</form>

{% if pages > 1 %}
<nav class="mt-3"><ul class="pagination pagination-sm justify-content-center mb-0">
  {% for p in range([1,page-2]|max, [pages+1,page+3]|min) %}
  <li class="page-item {{ 'active' if p==page }}">
    <a class="page-link" href="?page={{ p }}&search={{ search }}&status={{ status }}&cuisine={{ cuisine }}">{{ p }}</a>
  </li>
  {% endfor %}
</ul></nav>
{% endif %}
{% endblock %}