{# GET / — crate::pages::analytics::ui::AnalyticsPage #}
{% extends "ui/base.html" %}

{% block title %}{{ nav.tr("analytics-title") }}{% endblock %}

{% block head %}
<script src="https://cdn.jsdelivr.net/npm/echarts@6/dist/echarts.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.min.js"></script>
{% endblock %}

{% block content %}
<main x-data="{ sql: '', copied: false }">
  <section class="heading">
    <div>
      <p class="eyebrow">{{ nav.tr("analytics-eyebrow") }}</p>
      <h1>{{ nav.tr("analytics-title") }}</h1>
      <p>{{ nav.tr("analytics-description") }}</p>
    </div>
  </section>

  <div class="analytics">
    <aside class="panel sidebar">
      <h2>{{ nav.tr("analytics-available-data") }}</h2>
      <p class="hint">{{ nav.tr("analytics-load-hint") }}</p>
      <div hx-get="/api/profiles" hx-trigger="load" hx-target="#profile" hx-swap="innerHTML">
        <form class="catalog-load" hx-post="/api/catalog" hx-target="#catalog" hx-swap="innerHTML" hx-disabled-elt="button">
          <label>{{ nav.tr("analytics-profile") }}
            <select id="profile" name="profile_name" hx-post="/api/catalog" hx-trigger="change"
                    hx-target="#catalog" hx-swap="innerHTML">
              <option value="">{{ nav.tr("analytics-loading-profiles") }}</option>
            </select>
          </label>
          <button type="submit">{{ nav.tr("analytics-load-schema") }}</button>
        </form>
      </div>
      <div id="catalog" aria-live="polite"><p class="hint">{{ nav.tr("analytics-no-schema") }}</p></div>
    </aside>

    <section>
      <form id="query-form" class="panel query-form" hx-post="/api/query" hx-include="#profile"
            hx-target="#output" hx-swap="innerHTML" hx-disabled-elt="button">
        <div class="query-row">
          <label>{{ nav.tr("analytics-chart") }}
            <select name="chart_type">
              <option value="bar">{{ nav.tr("analytics-chart-bar") }}</option>
              <option value="line">{{ nav.tr("analytics-chart-line") }}</option>
              <option value="pie">{{ nav.tr("analytics-chart-pie") }}</option>
              <option value="scatter">{{ nav.tr("analytics-chart-scatter") }}</option>
              <option value="table">{{ nav.tr("analytics-chart-table") }}</option>
            </select>
          </label>
          <label>{{ nav.tr("analytics-max-rows") }}<input name="max_rows" type="number" min="1" value="1000"></label>
        </div>
        <label>{{ nav.tr("analytics-sql") }}
          <textarea id="sql" x-ref="sql" x-model="sql" name="sql" required spellcheck="false"
                    placeholder="{{ nav.tr("analytics-sql-placeholder") }}"></textarea>
        </label>
        <div class="actions">
          <button type="submit">{{ nav.tr("analytics-run-query") }}</button>
          <span class="htmx-indicator hint">{{ nav.tr("analytics-running") }}</span>
        </div>
      </form>

      <section id="output" aria-live="polite"></section>
    </section>
  </div>
</main>
{% endblock %}