{% for schema_name in schemas %}
<div class="schema-item">
  <div class="schema-name" onclick="toggleSchema(this)"
       data-schema="{{ schema_name }}" data-profile="{{ profile }}">
    ▶ {{ schema_name }}
  </div>
  <div class="table-list hidden" id="schema-{{ schema_name }}"></div>
</div>
{% else %}
<p class="dim">No schemas found.</p>
{% endfor %}

<script>
function toggleSchema(el) {
  const schema = el.dataset.schema;
  const profile = el.dataset.profile;
  const container = document.getElementById("schema-" + schema);
  if (container.classList.contains("hidden")) {
    container.classList.remove("hidden");
    el.textContent = el.textContent.replace("▶", "▼");
    if (!container.dataset.loaded) {
      container.dataset.loaded = "1";
      htmx.ajax("GET",
        `/api/schema/tables?profile=${encodeURIComponent(profile)}&schema=${encodeURIComponent(schema)}`,
        { target: "#schema-" + schema, swap: "innerHTML" }
      );
    }
  } else {
    container.classList.add("hidden");
    el.textContent = el.textContent.replace("▼", "▶");
  }
}
</script>