{% extends "base.html" %}
{% import "_sheet.html" as sheet %}

{% block title %}New Project - Makenotwork{% endblock %}
{% block body_attrs %} class="padded-page"{% endblock %}

{% block head %}
{% call sheet::sheet("wizard.css") %}{% endcall %}
{% endblock %}

{% block content %}
    {% include "partials/site_header.html" %}

    <div class="wizard-layout">
        <aside class="wizard-sidebar">
            <h2 class="subtitle-h2">New Project</h2>
            {% include "wizards/partials/step_nav.html" %}
        </aside>

        <div class="wizard-content" id="wizard-step">
            <div class="wizard-step">
                <h2 class="subtitle-h2">Basics</h2>
                <p class="step-description">Name your project, set a URL name, and choose the tools you will use.</p>

                <form hx-post="/dashboard/new-project/step/basics"
                      hx-target="#wizard-step" hx-swap="innerHTML">
                    <div class="form-group">
                        <label for="wiz-title">Title</label>
                        <input type="text" id="wiz-title" name="title" required
                               placeholder="My Awesome Project" autocomplete="off">
                    </div>

                    <div class="form-group">
                        <label for="wiz-slug">URL name</label>
                        <input type="text" id="wiz-slug" name="slug" pattern="[a-z0-9-]+"
                               title="Letters, numbers, and hyphens only"
                               placeholder="my-project" required autocomplete="off"
                               hx-post="/api/validate/project-slug"
                               hx-trigger="keyup changed delay:500ms"
                               hx-target="#slug-status"
                               hx-indicator="#slug-spinner">
                        <div class="hint">Letters, numbers, hyphens only. This is your project URL.</div>
                        <span id="slug-spinner" class="htmx-indicator wizard-field-spinner">Checking...</span>
                        <span id="slug-status"></span>
                    </div>

                    <div class="form-group">
                        <label>What tools will you use?</label>
                        <div class="hint wizard-hint-gap-md">Select all that apply. You can change these anytime.</div>
                        <div class="type-grid">
                        {% for (value, label, desc) in project_features %}
                            <label class="card--selectable">
                                <input type="checkbox" name="features" value="{{ value }}">
                                <span class="card--selectable-inner">
                                    <span class="card--selectable-label">{{ label }}</span>
                                    <span class="card--selectable-desc">{{ desc }}</span>
                                </span>
                            </label>
                        {% endfor %}
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="wiz-category">Category</label>
                        <div class="suggestion-input" id="category-suggestion">
                            <input type="text" id="wiz-category" name="category"
                                   placeholder="What kind of project is this?"
                                   autocomplete="off">
                            <div class="suggestion-dropdown" id="category-dropdown"></div>
                        </div>
                        <div class="hint">Choose an existing category or type a new one.</div>
                    </div>

                    <div class="form-group">
                        <label for="wiz-description">Description</label>
                        <textarea id="wiz-description" name="description" rows="4"
                                  placeholder="Describe your project..."></textarea>
                    </div>

                    <div class="form-group">
                        <label>AI Disclosure</label>
                        <div class="hint wizard-hint-gap-sm">How was AI used in creating this project's content?</div>
                        <div class="wizard-radio-group">
                            <label class="wizard-radio-option">
                                <input type="radio" name="ai_tier" value="handmade" required>
                                <span><strong>Handmade</strong>: no AI tools used in content creation</span>
                            </label>
                            <label class="wizard-radio-option">
                                <input type="radio" name="ai_tier" value="assisted" required>
                                <span><strong>AI-Assisted</strong>: AI tools used as part of the creative process</span>
                            </label>
                            <label class="wizard-radio-option">
                                <input type="radio" name="ai_tier" value="generated" required>
                                <span><strong>AI-Generated</strong>: content primarily generated by AI</span>
                            </label>
                        </div>
                    </div>

                    <div class="form-group hidden" id="ai-disclosure-group">
                        <label for="wiz-ai-disclosure">Disclosure Details</label>
                        <textarea id="wiz-ai-disclosure" name="ai_disclosure" rows="2"
                                  placeholder="Describe how AI was used..."></textarea>
                    </div>

                    <div class="wizard-actions">
                        <a href="/dashboard" class="btn-secondary">Cancel</a>
                        <button type="submit" class="btn-primary">Continue</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
{% endblock %}

{% block scripts %}
<script src="/static/wizard.js"></script>
<script src="/static/wizard-project-shell.js?v=0623"></script>
{% endblock %}