{% extends 'body_base.html' %}
{% block main %}
<main id="main_section" class="flex justify-center grow mt-2 sm:mt-4 gap-6 mb-10">
  <div class="container">
    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-4">
      <h2 class="text-2xl font-bold">Text Contents</h2>
      <form hx-get="/content" hx-target="#main_section" hx-swap="outerHTML" hx-push-url="true"
        class="flex items-center gap-2 mt-2 sm:mt-0">
        <div class="form-control">
          <select name="category" class="select select-bordered">
            <option value="">All Categories</option>
            {% for category in categories %}
            <option value="{{ category }}" {% if selected_category==category %}selected{% endif %}>{{ category }}
            </option>
            {% endfor %}
          </select>
        </div>
        <button type="submit" class="btn btn-primary btn-sm">Filter</button>
      </form>
    </div>

    <div id="text_content_cards">
      {% include "content/content_list.html" %}
    </div>
  </div>
</main>
{% endblock %}