{% extends "base.html" %}

{% block styles %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/categories.css') }}">
{% endblock %}

{% block content %}
<div class="admin-container">
  <h2>Manage Categories</h2>

  <div class="card mb-4">
    <div class="card-header">
      <h3>Add New Category</h3>
    </div>
    <div class="card-body">
      <form method="POST" action="{{ url_for('admin.add_category') }}" class="row g-3">
        <div class="col-md-8">
          <input type="text" name="name" class="form-control" placeholder="Category name" required>
        </div>
        <div class="col-md-4">
          <button type="submit" class="btn btn-primary w-100">Add Category</button>
        </div>
      </form>
    </div>
  </div>

  <div class="card">
    <div class="card-header">
      <h3>All Categories ({{ categories|length }})</h3>
    </div>
    <div class="card-body">
      {% if categories %}
      <div class="table-responsive">
        <table class="table table-hover">
          <thead>
            <tr>
              <th>ID</th>
              <th>Name</th>
              <th>Products</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            {% for category in categories %}
            <tr>
              <td>{{ category.id }}</td>
              <td>{{ category.name }}</td>
              <td>{{ category.products|length }}</td>
              <td>
                {% if category.products|length == 0 %}
                <form method="POST" action="{{ url_for('admin.delete_category', id=category.id) }}"
                  style="display: inline;" onsubmit="return confirm('Delete category {{ category.name }}?')">
                  <button type="submit" class="btn btn-sm btn-danger">Delete</button>
                </form>
                {% else %}
                <button class="btn btn-sm btn-secondary" disabled title="Cannot delete category with products">
                  Delete
                </button>
                {% endif %}
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
      {% else %}
      <div class="alert alert-info">No categories found.</div>
      {% endif %}
    </div>
  </div>
</div>
{% endblock %}