{% extends "base.html" %}
{% from 'macros/svg_icon_slot.html' import svg_icon_slot %}

{% block content %}
<section class="dashboard-section">
  <div class="section-heading">
    <div>
      <p class="eyebrow">Schemas</p>
      <h2>{{ current_graph.display_name }}</h2>
    </div>
  </div>

  <p class="resource-note">
    Browse the registered JSON Schemas for this graph and open individual schema
    details, including version and current usage across nodes and edges.
  </p>

  <ul class="feature-list">
    <li>{{ schema_list.total }} {{ schema_kind }} schema{{ "" if schema_list.total == 1 else "s" }} matched.</li>
    <li>Each schema is scoped to either nodes or edges; use the switch below to change kind.</li>
  </ul>
</section>

<section class="dashboard-section">
  <div class="section-heading">
    <div>
      <p class="eyebrow">Registry</p>
      <h2>Schema list</h2>
    </div>
    {% if current_user.is_owner %}
    <a class="button"
      href="{{ mount_prefix }}{{ web_app.url_path_for('graph_schema_create_page', graph_id=current_graph.id) }}">New
      schema</a>
    {% endif %}
  </div>

  <div class="schema-kind-switch" role="tablist" aria-label="Schema kind">
    <a class="schema-kind-switch__opt{% if schema_kind == 'node' %} schema-kind-switch__opt--active{% endif %}"
      role="tab" aria-selected="{{ 'true' if schema_kind == 'node' else 'false' }}"
      href="{{ mount_prefix }}{{ web_app.url_path_for('graph_schema_list_page', graph_id=current_graph.id) }}?{{ schema_qs_node }}">Node
      schemas</a>
    <a class="schema-kind-switch__opt{% if schema_kind == 'edge' %} schema-kind-switch__opt--active{% endif %}"
      role="tab" aria-selected="{{ 'true' if schema_kind == 'edge' else 'false' }}"
      href="{{ mount_prefix }}{{ web_app.url_path_for('graph_schema_list_page', graph_id=current_graph.id) }}?{{ schema_qs_edge }}">Edge
      schemas</a>
  </div>

  {% if filter_summary %}
  <p data-filters-summary class="resource-note" style="margin-top: 0;">Filters: {{ filter_summary }}</p>
  {% endif %}

  <div class="section-heading" style="margin-top: 1rem;">
    <div>
      <p class="eyebrow">Browse</p>
      <h2>Filters</h2>
    </div>
    <button class="button button-secondary" type="button" data-filters-toggle>
      Show filters
    </button>
  </div>

  <article class="resource-card" data-filters-panel {% if not schema_q %}hidden{% endif %}>
    <form class="auth-form" method="get"
      action="{{ mount_prefix }}{{ web_app.url_path_for('graph_schema_list_page', graph_id=current_graph.id) }}">
      <input type="hidden" name="kind" value="{{ schema_kind }}">
      <label class="field">
        <span>Name contains</span>
        <input name="q" type="search" value="{{ schema_q }}" placeholder="Substring match" autocomplete="off">
      </label>
      <div class="button-row">
        <button class="button" type="submit">Apply filters</button>
        <a class="button button-secondary"
          href="{{ mount_prefix }}{{ web_app.url_path_for('graph_schema_list_page', graph_id=current_graph.id) }}?{{ schema_list_clear_qs }}">Clear</a>
      </div>
    </form>
  </article>

  <div class="card-grid" style="margin-top: 1.25rem;">
    {% for schema in schema_list["items"] %}
    <article class="resource-card">
      <div class="resource-header">
        <div>
          <h3>{{ schema.name }}</h3>
          <p class="resource-subtitle">{{ schema.kind }} schema · Version {{ schema.version }}</p>
        </div>
        {{ svg_icon_slot(schema.svg_icon, 'sm') }}
      </div>
      <dl class="resource-meta">
        <div>
          <dt>Alias</dt>
          <dd>{{ schema.alias or '-' }}</dd>
        </div>
        <div>
          <dt>Nodes</dt>
          <dd>{{ schema.usage.node_count }}</dd>
        </div>
        <div>
          <dt>Edges</dt>
          <dd>{{ schema.usage.edge_count }}</dd>
        </div>
      </dl>
      <div class="button-row">
        <a class="button button-secondary"
          href="{{ mount_prefix }}{{ web_app.url_path_for('graph_schema_detail_page', graph_id=current_graph.id, schema_name=schema.name, kind=schema.kind) }}">Open</a>
      </div>
    </article>
    {% else %}
    <article class="resource-card resource-card-empty">
      <h3>No schemas yet</h3>
      <p class="resource-note">
        Create the first schema to start validating graph content from the admin UI or tool surfaces.
      </p>
    </article>
    {% endfor %}
  </div>
</section>
{% endblock %}

{% block scripts %}
<script>
  // Show info strap on page load if error/success query params exist
  const urlParams = new URLSearchParams(window.location.search);
  const error = urlParams.get('error');
  const success = urlParams.get('success');
  if (error) {
    showInfoStrap(error, 'error');
  } else if (success) {
    showInfoStrap(success, 'success');
  }
</script>
{% include 'partials/filters_toggle_script.html' %}
{% endblock %}