{% extends "_base.html" %}
{% block content %}
<div x-data="projectsPage()">
  <div class="proj-head">
    <div>
      <h1 class="page-title">Projects</h1>
      <p class="page-lead">Group chats that share instructions and files. Upload a file to a
        project once and every chat in it can read it; what the tools make is kept there too.</p>
    </div>
  </div>

  <form class="card proj-new" @submit.prevent="create()">
    <div class="form-row" style="margin: 0; flex: 1;">
      <label for="proj-name">New project</label>
      <input id="proj-name" type="text" x-model="name" maxlength="80"
             placeholder="Q3 board pack, Thesis chapter 2, Pricing research…">
    </div>
    <button class="btn" type="submit" :disabled="!name.trim() || busy">Create project</button>
  </form>
  <p class="proj-err" x-show="error" x-text="error" role="alert"></p>

  {% if projects %}
  <div class="proj-grid">
    {% for p in projects %}
    <a class="card proj-card" href="{{ url_for('projects.project_page', pid=p.id) }}">
      <span class="card-title">{{ p.name }}</span>
      <span class="proj-instr">{{ (p.instructions or 'No instructions yet.')[:180] }}</span>
      <span class="card-meta">{{ p.chats }} chat{{ '' if p.chats == 1 else 's' }}</span>
    </a>
    {% endfor %}
  </div>
  {% else %}
  <div class="empty">
    <h3>No projects yet</h3>
    <p>Name one above. You can move existing chats into it from a chat's options.</p>
  </div>
  {% endif %}
</div>

<style>
  .proj-new { display: flex; gap: 12px; align-items: flex-end; margin: 4px 0 8px; }
  .proj-err { color: var(--err); font-size: 13px; margin: 0 0 12px; }
  .proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-top: 18px; }
  .proj-card { display: flex; flex-direction: column; gap: 6px; color: var(--ink); min-height: 132px; }
  .proj-card:hover { text-decoration: none; border-color: var(--accent); }
  .proj-instr { color: var(--ink-2); font-size: 13px; line-height: 1.45; flex: 1;
                display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  @media (max-width: 640px) { .proj-new { flex-direction: column; align-items: stretch; } }
</style>
<script>
function projectsPage() {
  return {
    name: '', busy: false, error: '',
    async create() {
      this.busy = true; this.error = '';
      try {
        const r = await fetch('/api/projects', { method: 'POST', credentials: 'same-origin',
          headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name: this.name }) });
        const d = await r.json();
        if (!r.ok) throw new Error(d.error || r.status);
        window.location.href = '/projects/' + d.id;
      } catch (e) { this.error = 'Could not create the project: ' + e.message; this.busy = false; }
    },
  };
}
</script>
{% endblock %}