{% extends "base.html" %}
{% import "_icon.html" as ico %}
{% 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>
      <h1 class="page-title">New project</h1>
      <p class="page-sub">Point flanner at a repo and it takes over the plan files your agents create there.</p>
    </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>
        <div class="input-with-button">
          <input class="input mono" type="text" id="project_root" name="project_root"
                 value="{{ project_root or '' }}" placeholder="~/work/notifications-service">
          <button class="btn" type="button" data-dir-picker="#project_root"
                  aria-label="Browse for the project root">{{ ico.icon('projects') }} Browse</button>
        </div>
        <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>
        <div class="input-with-button">
          <input class="input mono" type="text" id="plan_directory" name="plan_directory"
                 value="{{ plan_directory or '.plans' }}">
          <button class="btn" type="button" data-dir-picker="#plan_directory"
                  data-dir-base="#project_root"
                  aria-label="Browse for the plan directory">{{ ico.icon('projects') }} Browse</button>
        </div>
        <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>

  {#
    Folders on this machine, listed by the local server: a browser will not
    tell a page the real path of a folder somebody picks. Browsing for the
    plan directory starts in the project root and fills in a relative path.
  #}
  <dialog id="dir-picker" class="help-dialog dir-picker" aria-labelledby="dir-picker-title">
    <h2 class="help-title" id="dir-picker-title">Choose a folder</h2>
    <div class="dir-picker-path">
      <button class="btn btn-sm" type="button" data-dir-up aria-label="Up one folder">↑ Up</button>
      <code class="mono" data-dir-current></code>
    </div>
    <p class="hint bad" data-dir-error hidden></p>
    <ul class="dir-list" data-dir-list></ul>
    <div class="dir-picker-actions">
      <button class="btn" type="button" data-dir-cancel>Cancel</button>
      <button class="btn btn-primary" type="button" data-dir-use>Use this folder</button>
    </div>
  </dialog>
</div>
{% endblock %}