{% extends "base.html" %}
{% block content %}
<div class="container-fluid mt-3" style="max-width:800px;">
  <div class="d-flex justify-content-between align-items-center mb-3">
    <h4 class="mb-0"><i class="bi bi-tags me-2"></i> Asset Categories</h4>
    <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#categoryModal"
            onclick="openCategoryModal()">
      <i class="bi bi-plus-circle me-1"></i> New Category
    </button>
  </div>

  <form class="card shadow-sm border-0 mb-3">
    <div class="card-body py-2">
      <div class="row g-2">
        <div class="col-md-6">
          <label class="form-label mb-0">Search</label>
          <input type="text" name="q" value="{{ q }}" class="form-control form-control-sm"
                 placeholder="Category name">
        </div>
        <div class="col-md-2 align-self-end">
          <button class="btn btn-sm btn-outline-primary">
            <i class="bi bi-search"></i> Filter
          </button>
        </div>
      </div>
    </div>
  </form>

  <div class="card shadow-sm border-0">
    <div class="card-body p-0">
      <table class="table table-hover table-sm mb-0 align-middle">
        <thead class="table-light">
          <tr>
            <th style="width:60px;">#</th>
            <th>Name</th>
            <th>Description</th>
            <th style="width:110px;" class="text-end">Actions</th>
          </tr>
        </thead>
        <tbody>
          {% if categories %}
            {% for c in categories %}
            <tr>
              <td>{{ loop.index }}</td>
              <td>{{ c.name }}</td>
              <td>{{ c.description or '-' }}</td>
              <td class="text-end">
                <button class="btn btn-sm btn-outline-secondary me-1"
                        onclick="openCategoryModal({{ c.id }}, '{{ c.name|escape }}', `{{ (c.description or '')|escape }}`)">
                  <i class="bi bi-pencil"></i>
                </button>
                <form method="post" action="{{ url_for('assets.delete_category', cat_id=c.id) }}"
                      class="d-inline" onsubmit="return confirm('Delete this category?');">
                  <button class="btn btn-sm btn-outline-danger">
                    <i class="bi bi-trash"></i>
                  </button>
                </form>
              </td>
            </tr>
            {% endfor %}
          {% else %}
            <tr>
              <td colspan="4" class="text-center text-muted py-3">
                No categories yet.
              </td>
            </tr>
          {% endif %}
        </tbody>
      </table>
    </div>
  </div>
</div>

<!-- Modal -->
<div class="modal fade" id="categoryModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <form method="post" action="{{ url_for('assets.categories') }}">
        <input type="hidden" name="mode" id="cat_mode" value="create">
        <input type="hidden" name="category_id" id="cat_id">

        <div class="modal-header">
          <h5 class="modal-title" id="catModalLabel">New Category</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>

        <div class="modal-body">
          <div class="mb-2">
            <label class="form-label">Name *</label>
            <input type="text" name="name" id="cat_name" class="form-control" required>
          </div>
          <div class="mb-2">
            <label class="form-label">Description</label>
            <textarea name="description" id="cat_desc" class="form-control" rows="2"></textarea>
          </div>
        </div>

        <div class="modal-footer">
          <button class="btn btn-primary">
            <i class="bi bi-save me-1"></i> Save
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

<script>
function openCategoryModal(id, name, desc) {
  document.getElementById("cat_mode").value = id ? "edit" : "create";
  document.getElementById("cat_id").value = id || "";
  document.getElementById("cat_name").value = name || "";
  document.getElementById("cat_desc").value = desc || "";
  document.getElementById("catModalLabel").innerText = id ? "Edit Category" : "New Category";
}
</script>
{% endblock %}