{% extends "base.html" %}
{% import "macros/map.html" as map_macros %}

{% block page_title %}GTracker{% endblock %}
{% block head %}{% endblock %}

{% block content %}
<main id="gtracker-root" data-plugin="gtracker" class="mx-auto max-w-7xl space-y-6 px-4 py-6 text-foreground sm:px-6"
      data-configured="{% if configured %}true{% else %}false{% endif %}"
      data-configure-url="{{ configure_url | default(value='/plugins/gtracker/configure') }}"
      data-devices-url="/plugins/gtracker/api/devices"
      data-history-url="/plugins/gtracker/api/history"
      data-history-days="{{ history_days | default(value=30) }}">
  <header class="flex flex-col gap-3 border-b border-divider pb-5 sm:flex-row sm:items-end sm:justify-between">
    <div>
      <p class="mb-2 text-xs font-semibold uppercase tracking-wider text-brand">Account · GTracker</p>
      <h1 class="m-0 text-2xl font-bold tracking-tight sm:text-3xl">Device tracker</h1>
      <p class="mb-0 mt-2 text-sm text-muted">Current device locations and {{ history_days | default(value=30) }}-day movement history.</p>
    </div>
    <a class="blocks-button blocks-button-secondary" href="/plugins/gtracker/configure">Manage connection</a>
  </header>

  {% if not configured %}
  <section class="rounded-2xl border border-warning/30 bg-warning/5 p-5 text-sm" role="status">
    <h2 class="mb-1 text-base font-semibold">Connect your tracker account</h2>
    <p class="mb-4 text-muted">Set up your GTracker login to view your devices and location history.</p>
    <a class="blocks-button blocks-button-primary" href="{{ configure_url | default(value='/plugins/gtracker/configure') }}">Configure account</a>
  </section>
  {% else %}
  <section class="space-y-3 rounded-2xl border border-divider bg-surface p-4 shadow-sm sm:p-5" aria-labelledby="gtracker-devices-title">
    <div>
      <h2 id="gtracker-devices-title" class="m-0 text-lg font-semibold">Your devices</h2>
      <p class="mb-0 mt-1 text-sm text-muted">See the latest reported location and rename a device for easier identification.</p>
    </div>
    <p id="gtracker-devices-loading" class="m-0 py-3 text-sm text-muted" role="status" aria-live="polite">Loading devices…</p>
    <div id="gtracker-devices-error" class="blocks-workspace-notice" role="alert" hidden></div>
    <div class="blocks-responsive-table hidden" id="gtracker-devices-wrap">
      <table class="min-w-full" id="gtracker-devices-table">
        <thead><tr><th scope="col">Device</th><th scope="col">Location</th><th scope="col">Last updated</th><th scope="col">Actions</th></tr></thead>
        <tbody id="gtracker-devices-body"></tbody>
      </table>
    </div>
  </section>

  <section class="space-y-4 rounded-2xl border border-divider bg-surface p-4 shadow-sm sm:p-5" aria-labelledby="gtracker-history-title">
    <div class="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
      <div>
        <h2 id="gtracker-history-title" class="m-0 text-lg font-semibold">Location history</h2>
        <p class="mb-0 mt-1 text-sm text-muted">Review trips and events on a map and in a detailed list.</p>
      </div>
      <div class="w-full max-w-sm">
        <label for="gtracker-device-select" class="mb-1.5 block text-sm font-semibold">History for device</label>
        <select id="gtracker-device-select" class="blocks-input" aria-label="Select device for location history">
          <option value="">Select a device…</option>
        </select>
      </div>
    </div>
    <p id="gtracker-history-loading" class="m-0 py-3 text-sm text-muted" role="status" aria-live="polite" hidden>Loading location history…</p>
    <div id="gtracker-history-error" class="blocks-workspace-notice" role="alert" hidden></div>
    <p id="gtracker-history-empty" class="m-0 rounded-xl bg-canvas p-4 text-sm text-muted" role="status">Select a device to view its history.</p>
    <div class="hidden overflow-hidden rounded-xl border border-divider bg-canvas" id="gtracker-map-wrap">
      <div class="flex items-center justify-between gap-3 border-b border-divider px-4 py-3">
        <h3 class="m-0 text-sm font-semibold">Route map</h3>
        <span id="gtracker-history-count" class="rounded-full bg-brand/10 px-3 py-1 text-xs font-semibold text-brand hidden"></span>
      </div>
      <div class="p-2 sm:p-3">{{ map_macros::render(map_id="gtracker-history-map", height="420px") }}</div>
    </div>
    <div class="blocks-responsive-table hidden" id="gtracker-history-table-wrap">
      <table class="min-w-full" id="gtracker-history-table">
        <thead><tr><th scope="col">Type</th><th scope="col">Time</th><th scope="col">Location</th><th scope="col">Details</th></tr></thead>
        <tbody id="gtracker-history-body"></tbody>
      </table>
    </div>
  </section>

  <dialog id="gtracker-rename-modal" class="blocks-confirm-dialog" aria-labelledby="gtracker-rename-title">
    <form id="gtracker-rename-form" class="blocks-confirm-dialog__panel">
      <div class="flex items-start justify-between gap-4">
        <div><h2 id="gtracker-rename-title" class="blocks-confirm-dialog__title">Rename device</h2><p class="mb-0 mt-1 text-sm text-muted">Choose a name that helps you recognize this device.</p></div>
        <button type="button" class="blocks-icon-button close-modal-btn" aria-label="Close rename dialog">&times;</button>
      </div>
      <input type="hidden" id="gtracker-rename-device-id" name="device_id">
      <div class="blocks-form-field"><label for="gtracker-rename-nickname">Device name</label><input type="text" id="gtracker-rename-nickname" name="nickname" class="blocks-input" maxlength="120" required></div>
      <div id="gtracker-rename-status" class="blocks-workspace-notice" role="status" aria-live="polite" hidden></div>
      <div class="blocks-confirm-dialog__actions">
        <button type="button" class="blocks-button blocks-button-secondary close-modal-btn">Cancel</button>
        <button type="submit" class="blocks-button blocks-button-primary">Save name</button>
      </div>
    </form>
  </dialog>
  {% endif %}
</main>
{% endblock %}

{% block scripts %}
<script src="/static/js/blocks-map.js" defer></script>
<script src="/plugins/gtracker/assets/js/gtracker.js" defer></script>
{% endblock %}