{% extends "base.html" %}

{% block content %}
<section class="hero">
  <div class="hero-copy">
    <p class="eyebrow">Graphs</p>
    <h1>All graphs across all managed instances.</h1>
    <p class="hero-text">
      Signed in as <strong>{{ current_user.display_name }}</strong>.
    </p>
  </div>

  <div class="hero-panel">
    <h2>Quick actions</h2>
    <div class="button-row">
      {% if current_user.is_owner %}
      <a class="button" href="{{ mount_prefix }}{{ web_app.url_path_for('graph_create_page') }}">Add graph</a>
      <a class="button button-secondary" href="{{ mount_prefix }}{{ web_app.url_path_for('instance_create_page') }}">Add instance</a>
      {% endif %}
      <a class="button button-secondary" href="{{ mount_prefix }}{{ web_app.url_path_for('api_keys_page') }}">Manage API keys</a>
      <a class="button button-secondary" href="{{ api_docs_url }}">API docs</a>
      <form action="{{ mount_prefix }}{{ web_app.url_path_for('logout') }}" method="post">
        <button class="button button-secondary" type="submit">Sign out</button>
      </form>
    </div>
    <ul class="feature-list">
      <li>{{ graphs|length }} graph{{ "" if graphs|length == 1 else "s" }} visible.</li>
      <li>{{ instances|length }} managed instance{{ "" if instances|length == 1 else "s" }} registered.</li>
      <li>{{ api_keys|length }} API key{{ "" if api_keys|length == 1 else "s" }} for your account.</li>
    </ul>
  </div>
</section>

<section class="dashboard-section">
  <div class="section-heading">
    <div>
      <p class="eyebrow">Unified View</p>
      <h2>Graphs</h2>
    </div>
    {% if current_user.is_owner %}
    <a class="button" href="{{ mount_prefix }}{{ web_app.url_path_for('graph_create_page') }}">Add graph</a>
    {% endif %}
  </div>

  <div class="card-grid">
    {% for graph in graphs %}
    <article class="resource-card">
      <div class="resource-header">
        <div>
          <h3>{{ graph.display_name }}</h3>
          <p class="resource-subtitle">{{ graph.instance_display_name }}</p>
        </div>
        <span class="status-pill status-{{ graph.status }}">{{ graph.status }}</span>
      </div>
      <dl class="resource-meta">
        <div>
          <dt>Prefix</dt>
          <dd>{{ graph.table_prefix if graph.table_prefix else "(default)" }}</dd>
        </div>
        <div>
          <dt>Instance</dt>
          <dd>{{ graph.instance_slug }}</dd>
        </div>
        <div>
          <dt>Source</dt>
          <dd>{{ graph.source }}</dd>
        </div>
        <div>
          <dt>Present</dt>
          <dd>{{ "yes" if graph.exists_in_instance else "no" }}</dd>
        </div>
      </dl>
      {% if graph.status_message %}
      <p class="resource-note">{{ graph.status_message }}</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_overview_page', graph_id=graph.id) }}">Open</a>
        <a class="button button-secondary"
          href="{{ mount_prefix }}{{ web_app.url_path_for('graph_edit_page', graph_id=graph.id) }}">Edit</a>
        {% if graph.table_prefix %}
        <form action="{{ mount_prefix }}{{ web_app.url_path_for('graph_delete', graph_id=graph.id) }}" method="post">
          <button class="button button-danger" type="submit">Delete</button>
        </form>
        {% endif %}
      </div>
      {% endif %}
    </article>
    {% else %}
    <article class="resource-card resource-card-empty">
      <h3>No graphs yet</h3>
      <p class="resource-note">
        Managed graphs will appear here once an instance is reachable and its GPDB
        tables are discovered.
      </p>
    </article>
    {% endfor %}
  </div>
</section>

<section class="dashboard-section">
  <div class="section-heading">
    <div>
      <p class="eyebrow">Connections</p>
      <h2>Instances</h2>
    </div>
    {% if current_user.is_owner %}
    <a class="button" href="{{ mount_prefix }}{{ web_app.url_path_for('instance_create_page') }}">Add instance</a>
    {% endif %}
  </div>

  <div class="card-grid">
    {% for instance in instances %}
    <article class="resource-card">
      <div class="resource-header">
        <div>
          <h3>{{ instance.display_name }}</h3>
          <p class="resource-subtitle">{{ instance.slug }}</p>
        </div>
        <span class="status-pill status-{{ instance.status }}">{{ instance.status }}</span>
      </div>
      <dl class="resource-meta">
        <div>
          <dt>Mode</dt>
          <dd>{{ instance.mode }}</dd>
        </div>
        <div>
          <dt>Database</dt>
          <dd>{{ instance.database or "runtime-managed" }}</dd>
        </div>
        <div>
          <dt>Host</dt>
          <dd>{{ instance.host or "runtime-managed" }}</dd>
        </div>
        <div>
          <dt>Active</dt>
          <dd>{{ "yes" if instance.is_active else "no" }}</dd>
        </div>
      </dl>
      {% if instance.description %}
      <p class="resource-note">{{ instance.description }}</p>
      {% endif %}
      {% if instance.status_message %}
      <p class="resource-note">{{ instance.status_message }}</p>
      {% endif %}
      {% if current_user.is_owner %}
      <div class="button-row">
        <a class="button button-secondary"
          href="{{ mount_prefix }}{{ web_app.url_path_for('instance_edit_page', instance_id=instance.id) }}">Edit</a>
        {% if not instance.is_builtin %}
        <form action="{{ mount_prefix }}{{ web_app.url_path_for('instance_delete', instance_id=instance.id) }}" method="post">
          <button class="button button-danger" type="submit">Delete</button>
        </form>
        {% endif %}
      </div>
      {% endif %}
    </article>
    {% endfor %}
  </div>
</section>
{% endblock %}