{% extends "base.html" %}
{% block title %}New project{% endblock %}

{% block topbar_back %}
<a class="btn back" href="/projects" aria-label="Back to projects" title="Back to projects"><span aria-hidden="true">←</span></a>
{% endblock %}

{% block topbar_main %}
<nav class="crumbs" aria-label="Breadcrumb">
    <a href="/projects">Projects</a><span class="sep">/</span><span class="here">New project</span>
  </nav>
{% endblock %}

{% block content %}
<div class="pane centred">
  <form method="post" action="/projects/new" style="width:620px; max-width:100%;
        display:flex; flex-direction:column; gap:16px">
    <div>
      <div style="font-size:20px; font-weight:700; letter-spacing:-.01em">New project</div>
      <div style="font-size:13px; color:var(--text-3); margin-top:4px">
        Point flanner at a repo and it takes over the plan files your agents create there.</div>
    </div>

    <div class="card card-pad" style="display:flex; flex-direction:column; gap:16px">
      <div class="field">
        <label class="field-label" for="name">Project name</label>
        <input class="input" type="text" id="name" name="name" required autofocus
               data-check-unique="project" aria-describedby="name-error"
               value="{{ name or '' }}" placeholder="notifications-service">
        <p class="field-error" id="name-error" hidden>A project with this name already exists.</p>
      </div>

      <div class="field">
        <label class="field-label" for="description">Description
          <span class="opt">(optional)</span></label>
        <input class="input" type="text" id="description" name="description"
               value="{{ description or '' }}" placeholder="What is this project about?">
      </div>

      <div class="field">
        <label class="field-label" for="project_root">Project root</label>
        <input class="input mono" type="text" id="project_root" name="project_root"
               value="{{ project_root or '' }}" placeholder="~/work/notifications-service">
        <p class="hint">The repository flanner should watch. A git repo is expected but
           not required.</p>
      </div>

      <div class="field">
        <label class="field-label" for="plan_directory">Plan directory</label>
        <input class="input mono" type="text" id="plan_directory" name="plan_directory"
               value="{{ plan_directory or '.plans' }}">
        <p class="hint">Relative to the project root. Created if it doesn't exist.</p>
      </div>

      <div style="border-top:1px solid var(--divider); padding-top:14px">
        <div class="switch-row">
          <label class="switch">
            <input type="checkbox" name="auto_gitignore" value="true" checked>
            <span class="track"></span><span class="knob"></span>
          </label>
          <span class="body">Auto-manage .gitignore
            <span>Keep the plan directory out of your commits automatically.</span></span>
        </div>
      </div>
    </div>

    <div class="form-actions">
      <a class="btn" href="/projects">Cancel</a>
      <button class="btn btn-primary" type="submit">Create project</button>
    </div>

    <p class="form-note">Same as running <code>flanner init</code> in the project root.</p>
  </form>
</div>
{% endblock %}