{% extends "base.html" %}

{% block content %}
<section class="dashboard-section">
  <div class="section-heading">
    <div>
      <p class="eyebrow">Graph Viewer</p>
      <h2>{{ overview.graph.display_name }}</h2>
    </div>
  </div>

  <p class="resource-note">
    Visualize nodes and edges. Use the filters below to narrow what is shown.
  </p>
</section>

<section class="dashboard-section">
  <div class="section-heading">
    <div>
      <p class="eyebrow">Filters</p>
      <h2>Node and edge filters</h2>
    </div>
    <button class="button button-secondary" type="button" data-filters-toggle>
      Hide filters
    </button>
  </div>

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

  <article class="resource-card" data-filters-panel hidden>
    <div id="viewer-filter-form" data-graph-id="{{ graph_id }}" class="auth-form">
      <h3 class="resource-subtitle">Node filters</h3>
      <label class="field">
        <span>Type</span>
        <input name="node_type" value="{{ filter_params.node_type }}" placeholder="e.g. user">
      </label>
      <label class="field">
        <span>Parent ID</span>
        <input name="node_parent_id" value="{{ filter_params.node_parent_id }}">
      </label>
      <label class="field">
        <span>Filter (DSL)</span>
        <input name="node_filter" value="{{ filter_params.node_filter }}" placeholder="e.g. type = user">
        <small class="field-hint">Optional. Same syntax as Nodes list.</small>
      </label>
      <label class="field">
        <span>Node limit</span>
        <select name="node_limit">
          {% for option in (50, 100, 200, 500) %}
          <option value="{{ option }}" {% if filter_params.node_limit==option %}selected{% endif %}{{ option }}
          </option>
          {% endfor %}
        </select>
      </label>
 
      <h3 class="resource-subtitle">Edge filters</h3>
      <label class="field">
        <span>Type</span>
        <input name="edge_type" value="{{ filter_params.edge_type }}" placeholder="e.g. follows">
      </label>
      <label class="field">
        <span>Source ID</span>
        <input name="edge_source_id" value="{{ filter_params.edge_source_id }}">
      </label>
      <label class="field">
        <span>Target ID</span>
        <input name="edge_target_id" value="{{ filter_params.edge_target_id }}">
      </label>
      <label class="field">
        <span>Filter (DSL)</span>
        <input name="edge_filter" value="{{ filter_params.edge_filter }}" placeholder="e.g. type = follows">
        <small class="field-hint">Optional. Same syntax as Edges list.</small>
      </label>
      <label class="field">
        <span>Edge limit</span>
        <select name="edge_limit">
          {% for option in (50, 100, 200, 500) %}
          <option value="{{ option }}" {% if filter_params.edge_limit==option %}selected{% endif %}>{{ option }}
          </option>
          {% endfor %}
        </select>
      </label>
    </div>
  </article>
</section>

<section class="dashboard-section">
  <div class="section-heading">
    <p class="eyebrow">Graph</p>
    <h2>View</h2>
    <label class="field-inline" style="margin-left: auto; margin-right: 1rem;">
      <input type="checkbox" id="viewer-live-toggle">
      <span>Live</span>
    </label>
  </div>
  <div id="viewer-status" class="resource-note" aria-live="polite">Loading…</div>

  <div id="viewer-container" class="viewer-container">
    <button id="viewer-expand-btn" class="viewer-expand-btn" type="button" aria-label="Expand graph view"
      title="Expand graph view">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
        stroke-linecap="round" stroke-linejoin="round">
        <polyline points="15 3 21 3 21 9"></polyline>
        <polyline points="9 21 3 21 3 15"></polyline>
        <line x1="21" y1="3" x2="14" y2="10"></line>
        <line x1="3" y1="21" x2="10" y2="14"></line>
      </svg>
    </button>
    <div id="viewer-cy"></div>
  </div>
</section>
{% endblock %}

{% block scripts %}
<script
  src="{{ mount_prefix }}{{ web_app.url_path_for('static', path='js/cytoscape.min.js') }}?v={{ admin_version or 'dev' }}"></script>
<script data-viewer-base="{{ mount_prefix or '' }}"
  src="{{ mount_prefix }}{{ web_app.url_path_for('static', path='js/graph-viewer.js') }}?v={{ admin_version or 'dev' }}"></script>
{% include 'partials/filters_toggle_script.html' %}
<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>
{% endblock %}