{% extends "base.html" %}

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

{% block content %}
<main id="gtracker-configure-root" data-plugin="gtracker" class="mx-auto max-w-3xl px-4 py-8 text-foreground sm:px-6"
      data-save-url="/plugins/gtracker/api/save-credentials"
      data-test-url="/plugins/gtracker/api/test-connection"
      data-tracker-url="/plugins/gtracker/index"
      data-configured="{% if configured %}true{% else %}false{% endif %}"
      data-username="{{ username | default(value='') }}">
  <header class="mb-6 border-b border-divider pb-5">
    <p class="mb-2 text-xs font-semibold uppercase tracking-wider text-brand">Account setup</p>
    <h1 class="m-0 text-2xl font-bold tracking-tight sm:text-3xl">Connect your tracker</h1>
    <p class="mb-0 mt-2 max-w-2xl text-sm leading-6 text-muted">Use your GTracker web login. Your account is used to load your devices and location history.</p>
  </header>

  <section class="mx-auto max-w-xl rounded-2xl border border-divider bg-surface p-5 shadow-sm sm:p-7" aria-labelledby="gtracker-configure-title">
    <h2 id="gtracker-configure-title" class="mb-5 text-lg font-semibold">Tracker credentials</h2>
    <form id="gtracker-configure-form" class="space-y-5" novalidate>
      <div class="blocks-form-field">
        <label for="gtracker-username">Username</label>
        <input type="text" id="gtracker-username" name="username" class="blocks-input" autocomplete="username"
               value="{{ username | default(value='') }}" required>
      </div>
      <div class="blocks-form-field">
        <label for="gtracker-password">Password</label>
        <input type="password" id="gtracker-password" name="password" class="blocks-input" autocomplete="current-password"
               placeholder="{% if configured %}Leave blank to keep your current password{% else %}Required for first-time setup{% endif %}"
               {% if not configured %}required{% endif %}>
        <p class="m-0 text-xs leading-5 text-muted">Leave this blank when updating your username to keep the saved password.</p>
      </div>
      <div id="gtracker-configure-status" class="blocks-workspace-notice" role="status" aria-live="polite" tabindex="-1" hidden></div>
      <div class="flex flex-col-reverse gap-3 border-t border-divider pt-5 sm:flex-row sm:justify-end">
        <button type="button" id="gtracker-test-btn" class="blocks-button blocks-button-secondary">Test connection</button>
        <button type="submit" id="gtracker-save-btn" class="blocks-button blocks-button-primary">Save credentials</button>
      </div>
    </form>
  </section>
  {% if configured %}
  <p class="mx-auto mt-5 max-w-xl"><a href="/plugins/gtracker/index" class="font-semibold text-brand underline-offset-4 hover:underline">Go to your tracker →</a></p>
  {% endif %}
</main>
{% endblock %}

{% block scripts %}
<script src="/plugins/gtracker/assets/js/gtracker_configure.js" defer></script>
{% endblock %}