{% extends 'base.html' %}

{# Projects · Create — faithful re-expression of src/html/projects/create.html. New
   project form: details + colour picker, timeline w/ live duration, milestone repeater,
   team picker, budget, visibility radios, sticky action bar (axProjectForm Alpine). #}

{% block main %}
      <div x-data="axProjectForm()">
        <form @submit.prevent="save('create')">

        <!-- ════════════════ PAGE HEAD ════════════════ -->
        <div class="ax-page-head">
          <div class="ax-page-head__row">
            <div>
              <nav class="ax-breadcrumb" data-ax-breadcrumb aria-label="Breadcrumb"></nav>
              <h1 class="ax-page-head__title">New Project</h1>
              <p class="ax-page-head__subtitle">Set the scope, assign a team, plan the budget &amp; milestones, then kick off.</p>
            </div>
            <div class="ax-page-head__actions">
              <a class="ax-btn ax-btn--ghost" href="/projects/list/">
                <svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12l14 0"/><path d="M5 12l6 6"/><path d="M5 12l6 -6"/></svg>
                <span class="ax-btn__label">Back to projects</span>
              </a>
            </div>
          </div>
        </div>

        <!-- success alert -->
        <div x-show="saved" x-cloak x-transition class="ax-alert ax-alert--success" role="status" style="margin-bottom:var(--ax-space-6);">
          <span class="ax-alert__icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12l5 5l10 -10"/></svg></span>
          <div class="ax-alert__content"><p class="ax-alert__title" x-text="savedKind==='draft' ? 'Saved as draft' : 'Project created'"></p><p class="ax-alert__message" x-text="savedKind==='draft' ? 'Your project draft is saved.' : 'Your project is live and the team has been notified.'"></p></div>
          <button type="button" class="ax-btn ax-btn--ghost ax-btn--icon ax-btn--sm" @click="saved=false" aria-label="Dismiss"><svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6l-12 12"/><path d="M6 6l12 12"/></svg></button>
        </div>

        <!-- ════════════════ CONTENT ════════════════ -->
        <div class="ax-dash-grid" style="padding-bottom:96px;">

          <!-- ───────── LEFT (8) ───────── -->
          <div class="ax-col--8" style="display:flex;flex-direction:column;gap:var(--ax-space-6);">

            <!-- ░░ DETAILS ░░ -->
            <section class="ax-card" role="region" aria-label="Project details">
              <div class="ax-card__header"><div class="ax-card__titles"><span class="ax-card__eyebrow">Step 1</span><h2 class="ax-card__title">Project details</h2><p class="ax-card__subtitle">The essentials your team sees first.</p></div></div>
              <div class="ax-card__body" style="padding-top:0;display:flex;flex-direction:column;gap:var(--ax-space-5);">
                <div class="ax-field" style="margin:0;">
                  <label class="ax-label" for="pr-name">Project name <span class="ax-field__required">*</span></label>
                  <input id="pr-name" type="text" class="ax-input" placeholder="e.g. Aurora Redesign" x-model="form.name" maxlength="80">
                </div>
                <div class="ax-field" style="margin:0;">
                  <label class="ax-label" for="pr-desc">Description</label>
                  <textarea id="pr-desc" class="ax-textarea" rows="3" placeholder="What's the goal, the scope and the definition of done?" x-model="form.desc" maxlength="400" style="min-height:96px;"></textarea>
                  <span class="ax-help"><span class="ax-num" x-text="form.desc.length"></span> / 400 characters</span>
                </div>
                <div style="display:grid;grid-template-columns:repeat(12,1fr);gap:var(--ax-space-4);">
                  <div class="ax-field" style="grid-column:span 6;margin:0;">
                    <label class="ax-label" for="pr-category">Department</label>
                    <select id="pr-category" class="ax-select" x-model="form.category">
                      <option value="design">Design</option>
                      <option value="engineering">Engineering</option>
                      <option value="product">Product</option>
                      <option value="marketing">Marketing</option>
                      <option value="platform">Platform</option>
                      <option value="analytics">Analytics</option>
                    </select>
                  </div>
                  <div class="ax-field" style="grid-column:span 6;margin:0;">
                    <label class="ax-label" for="pr-priority">Priority</label>
                    <select id="pr-priority" class="ax-select" x-model="form.priority">
                      <option value="low">Low</option>
                      <option value="medium">Medium</option>
                      <option value="high">High</option>
                      <option value="critical">Critical</option>
                    </select>
                  </div>
                </div>
                <!-- accent colour picker -->
                <div>
                  <div class="ax-label" style="margin-bottom:var(--ax-space-2);">Project colour</div>
                  <div class="ax-cluster" style="gap:var(--ax-space-2);">
                    <template x-for="c in palette" :key="c.v">
                      <button type="button" @click="form.color=c.v" :aria-label="'Colour ' + c.name" :aria-pressed="(form.color===c.v).toString()" style="width:30px;height:30px;border-radius:50%;cursor:pointer;border:2px solid;display:grid;place-items:center;" :style="`background:${c.v};border-color:${form.color===c.v ? 'var(--ax-text-strong)' : 'transparent'};`">
                        <svg x-show="form.color===c.v" viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12l5 5l10 -10"/></svg>
                      </button>
                    </template>
                  </div>
                </div>
              </div>
            </section>

            <!-- ░░ TIMELINE ░░ -->
            <section class="ax-card" role="region" aria-label="Timeline">
              <div class="ax-card__header"><div class="ax-card__titles"><span class="ax-card__eyebrow">Step 2</span><h2 class="ax-card__title">Timeline</h2><p class="ax-card__subtitle">When does work start and when is it due?</p></div></div>
              <div class="ax-card__body" style="padding-top:0;display:flex;flex-direction:column;gap:var(--ax-space-5);">
                <div style="display:grid;grid-template-columns:repeat(12,1fr);gap:var(--ax-space-4);">
                  <div class="ax-field" style="grid-column:span 6;margin:0;">
                    <label class="ax-label" for="pr-start">Start date <span class="ax-field__required">*</span></label>
                    <input id="pr-start" type="date" class="ax-input ax-num" x-model="form.start" style="font-family:var(--ax-font-mono);">
                  </div>
                  <div class="ax-field" style="grid-column:span 6;margin:0;">
                    <label class="ax-label" for="pr-due">Due date <span class="ax-field__required">*</span></label>
                    <input id="pr-due" type="date" class="ax-input ax-num" x-model="form.due" style="font-family:var(--ax-font-mono);">
                  </div>
                </div>
                <div x-show="durationDays()" x-cloak class="ax-cluster" style="gap:var(--ax-space-2);font-size:var(--ax-text-sm);color:var(--ax-text-muted);">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="color:var(--ax-accent);"><path d="M12 8v4l3 3"/><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"/></svg>
                  <span>Duration: <b class="ax-num" style="font-family:var(--ax-font-mono);color:var(--ax-text-strong);" x-text="durationDays()"></b> days</span>
                </div>
              </div>
            </section>

            <!-- ░░ MILESTONES ░░ -->
            <section class="ax-card" role="region" aria-label="Milestones">
              <div class="ax-card__header">
                <div class="ax-card__titles"><span class="ax-card__eyebrow">Step 3</span><h2 class="ax-card__title">Milestones</h2><p class="ax-card__subtitle">Break the project into checkpoints.</p></div>
                <button type="button" class="ax-btn ax-btn--secondary ax-btn--sm" @click="addMilestone()"><svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5l0 14"/><path d="M5 12l14 0"/></svg><span class="ax-btn__label">Add milestone</span></button>
              </div>
              <div class="ax-card__body" style="padding-top:0;display:flex;flex-direction:column;gap:var(--ax-space-3);">
                <template x-for="(m, mi) in milestones" :key="m.id">
                  <div class="ax-cluster" style="gap:var(--ax-space-3);flex-wrap:nowrap;align-items:center;">
                    <span class="ax-avatar ax-avatar--sm ax-avatar--squircle" style="background:var(--ax-accent-wash);color:var(--ax-accent);font-weight:700;flex:none;" x-text="mi+1"></span>
                    <input type="text" class="ax-input" placeholder="Milestone name (e.g. Design freeze)" x-model="m.name" style="flex:1 1 auto;" :aria-label="'Milestone ' + (mi+1) + ' name'">
                    <input type="date" class="ax-input ax-num" x-model="m.date" style="font-family:var(--ax-font-mono);width:160px;flex:none;" :aria-label="'Milestone ' + (mi+1) + ' date'">
                    <button type="button" class="ax-btn ax-btn--ghost ax-btn--icon ax-btn--sm" @click="milestones.splice(mi,1)" :aria-label="'Remove milestone ' + (mi+1)"><svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 7l16 0"/><path d="M10 11l0 6"/><path d="M14 11l0 6"/><path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"/><path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"/></svg></button>
                  </div>
                </template>
                <div x-show="!milestones.length" x-cloak style="text-align:center;padding:var(--ax-space-6) 0;color:var(--ax-text-muted);font-size:var(--ax-text-sm);">No milestones yet. Add one to map out the plan.</div>
              </div>
            </section>
          </div>

          <!-- ───────── RIGHT (4) ───────── -->
          <aside class="ax-col--4" style="display:flex;flex-direction:column;gap:var(--ax-space-6);">

            <!-- ░░ TEAM PICKER ░░ -->
            <section class="ax-card" role="region" aria-label="Team">
              <div class="ax-card__header"><div class="ax-card__titles"><h2 class="ax-card__title">Team</h2></div><span class="ax-badge ax-badge--soft ax-badge--neutral ax-badge--pill ax-num"><span x-text="form.team.length"></span> selected</span></div>
              <div class="ax-card__body" style="padding-top:0;display:flex;flex-direction:column;gap:var(--ax-space-4);">
                <div class="ax-field" style="margin:0;">
                  <label class="ax-label" for="pr-lead">Project lead <span class="ax-field__required">*</span></label>
                  <select id="pr-lead" class="ax-select" x-model="form.lead">
                    <template x-for="p in people" :key="p.id"><option :value="p.id" x-text="p.name"></option></template>
                  </select>
                </div>
                <div>
                  <div class="ax-label" style="margin-bottom:var(--ax-space-2);">Members</div>
                  <div style="display:flex;flex-direction:column;gap:var(--ax-space-1);">
                    <template x-for="p in people" :key="p.id">
                      <label class="ax-cluster" style="gap:var(--ax-space-3);flex-wrap:nowrap;cursor:pointer;padding:var(--ax-space-2);border-radius:var(--ax-radius-sm);" :style="form.team.includes(p.id) ? 'background:var(--ax-accent-wash);' : ''">
                        <input type="checkbox" class="ax-checkbox" :value="p.id" x-model="form.team">
                        <span class="ax-avatar ax-avatar--xs" :style="`background:color-mix(in oklab,${p.c} 22%,transparent);color:${p.c};font-weight:600;flex:none;`" x-text="p.i"></span>
                        <span style="flex:1 1 auto;min-width:0;"><span style="display:block;font-size:var(--ax-text-sm);font-weight:var(--ax-weight-medium);color:var(--ax-text-strong);" x-text="p.name"></span><span style="display:block;font-size:var(--ax-text-xs);color:var(--ax-text-subtle);" x-text="p.role"></span></span>
                      </label>
                    </template>
                  </div>
                </div>
              </div>
            </section>

            <!-- ░░ BUDGET ░░ -->
            <section class="ax-card" role="region" aria-label="Budget">
              <div class="ax-card__header"><div class="ax-card__titles"><h2 class="ax-card__title">Budget</h2></div></div>
              <div class="ax-card__body" style="padding-top:0;display:flex;flex-direction:column;gap:var(--ax-space-5);">
                <div class="ax-field" style="margin:0;">
                  <label class="ax-label" for="pr-budget">Total budget</label>
                  <div class="ax-input-group">
                    <span class="ax-input-group__addon" style="color:var(--ax-text-muted);">$</span>
                    <input id="pr-budget" type="text" class="ax-input ax-num" inputmode="numeric" placeholder="0" x-model="form.budget" style="border:0;background:transparent;font-family:var(--ax-font-mono);">
                  </div>
                </div>
                <div class="ax-field" style="margin:0;">
                  <label class="ax-label" for="pr-currency">Currency</label>
                  <select id="pr-currency" class="ax-select" x-model="form.currency">
                    <option value="usd">USD — US Dollar</option>
                    <option value="eur">EUR — Euro</option>
                    <option value="gbp">GBP — British Pound</option>
                  </select>
                </div>
                <label class="ax-check" style="gap:var(--ax-space-3);">
                  <input type="checkbox" class="ax-switch" x-model="form.billable">
                  <span style="display:flex;flex-direction:column;"><span style="font-size:var(--ax-text-sm);color:var(--ax-text);font-weight:var(--ax-weight-medium);">Billable project</span><span style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);">Track time against client invoices.</span></span>
                </label>
              </div>
            </section>

            <!-- ░░ VISIBILITY ░░ -->
            <section class="ax-card" role="region" aria-label="Visibility">
              <div class="ax-card__header"><div class="ax-card__titles"><h2 class="ax-card__title">Visibility</h2></div></div>
              <div class="ax-card__body" style="padding-top:0;display:flex;flex-direction:column;gap:var(--ax-space-3);">
                <label style="display:flex;align-items:flex-start;gap:var(--ax-space-3);cursor:pointer;border-radius:var(--ax-radius-md);padding:var(--ax-space-3) var(--ax-space-4);border:1.5px solid;" :style="form.visibility==='team' ? 'border-color:var(--ax-accent);background:var(--ax-accent-wash);' : 'border-color:var(--ax-border);background:var(--ax-surface);'">
                  <input type="radio" name="pr-vis" class="ax-radio" value="team" x-model="form.visibility" style="margin-top:2px;">
                  <span><span style="display:block;font-size:var(--ax-text-sm);font-weight:var(--ax-weight-medium);color:var(--ax-text-strong);">Team only</span><span style="display:block;font-size:var(--ax-text-xs);color:var(--ax-text-subtle);">Visible to members you add.</span></span>
                </label>
                <label style="display:flex;align-items:flex-start;gap:var(--ax-space-3);cursor:pointer;border-radius:var(--ax-radius-md);padding:var(--ax-space-3) var(--ax-space-4);border:1.5px solid;" :style="form.visibility==='org' ? 'border-color:var(--ax-accent);background:var(--ax-accent-wash);' : 'border-color:var(--ax-border);background:var(--ax-surface);'">
                  <input type="radio" name="pr-vis" class="ax-radio" value="org" x-model="form.visibility" style="margin-top:2px;">
                  <span><span style="display:block;font-size:var(--ax-text-sm);font-weight:var(--ax-weight-medium);color:var(--ax-text-strong);">Whole organization</span><span style="display:block;font-size:var(--ax-text-xs);color:var(--ax-text-subtle);">Anyone in the workspace can view.</span></span>
                </label>
              </div>
            </section>
          </aside>
        </div>

        <!-- ════════════════ STICKY ACTION BAR ════════════════ -->
        <div style="position:sticky;bottom:0;z-index:5;margin-inline:calc(-1 * var(--ax-page-pad, var(--ax-space-6)));padding:var(--ax-space-4) var(--ax-page-pad, var(--ax-space-6));background:var(--ax-surface);backdrop-filter:blur(18px) saturate(1.1);border-top:1px solid var(--ax-border);box-shadow:var(--ax-shadow-sm);">
          <div class="ax-cluster" style="justify-content:space-between;gap:var(--ax-space-3);flex-wrap:wrap;">
            <span class="ax-cluster" style="gap:var(--ax-space-2);font-size:var(--ax-text-sm);color:var(--ax-text-muted);">
              <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="color:var(--ax-accent);"><path d="M9 12l2 2l4 -4"/><path d="M12 3a9 9 0 1 0 0 18a9 9 0 0 0 0 -18"/></svg>
              <span><b class="ax-num" x-text="form.team.length"></b> members · <b class="ax-num" x-text="milestones.length"></b> milestones</span>
            </span>
            <div class="ax-cluster" style="gap:var(--ax-space-2);">
              <a class="ax-btn ax-btn--ghost" href="/projects/list/">Cancel</a>
              <button type="button" class="ax-btn ax-btn--secondary" @click="save('draft')">Save draft</button>
              <button type="submit" class="ax-btn ax-btn--primary">
                <svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5l0 14"/><path d="M5 12l14 0"/></svg>
                <span class="ax-btn__label">Create project</span>
              </button>
            </div>
          </div>
        </div>

        </form>
      </div>
{% endblock %}

