{% extends "base.html" %}

{% block content %}
<section class="dashboard-section">
  <div class="section-heading">
    <div>
      <p class="eyebrow">Node Detail</p>
      <h1>{{ node_detail.node.name or node_detail.node.id }}</h1>
    </div>
    <div class="button-row">
      <a class="button button-secondary" href="{{ mount_prefix }}{{ web_app.url_path_for('graph_node_list_page', graph_id=current_graph.id) }}">Back to nodes</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 %}
      <a class="button button-secondary" href="{{ mount_prefix }}{{ web_app.url_path_for('graph_node_edit_page', graph_id=current_graph.id, node_id=node_detail.node.id) }}">Edit node</a>
      <a class="button" href="{{ mount_prefix }}{{ web_app.url_path_for('graph_node_create_page', graph_id=current_graph.id) }}">Create node</a>
      {% endif %}
    </div>
  </div>

  <div class="card-grid">
    <article class="resource-card">
      <div class="resource-header">
        <div>
          <h3>Summary</h3>
          <p class="resource-subtitle">Type <strong>{{ node_detail.node.type }}</strong> on <strong>{{ current_graph.display_name }}</strong></p>
        </div>
      </div>
      <dl class="resource-meta">
        <div>
          <dt>Schema</dt>
          <dd>{{ node_detail.node.type or "none" }}</dd>
        </div>
        <div>
          <dt>Parent</dt>
          <dd>{{ node_detail.node.parent_id or "none" }}</dd>
        </div>
        <div>
          <dt>Payload size</dt>
          <dd>{{ node_detail.node.payload_size }} bytes</dd>
        </div>
        <div>
          <dt>Tags</dt>
          <dd>{{ node_detail.node.tags | length }}</dd>
        </div>
      </dl>
    </article>
  </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>{{ node_detail.node.name or node_detail.node.id }}</h3>
          <p class="resource-subtitle">{{ node_detail.node.type }}</p>
        </div>
      </div>
      <dl class="resource-meta">
        <div>
          <dt>Node ID</dt>
          <dd>{{ node_detail.node.id }}</dd>
        </div>
        <div>
          <dt>Owner</dt>
          <dd>{{ node_detail.node.owner_id or "none" }}</dd>
        </div>
        <div>
          <dt>Parent</dt>
          <dd>{{ node_detail.node.parent_id or "none" }}</dd>
        </div>
        <div>
          <dt>Schema</dt>
          <dd>{{ node_detail.node.type or "none" }}</dd>
        </div>
        <div>
          <dt>Version</dt>
          <dd>{{ node_detail.node.version }}</dd>
        </div>
        <div>
          <dt>Created</dt>
          <dd>{{ node_detail.node.created_at }}</dd>
        </div>
        <div>
          <dt>Updated</dt>
          <dd>{{ node_detail.node.updated_at }}</dd>
        </div>
        <div>
          <dt>Payload MIME</dt>
          <dd>{{ node_detail.node.payload_mime or "none" }}</dd>
        </div>
      </dl>
      {% if node_detail.node.tags %}
      <p class="resource-note">Tags: {{ node_detail.node.tags | join(", ") }}</p>
      {% else %}
      <p class="resource-note">No tags are currently stored on this node.</p>
      {% endif %}
      {% if node_detail.node.has_payload %}
      <p class="resource-note">A binary payload is stored on this node.</p>
      {% else %}
      <p class="resource-note">No binary payload is stored on this node.</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_node_edit_page', graph_id=current_graph.id, node_id=node_detail.node.id) }}">Edit node</a>
        <form class="inline-form" action="{{ mount_prefix }}{{ web_app.url_path_for('graph_node_delete', graph_id=current_graph.id, node_id=node_detail.node.id) }}" method="post">
          <button class="button button-danger" type="submit" {% if not node_detail.delete_blockers.can_delete %}disabled{% endif %}>Delete node</button>
        </form>
      </div>
      <p class="resource-note">
        {% if node_detail.delete_blockers.can_delete %}
        Delete is available because this node has no child or edge blockers.
        {% else %}
        Delete is blocked until child nodes and incident edges are removed.
        {% endif %}
      </p>
      {% if node_detail.delete_blockers.child_count %}
      <p class="resource-note">Child nodes: {{ node_detail.delete_blockers.child_count }}.</p>
      {% endif %}
      {% if node_detail.delete_blockers.incident_edge_count %}
      <p class="resource-note">Incident edges: {{ node_detail.delete_blockers.incident_edge_count }}.</p>
      {% endif %}
      {% if node_detail.delete_blockers.sample_child_ids %}
      <p class="resource-note">Sample child IDs: {{ node_detail.delete_blockers.sample_child_ids | join(", ") }}</p>
      {% endif %}
      {% if node_detail.delete_blockers.sample_edge_ids %}
      <p class="resource-note">Sample edge IDs: {{ node_detail.delete_blockers.sample_edge_ids | join(", ") }}</p>
      {% endif %}
      {% endif %}
    </article>

    <article class="resource-card" id="node-data-card">
      <div class="resource-header" style="flex-wrap: wrap; gap: 0.75rem;">
        <div>
          <h3>Data</h3>
          <p class="resource-subtitle">{% if schema_json %}{{ node_detail.node.type }}{% else %}Stored node body{% endif %}</p>
        </div>
        {% if schema_json %}
        <button type="button" class="button button-secondary" id="node-data-view-toggle" aria-pressed="false">Show JSON</button>
        {% endif %}
      </div>
      {% if schema_json %}
      <div id="node-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>{{ node_detail.node.data | tojson }}</script>
        </section>
      </div>
      <div id="node-data-json-view" class="data-view-panel" hidden>
        <pre class="code-block">{{ node_json }}</pre>
      </div>
      {% else %}
      <div class="data-view-panel">
        <pre class="code-block">{{ node_json }}</pre>
      </div>
      {% endif %}
    </article>
  </div>
