{% extends "data_hub/base_data_hub.html" %}
{% block data_hub_content %}
<div class="d-flex align-items-center justify-content-between mb-3">
  <h4 class="mb-0"><i class="fas fa-box me-2 text-success"></i>Products
    <span class="text-muted fs-6 fw-normal ms-2">{{ total }} total</span>
  </h4>
</div>

<div class="card border-0 shadow-sm mb-3">
  <div class="card-body py-2">
    <form method="GET" class="d-flex gap-2 align-items-center">
      <input name="search" class="form-control form-control-sm" style="width:200px"
             placeholder="Search products..." value="{{ search }}">
      <button class="btn btn-sm btn-outline-success">Search</button>
      {% if search %}<a href="{{ url_for('data_hub.product_index') }}" class="btn btn-sm btn-outline-secondary">Clear</a>{% endif %}
    </form>
  </div>
</div>

<div class="card border-0 shadow-sm">
  <div class="table-responsive">
    <table class="table table-sm table-hover mb-0">
      <thead class="table-light">
        <tr>
          <th class="px-3">Name</th>
          <th class="text-center">Used In</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
      {% for p in items %}
        <tr>
          <td class="px-3 small fw-medium">{{ p.name }}</td>
          <td class="text-center small {% if usage.get(p.id, 0) == 0 %}text-muted{% endif %}">
            {{ usage.get(p.id, 0) }}
          </td>
          <td class="text-nowrap">
            {% if usage.get(p.id, 0) == 0 %}
            <form method="POST" action="{{ url_for('data_hub.product_delete', product_id=p.id) }}"
                  class="d-inline" onsubmit="return confirm('Delete {{ p.name }}?')">
              <button class="btn btn-link btn-sm p-0 text-danger me-2"><i class="fas fa-trash"></i></button>
            </form>
            <form method="POST" action="{{ url_for('data_hub.product_promote', product_id=p.id) }}"
                  class="d-inline" onsubmit="return confirm('Promote to ingredient?')">
              <button class="btn btn-link btn-sm p-0 text-success" title="Promote to ingredient">
                <i class="fas fa-arrow-up"></i>
              </button>
            </form>
            {% endif %}
          </td>
        </tr>
      {% else %}
        <tr><td colspan="3" class="text-center text-muted py-4">No products found.</td></tr>
      {% endfor %}
      </tbody>
    </table>
  </div>
</div>

{% 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 {% if p==page %}active{% endif %}">
      <a class="page-link" href="?page={{ p }}&search={{ search }}">{{ p }}</a>
    </li>
  {% endfor %}
</ul></nav>
{% endif %}
{% endblock %}