{% 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">Schema Detail</p>
      <h1>{{ schema_detail.schema.name }}</h1>
    </div>
    <div class="button-row">
      <a class="button button-secondary"
        href="{{ mount_prefix }}{{ web_app.url_path_for('graph_schema_list_page', graph_id=current_graph.id) }}?kind={{ schema_detail.schema.kind }}">Back
        to schemas</a>
      <a class="button button-secondary"
        href="{{ mount_prefix }}{{ web_app.url_path_for('graph_overview_page', graph_id=current_graph.id) }}">Graph
        overview</a>
      {% if current_user.is_owner %}
      {% if schema_detail.schema.name != "__default__" %}
      <a class="button"
        href="{{ mount_prefix }}{{ web_app.url_path_for('graph_schema_edit_page', graph_id=current_graph.id, schema_name=schema_detail.schema.name, kind=schema_detail.schema.kind) }}">Edit
        schema</a>
      {% endif %}
      {% endif %}
    </div>
  </div>

  <div class="card-grid">
    <article class="resource-card">
      <div class="resource-header">
        <div>
          <h3>Usage</h3>
          <p class="resource-subtitle">Kind: {{ schema_detail.schema.kind }}. Version {{ schema_detail.schema.version }} on
            <strong>{{ current_graph.display_name }}</strong></p>
        </div>
        {{ svg_icon_slot(schema_detail.schema.svg_icon, 'lg') }}
      </div>
      <dl class="resource-meta">
        <div>
          <dt>Kind</dt>
          <dd>{{ schema_detail.schema.kind }}</dd>
        </div>
        <div>
          <dt>Alias</dt>
          <dd>{{ schema_detail.schema.alias or 'Not set' }}</dd>
        </div>
        {% if schema_detail.schema.extends %}
        <div>
          <dt>Extends</dt>
          <dd>{{ schema_detail.schema.extends | join(", ") }}</dd>
        </div>
        {% endif %}
        <div>
          <dt>Nodes</dt>
          <dd>{{ schema_detail.schema.usage.node_count }} node{{ "" if schema_detail.schema.usage.node_count == 1 else
            "s" }}</dd>
        </div>
        <div>
          <dt>Edges</dt>
          <dd>{{ schema_detail.schema.usage.edge_count }} edge{{ "" if schema_detail.schema.usage.edge_count == 1 else
            "s" }}</dd>
        </div>
        <div>
          <dt>Prefix</dt>
          <dd>{{ current_graph.table_prefix_label }}</dd>
          <dt>Instance</dt>
          <dd>{{ current_instance.display_name }}</dd>
        </div>
      </dl>
      {% if schema_detail.schema.usage.node_count is not none %}
      <p class="resource-note">{{ schema_detail.schema.usage.node_count }} node{{ "" if schema_detail.schema.usage.node_count == 1 else "s" }} reference this schema.</p>
      {% endif %}
      {% if schema_detail.schema.usage.edge_count is not none %}
      <p class="resource-note">{{ schema_detail.schema.usage.edge_count }} edge{{ "" if schema_detail.schema.usage.edge_count == 1 else "s" }} reference this schema.</p>
      {% endif %}
    </article>
  </div>
</section>

<section class="dashboard-section">
  <div class="section-heading">
    <div>
      <p class="eyebrow">Registry Record</p>
      <h2>Metadata</h2>
    </div>
  </div>

  <div class="card-grid schema-detail-registry-grid">
    <article class="resource-card">
      <div class="resource-header">
        <div>
          <h3>{{ schema_detail.schema.name }}</h3>
          <p class="resource-subtitle">{{ schema_detail.schema.kind }} schema · Version {{ schema_detail.schema.version
            }}</p>
        </div>
      </div>
      <dl class="resource-meta">
        <div>
          <dt>Kind</dt>
          <dd>{{ schema_detail.schema.kind }}</dd>
        </div>
        <div>
          <dt>Nodes</dt>
          <dd>{{ schema_detail.schema.usage.node_count }}</dd>
        </div>
        <div>
          <dt>Edges</dt>
          <dd>{{ schema_detail.schema.usage.edge_count }}</dd>
        </div>
      </dl>
      {% if schema_detail.schema.usage.sample_node_ids %}
      <p class="resource-note">Sample node IDs: {{ schema_detail.schema.usage.sample_node_ids | join(", ") }}</p>
      {% endif %}
      {% if schema_detail.schema.usage.sample_edge_ids %}
      <p class="resource-note">Sample edge IDs: {{ schema_detail.schema.usage.sample_edge_ids | join(", ") }}</p>
      {% endif %}
      {% if current_user.is_owner %}
      <div class="button-row">
        {% if schema_detail.schema.name != "__default__" %}
        <a class="button button-secondary"
          href="{{ mount_prefix }}{{ web_app.url_path_for('graph_schema_edit_page', graph_id=current_graph.id, schema_name=schema_detail.schema.name, kind=schema_detail.schema.kind) }}">Edit
          schema</a>
        {% endif %}
        <form class="inline-form"
          action="{{ mount_prefix }}{{ web_app.url_path_for('graph_schemas_delete', graph_id=current_graph.id, schema_name=schema_detail.schema.name, kind=schema_detail.schema.kind) }}"
          method="post">
          <button class="button button-danger" type="submit" {% if schema_detail.schema.usage.node_count or
            schema_detail.schema.usage.edge_count or schema_detail.schema.name == "__default__" %}disabled{% endif %}>Delete schema</button>
        </form>
      </div>
      <p class="resource-note">
        {% if schema_detail.schema.name == "__default__" %}
        This is a protected default schema and cannot be modified or deleted.
        {% elif schema_detail.schema.usage.node_count or schema_detail.schema.usage.edge_count %}
        Delete is blocked until all node and edge references are removed.
        {% else %}
        Delete is available because this schema is currently unused.
        {% endif %}
      </p>
      {% endif %}
    </article>

    <article class="resource-card">
      <div class="resource-header">
        <div>
          <h3>Visualization</h3>
          <p class="resource-subtitle">Display options for graph viewer</p>
        </div>
      </div>
      <dl class="resource-meta">
        <div>
          <dt>Alias</dt>
          <dd>{{ schema_detail.schema.alias or 'Not set' }}</dd>
        </div>
        <div>
          <dt>SVG Icon</dt>
          <dd>
            {% if schema_detail.schema.svg_icon %}
            {{ svg_icon_slot(schema_detail.schema.svg_icon, 'lg') }}
            {% else %}
            Not set
            {% endif %}
          </dd>
        </div>
      </dl>
    </article>

    <article class="resource-card schema-detail-json-card">
      <div class="resource-header">
        <div>
          <h3>JSON Schema</h3>
          <p class="resource-subtitle">Stored schema body</p>
        </div>
      </div>
      <section class="schema-editor-card" data-jsonjoy-root data-mode="readonly">
        <div class="schema-editor-card__body" id="jsonjoy-viewer-mount"></div>
        <p class="schema-editor-card__status" data-jsonjoy-status></p>
      </section>
    </article>

    {% if schema_detail.schema.effective_json_schema %}
    <article class="resource-card schema-detail-json-card">
      <div class="resource-header">
        <div>
          <h3>Effective JSON Schema</h3>
          <p class="resource-subtitle">Computed schema including all inherited fields</p>
        </div>
      </div>
      <section class="schema-editor-card" data-jsonjoy-root data-mode="readonly">
        <div class="schema-editor-card__body" id="jsonjoy-effective-viewer-mount"></div>
        <p class="schema-editor-card__status" data-jsonjoy-status></p>
      </section>
    </article>
    {% endif %}
  </div>
</section>
{% endblock %}

{% block scripts %}
<script>
  document.addEventListener('DOMContentLoaded', function () {
    {% if error_message %} window.showInfoStrap && showInfoStrap('{{ error_message }}', 'error'); {% endif %}
    {% if success_message %} window.showInfoStrap && showInfoStrap('{{ success_message }}', 'success'); {% endif %}
  });
</script>
{% if schema_json or schema_detail.schema.effective_json_schema %}
<script src="{{ mount_prefix }}{{ web_app.url_path_for('static', path='js/jsonjoy-builder.bundle.js') }}"></script>
<script src="{{ mount_prefix }}{{ web_app.url_path_for('static', path='js/jsonjoy-wrapper.js') }}"></script>
<script>
  (function () {
    const STORED_VIEWER_ID = 'jsonjoy-viewer-mount';
    const EFFECTIVE_VIEWER_ID = 'jsonjoy-effective-viewer-mount';

    {% if schema_json %}
    window.JsonJoyEditor.mount(STORED_VIEWER_ID, {{ schema_json | safe }}, {
      readOnly: true,
    });
    {% endif %}
    {% if schema_detail.schema.effective_json_schema %}
    window.JsonJoyEditor.mount(EFFECTIVE_VIEWER_ID, {{ schema_detail.schema.effective_json_schema | tojson | safe }}, {
      readOnly: true,
    });
    {% endif %}

    window.addEventListener('beforeunload', function () {
      {% if schema_json %}
      window.JsonJoyEditor.destroy(STORED_VIEWER_ID);
      {% endif %}
      {% if schema_detail.schema.effective_json_schema %}
      window.JsonJoyEditor.destroy(EFFECTIVE_VIEWER_ID);
      {% endif %}
    });
  })();
</script>
{% endif %}
{% endblock %}