{% extends "base.html" %}

{% block content %}
<section class="hero">
  <div class="hero-copy">
    <p class="eyebrow">Edge Detail</p>
    <h1>{{ edge_detail.edge.type }}</h1>
    <p class="hero-text">
      Relationship <strong>{{ edge_detail.edge.id }}</strong> on
      <strong>{{ edge_detail.graph.display_name }}</strong>.
    </p>
    <div class="button-row">
      <a class="button button-secondary" href="{{ mount_prefix }}{{ web_app.url_path_for('graph_edge_list_page', graph_id=edge_detail.graph.id) }}">Back to edges</a>
      <a class="button button-secondary" href="{{ mount_prefix }}{{ web_app.url_path_for('graph_overview_page', graph_id=edge_detail.graph.id) }}">Graph overview</a>
      {% if current_user.is_owner %}
      <a class="button button-secondary" href="{{ mount_prefix }}{{ web_app.url_path_for('graph_edge_edit_page', graph_id=edge_detail.graph.id, edge_id=edge_detail.edge.id) }}">Edit edge</a>
      <a class="button" href="{{ mount_prefix }}{{ web_app.url_path_for('graph_edge_create_page', graph_id=edge_detail.graph.id) }}">Create edge</a>
      {% endif %}
    </div>
  </div>

  <div class="hero-panel">
    <h2>Summary</h2>
    <ul class="feature-list">
      <li>Schema: {{ edge_detail.edge.schema_name or "none" }}.</li>
      <li>Source: {{ edge_detail.edge.source_id }}.</li>
      <li>Target: {{ edge_detail.edge.target_id }}.</li>
      <li>Tags: {{ edge_detail.edge.tags | length }}.</li>
    </ul>
  </div>
</section>

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

  <div class="card-grid">
    <article class="resource-card">
      <div class="resource-header">
        <div>
          <h3>{{ edge_detail.edge.type }}</h3>
          <p class="resource-subtitle">{{ edge_detail.edge.id }}</p>
        </div>
      </div>
      <dl class="resource-meta">
        <div>
          <dt>Edge ID</dt>
          <dd>{{ edge_detail.edge.id }}</dd>
        </div>
        <div>
          <dt>Source ID</dt>
          <dd>{{ edge_detail.edge.source_id }}</dd>
        </div>
        <div>
          <dt>Target ID</dt>
          <dd>{{ edge_detail.edge.target_id }}</dd>
        </div>
        <div>
          <dt>Schema</dt>
          <dd>{{ edge_detail.edge.schema_name or "none" }}</dd>
        </div>
        <div>
          <dt>Version</dt>
          <dd>{{ edge_detail.edge.version }}</dd>
        </div>
        <div>
          <dt>Created</dt>
          <dd>{{ edge_detail.edge.created_at }}</dd>
        </div>
        <div>
          <dt>Updated</dt>
          <dd>{{ edge_detail.edge.updated_at }}</dd>
        </div>
      </dl>
      {% if edge_detail.edge.tags %}
      <p class="resource-note">Tags: {{ edge_detail.edge.tags | join(", ") }}</p>
      {% else %}
      <p class="resource-note">No tags are currently stored on this edge.</p>
      {% endif %}
      {% if current_user.is_owner %}
      <div class="button-row">
        <a class="button button-secondary" href="{{ mount_prefix }}{{ web_app.url_path_for('graph_edge_edit_page', graph_id=edge_detail.graph.id, edge_id=edge_detail.edge.id) }}">Edit edge</a>
        <form class="inline-form" action="{{ mount_prefix }}{{ web_app.url_path_for('graph_edge_delete', graph_id=edge_detail.graph.id, edge_id=edge_detail.edge.id) }}" method="post">
          <button class="button button-danger" type="submit">Delete edge</button>
        </form>
      </div>
      <p class="resource-note">
        Delete removes this relationship immediately. Source and target nodes are not changed.
      </p>
      {% endif %}
    </article>

    <article class="resource-card" id="edge-data-card">
      <div class="resource-header" style="flex-wrap: wrap; gap: 0.75rem;">
        <div>
          <h3>Data</h3>
          <p class="resource-subtitle">{% if schema_json %}{{ edge_detail.edge.schema_name }}{% else %}Stored edge body{% endif %}</p>
        </div>
        {% if schema_json %}
        <button type="button" class="button button-secondary" id="edge-data-view-toggle" aria-pressed="false">Show JSON</button>
        {% endif %}
      </div>
      {% if schema_json %}
      <div id="edge-data-schema-view" class="data-view-panel">
        <section class="schema-editor-card" data-jedison-root data-mode="readonly">
          <div class="schema-editor-card__body" data-jedison-mount></div>
          <p class="schema-editor-card__status" data-jedison-status></p>
          <script type="application/json" data-jedison-schema>{{ schema_json | tojson }}</script>
          <script type="application/json" data-jedison-data>{{ edge_detail.edge.data | tojson }}</script>
        </section>
      </div>
      <div id="edge-data-json-view" class="data-view-panel" hidden>
        <pre class="code-block">{{ edge_json }}</pre>
      </div>
      {% else %}
      <div class="data-view-panel">
        <pre class="code-block">{{ edge_json }}</pre>
      </div>
      {% endif %}
    </article>
  </div>
</section>
{% endblock %}

{% block scripts %}
{% if schema_json %}
<script src="{{ mount_prefix }}{{ web_app.url_path_for('static', path='js/jedison.umd.js') }}"></script>
<script src="{{ mount_prefix }}{{ web_app.url_path_for('static', path='js/jedison-form.js') }}"></script>
{% endif %}
<script>
(function () {
  var toggle = document.getElementById("edge-data-view-toggle");
  if (!toggle) return;
  var schemaPanel = document.getElementById("edge-data-schema-view");
  var jsonPanel = document.getElementById("edge-data-json-view");
  toggle.addEventListener("click", function () {
    var showJson = !schemaPanel.hidden;
    if (showJson) {
      schemaPanel.hidden = true;
      jsonPanel.hidden = false;
      toggle.textContent = "Show schema view";
      toggle.setAttribute("aria-pressed", "true");
    } else {
      schemaPanel.hidden = false;
      jsonPanel.hidden = true;
      toggle.textContent = "Show JSON";
      toggle.setAttribute("aria-pressed", "false");
    }
  });
})();
</script>
{% endblock %}