{% extends "base.html" %}
{% block title %}chat · Maverick{% endblock %}
{% block content %}
  <h2>chat</h2>
  <div class="panel">
    <label for="goal-title" style="display: block; font-weight: 600; margin-bottom: 0.75rem;">
      What do you want Maverick to do?
    </label>
    <form method="post" action="/chat/send" style="display: flex; gap: 0.5rem;">
      <input
        type="text"
        id="goal-title"
        name="title"
        placeholder="Plan a 3-day trip to Lisbon under $1500"
        required
        autofocus
        style="flex: 1; padding: 0.65rem 0.85rem; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px;"
      />
      <button
        type="submit"
        id="send-btn"
        style="padding: 0.65rem 1.5rem; background: var(--accent); color: #fff; border: 0; border-radius: 6px; cursor: pointer; font-weight: 500;"
      >Run</button>
    </form>
    <p id="goal-error" role="alert" aria-live="assertive"
       style="display: none; margin: 0.75rem 0 0; color: var(--danger); font-size: 0.85rem;"></p>
    <div style="margin-top: 1rem;">
      <p class="muted" style="font-size: 0.8rem; margin: 0 0 0.5rem;">Examples</p>
      <div style="display: flex; flex-wrap: wrap; gap: 0.5rem;">
        <button type="button" class="example-chip" data-text="Summarize my unread emails from this morning"
                style="padding: 0.4rem 0.85rem; background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 999px; cursor: pointer; font-size: 0.85rem;">
          Summarize unread emails
        </button>
        <button type="button" class="example-chip" data-text="Research the latest news on AI safety regulation"
                style="padding: 0.4rem 0.85rem; background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 999px; cursor: pointer; font-size: 0.85rem;">
          Research a topic
        </button>
        <button type="button" class="example-chip" data-text="Draft a polite reschedule email for my 2pm meeting"
                style="padding: 0.4rem 0.85rem; background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 999px; cursor: pointer; font-size: 0.85rem;">
          Draft an email
        </button>
      </div>
    </div>
    <script>
      document.querySelectorAll('.example-chip').forEach(function(btn) {
        btn.addEventListener('click', function() {
          var input = document.getElementById('goal-title');
          input.value = btn.dataset.text;
          input.focus();
        });
      });
      // The goal-form submit handler (fetch + inline errors) lives in
      // base.html so the overview and chat pages share one copy.
    </script>
  </div>

  <h2>recent goals</h2>
  <div class="panel">
    {% if recent %}
      <table>
        <thead><tr><th scope="col">id</th><th scope="col">status</th><th scope="col">title</th></tr></thead>
        <tbody>
          {% for g in recent %}
          <tr>
            <td><a href="/chat/goal/{{ g.id }}" style="color: var(--text);"><code>#{{ g.id }}</code></a></td>
            <td><span class="badge {{ g.status }}">{{ g.status }}</span></td>
            <td><a href="/chat/goal/{{ g.id }}" style="color: var(--text); text-decoration: none;">{{ g.title }}</a></td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    {% else %}
      <p class="muted">No goals yet — type one above to get started.</p>
    {% endif %}
  </div>
{% endblock %}