{% extends "base.html" %}

{% block title %}New Project - flanner{% endblock %}

{% block content %}
<div class="form-page">
    <nav class="breadcrumb" aria-label="Breadcrumb"><a href="/">~</a><span class="crumb-sep"> / </span><a href="/projects">projects</a><span class="crumb-sep"> / </span><span class="crumb-here">new</span></nav>
    <header class="page-header">
        <h1>Create New Project</h1>
        <a href="/projects" class="btn btn-secondary">
            Back to Projects
        </a>
    </header>

    <div class="form-container">
        <form method="POST" action="/projects/new" class="form">
            <div class="form-group">
                <label for="name">Project Name <span class="required">*</span></label>
                <input
                    type="text"
                    id="name"
                    name="name"
                    class="form-control"
                    value="{{ name or '' }}"
                    required
                    placeholder="my-awesome-project"
                    data-check-unique="project"
                >
                <small class="field-error" role="alert" hidden></small>
                <small class="form-help">A unique name for your project (lowercase, hyphens allowed)</small>
            </div>

            <div class="form-group">
                <label for="description">Description</label>
                <textarea
                    id="description"
                    name="description"
                    class="form-control"
                    rows="3"
                    placeholder="Brief description of your project..."
                >{{ description or '' }}</textarea>
            </div>

            <div class="form-group">
                <label for="project_root">Project Root Path</label>
                <input
                    type="text"
                    id="project_root"
                    name="project_root"
                    class="form-control"
                    value="{{ project_root or '' }}"
                    placeholder="Leave empty to auto-detect from current directory"
                >
                <small class="form-help">
                    Absolute path to your project root (where .git is located). Auto-detected if empty.
                </small>
            </div>

            <div class="form-group">
                <label for="plan_directory">Plan Directory</label>
                <input
                    type="text"
                    id="plan_directory"
                    name="plan_directory"
                    class="form-control"
                    value="{{ plan_directory or '.plans' }}"
                    placeholder=".plans"
                >
                <small class="form-help">
                    Relative path within project where plan files will be stored (default: .plans)
                </small>
            </div>

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

        <div class="info-box">
            <h3>What happens when you create a project?</h3>
            <ul>
                <li>A project entry is created in the database</li>
                <li>The plan directory is created in your project root</li>
                <li>The plan directory is added to <code>.gitignore</code></li>
                <li>You can start creating plan files immediately</li>
            </ul>
        </div>
    </div>
</div>
{% endblock %}