{% extends "base.html" %}
{% block title %}Remote Categories{% endblock %}
{% block content %}
<div class="container">
  <h1 class="my-4">Remote Categories</h1>
  <form method="post" class="form-inline mb-4">
    <div class="form-group">
      <label for="category_name" class="sr-only">Category Name:</label>
      <input type="text" name="category_name" class="form-control" placeholder="Enter remote category">
    </div>
    <button type="submit" class="btn btn-primary ml-2">Add Category</button>
  </form>
  {% if categories %}
    <table class="table table-bordered table-hover">
      <thead class="thead-light">
        <tr>
          <th>Category Name</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        {% for cat in categories %}
        <tr>
          <td>{{ cat.name }}</td>
          <td>
            <form action="{{ url_for('tools.delete_remote_category', cat_id=cat.id) }}" method="post" class="d-inline">
              <button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('Delete remote category?');">Delete</button>
            </form>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  {% else %}
    <p>No remote categories defined.</p>
  {% endif %}
</div>
{% endblock %}