{% extends 'body_base.html' %}
{% block main %}
<main id="knowledge_pane" 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">Entities</h2>
      <form hx-get="/knowledge" hx-target="#knowledge_pane" hx-push-url="true" hx-swap="outerHTML"
        class="flex items-center gap-4 mt-2 sm:mt-0">
        <div class="form-control">
          <select name="entity_type" class="select select-bordered">
            <option value="">All Types</option>
            {% for type in entity_types %}
            <option value="{{ type }}" {% if selected_entity_type==type %}selected{% endif %}>{{ type }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="form-control">
          <select name="content_category" class="select select-bordered">
            <option value="">All Categories</option>
            {% for category in content_categories %}
            <option value="{{ category }}" {% if selected_content_category==category %}selected{% endif %}>{{ category
              }}</option>
            {% endfor %}
          </select>
        </div>
        <button type="submit" class="btn btn-primary btn-sm">Filter</button>
      </form>
    </div>

    {% include "knowledge/entity_list.html" %}
    <h2 class="text-2xl font-bold mb-2 mt-10">Relationships</h2>
    {% include "knowledge/relationship_table.html" %}
    <div class="rounded-box overflow-clip mt-10 shadow">
      {{ plot_html | safe }}
    </div>
  </div>
</main>
{% endblock %}