{% extends "base.html" %}
{% block title %}goals · Maverick{% endblock %}
{% block content %}
  <h2>all goals</h2>
  <div class="panel">
    {% if goals %}
    <table>
      <thead><tr><th scope="col">id</th><th scope="col">status</th><th scope="col">title</th><th scope="col">description</th><th scope="col"></th></tr></thead>
      <tbody>
      {% for g in goals %}
        <tr id="{{ g.id }}">
          <td><code>#{{ g.id }}</code></td>
          <td><span class="badge {{ g.status }}">{{ g.status }}</span></td>
          <td>{{ g.title }}</td>
          <td class="muted"{% if g.description and g.description|length > 120 %} title="{{ g.description }}"{% endif %}>{{ (g.description or '')[:120] }}{% if g.description and g.description|length > 120 %}…{% endif %}</td>
          <td class="muted" style="white-space: nowrap;">
            <a href="/goals/{{ g.id }}/plan">plan</a> ·
            <a href="/goals/{{ g.id }}/trajectory">replay</a>
          </td>
        </tr>
      {% endfor %}
      </tbody>
    </table>
    {% else %}
      <div style="text-align: center; padding: 2.5rem 1rem;">
        <h3 style="margin: 0 0 0.75rem; text-transform: none; letter-spacing: 0; font-size: 1.1rem; color: var(--text);">No goals yet</h3>
        <p class="muted" style="margin-bottom: 1.5rem;">
          Start one from the <a href="/chat">chat</a> or from the command line.
        </p>
        <pre style="background: var(--bg); padding: 0.85rem 1rem; border-radius: 6px; display: inline-block; text-align: left; margin: 0;">maverick start "Plan a 3-day trip to Lisbon under $1500"</pre>
      </div>
    {% endif %}
  </div>
{% endblock %}