{% block scripts %}
  <script>
    function axProjectForm(){
      const C={cyan:'var(--ax-viz-cyan)',violet:'var(--ax-viz-violet)',pink:'var(--ax-viz-pink)',amber:'var(--ax-viz-amber)',emerald:'var(--ax-viz-emerald)',accent:'var(--ax-accent)'};
      return {
        saved:false, savedKind:'', _msid:2,
        form:{
          name:'', desc:'', category:'design', priority:'medium', color:C.accent,
          start:'', due:'', lead:'lena', team:['lena','devon'], budget:'', currency:'usd', billable:false, visibility:'team',
        },
        palette:[
          { name:'Accent', v:C.accent }, { name:'Cyan', v:C.cyan }, { name:'Violet', v:C.violet },
          { name:'Pink', v:C.pink }, { name:'Amber', v:C.amber }, { name:'Emerald', v:C.emerald },
        ],
        people:[
          { id:'lena', name:'Lena Brandt', role:'Principal Designer', i:'LB', c:C.accent },
          { id:'devon', name:'Devon Okafor', role:'Staff Engineer', i:'DO', c:C.cyan },
          { id:'priya', name:'Priya Nair', role:'Accessibility', i:'PN', c:C.pink },
          { id:'ava', name:'Ava Sutton', role:'Product Designer', i:'AS', c:C.amber },
          { id:'tomas', name:'Tomás Herrera', role:'Frontend Engineer', i:'TH', c:C.violet },
          { id:'marcus', name:'Marcus Reid', role:'Growth Lead', i:'MR', c:C.emerald },
        ],
        milestones:[
          { id:1, name:'Kickoff & scoping', date:'' },
          { id:2, name:'Design freeze', date:'' },
        ],
        addMilestone(){ this.milestones.push({ id:++this._msid, name:'', date:'' }); },
        durationDays(){ if(!this.form.start || !this.form.due) return 0; const d=(new Date(this.form.due)-new Date(this.form.start))/86400000; return d>0 ? Math.round(d) : 0; },
        save(kind){ this.savedKind=kind; this.saved=true; window.scrollTo({top:0,behavior:'smooth'}); setTimeout(()=>{ this.saved=false; }, 4000); },
      };
    }
  </script>
{% endblock %}