{% extends "base.html" %}

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

  <p class="resource-note">
    Browse nodes in this graph, inspect stored metadata, and create new records with
    schema-validated JSON data.
  </p>

  <ul class="feature-list">
    <li>{{ node_list.total }} node{{ "" if node_list.total == 1 else "s" }} matched.</li>
    <li>Showing {{ node_list.offset + 1 if node_list.total else 0 }}-{{ [node_list.offset + node_list.limit,
      node_list.total] | min }}.</li>
  </ul>
</section>

{% set form_action = web_app.url_path_for('graph_node_list_page', graph_id=current_graph.id) %}
{% set filter_kind = 'node' %}
<section class="dashboard-section">
  <div class="section-heading">
    <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 hidden>
    <form class="auth-form" action="{{ form_action }}" method="get">
      {% include 'partials/list_filter_fields_node.html' %}
      <input type="hidden" name="offset" value="0">
      <div class="button-row">
        <button class="button" type="submit">Apply filters</button>
        <a class="button button-secondary" href="{{ clear_filters_url }}">Clear</a>
      </div>
    </form>
  </article>
</section>

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

  <div class="card-grid">
    {% for node in node_list["items"] %}
    <article class="resource-card">
      <div class="resource-header">
        <div>
          <h3>{{ node.name or node.id }}</h3>
          <p class="resource-subtitle">{{ node.type }}</p>
        </div>
      </div>
      <dl class="resource-meta">
        <div>
          <dt>Schema</dt>
          <dd>{{ node.type or "none" }}</dd>
        </div>
        <div>
          <dt>Parent</dt>
          <dd>{{ node.parent_id or "none" }}</dd>
        </div>
        <div>
          <dt>Payload</dt>
          <dd>{{ node.payload_size }} bytes</dd>
        </div>
        <div>
          <dt>Version</dt>
          <dd>{{ node.version }}</dd>
        </div>
      </dl>
      {% if node.tags %}
      <p class="resource-note">Tags: {{ node.tags | join(", ") }}</p>
      {% endif %}
      <div class="button-row">
        <a class="button button-secondary"
          href="{{ mount_prefix }}{{ web_app.url_path_for('graph_node_detail_page', graph_id=current_graph.id, node_id=node.id) }}">Open</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.id) }}">Edit</a>
        {% endif %}
      </div>
    </article>
    {% else %}
    <article class="resource-card resource-card-empty">
      <h3>No nodes matched</h3>
      <p class="resource-note">
        Adjust the current filters or create the first node for this graph.
      </p>
    </article>
    {% endfor %}
  </div>

  {% if previous_url or next_url %}
  <div class="button-row">
    {% if previous_url %}
    <a class="button button-secondary" href="{{ previous_url }}">Previous page</a>
    {% endif %}
    {% if next_url %}
    <a class="button button-secondary" href="{{ next_url }}">Next page</a>
    {% endif %}
  </div>
  {% endif %}
</section>
{% endblock %}

{% block scripts %}
{% 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 %}