</section>

<section class="dashboard-section">
  <div class="section-heading">
    <div>
      <p class="eyebrow">Payload</p>
      <h2>Binary payload</h2>
    </div>
  </div>

  <div class="card-grid">
    <article class="resource-card">
      <div class="resource-header">
        <div>
          <h3>Stored payload</h3>
          <p class="resource-subtitle">Inspect and download</p>
        </div>
      </div>
      <dl class="resource-meta">
        <div>
          <dt>Size</dt>
          <dd>{{ node_detail.node.payload_size }} bytes</dd>
        </div>
        <div>
          <dt>MIME</dt>
          <dd>{{ node_detail.node.payload_mime or "application/octet-stream" }}</dd>
        </div>
        <div>
          <dt>Filename</dt>
          <dd>{{ node_detail.node.payload_filename or "none" }}</dd>
        </div>
        <div>
          <dt>Hash</dt>
          <dd>{{ node_detail.node.payload_hash or "none" }}</dd>
        </div>
      </dl>
      {% if current_user.is_owner %}
      <p class="resource-note">
        Use Edit node to upload, replace, or clear this payload together with the rest of the node changes.
      </p>
      <div class="button-row">
        <a class="button" href="{{ mount_prefix }}{{ web_app.url_path_for('graph_node_edit_page', graph_id=current_graph.id, node_id=node_detail.node.id) }}">Edit node</a>
        {% if node_detail.node.has_payload %}
        <a class="button button-secondary" href="{{ mount_prefix }}{{ web_app.url_path_for('graph_node_payload_download', graph_id=current_graph.id, node_id=node_detail.node.id) }}">Download payload</a>
        {% endif %}
      </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>
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>
<script>
(function () {
  var toggle = document.getElementById("node-data-view-toggle");
  if (!toggle) return;
  var schemaPanel = document.getElementById("node-data-schema-view");
  var jsonPanel = document.getElementById("node-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 %}