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

{% block topbar_back %}
<a class="btn back" href="/projects/{{ project.id }}" aria-label="Back to {{ project.name }}" title="Back to {{ project.name }}"><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>
    <a href="/projects/{{ project.id }}">{{ project.name }}</a><span class="sep">/</span>
    <span class="here">New plan</span>
  </nav>
{% endblock %}

{% block content %}
<div class="pane centred">
  <form method="post" action="/projects/{{ project.id }}/plans/new"
        style="width:720px; max-width:100%; display:flex; flex-direction:column; gap:16px">
    <div>
      <div style="font-size:20px; font-weight:700; letter-spacing:-.01em">New plan</div>
      <div style="font-size:13px; color:var(--text-3); margin-top:4px">
        Written into {{ project.plan_directory }} with a versioned header. Usually your
        agent does this; here is the manual route.</div>
    </div>

    <div class="card card-pad" style="display:flex; flex-direction:column; gap:16px">
      <div class="field">
        <label class="field-label" for="name">Plan name</label>
        <input class="input" type="text" id="name" name="name" required autofocus
               data-check-unique="plan" data-check-scope="{{ project.name }}"
               aria-describedby="name-error"
               value="{{ name or '' }}" placeholder="auth-rework">
        <p class="field-error" id="name-error" hidden>This project already has a plan with that name.</p>
        <p class="hint">Becomes the file name. No extension needed.</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 '' }}">
      </div>
      <div class="field">
        <label class="field-label" for="content">Content</label>
        <textarea class="textarea mono" id="content" name="content" rows="18"
                  placeholder="# Auth Rework&#10;&#10;What is changing and why.">{{ content or '' }}</textarea>
      </div>
    </div>

    <div class="form-actions">
      <a class="btn" href="/projects/{{ project.id }}">Cancel</a>
      <button class="btn btn-primary" type="submit">Create plan</button>
    </div>
  </form>
</div>
{% endblock %}