projax/web/templates/tasks_section.tmpl

{{define "tasks-section"}}
<section class="tasks" id="tasks-section">
  <h2>Tasks</h2>
  {{if .Banner}}<p class="banner warn" role="alert">{{.Banner}}</p>{{end}}
  {{if .Tasks}}
    {{$root := .}}
    {{range .Tasks}}
      {{$calURL := .CalendarURL}}
      <div class="cal-block" data-cal="{{$calURL}}">
        <h3>{{.DisplayName}}</h3>
        {{if .Error}}<p class="banner warn">{{.Error}}</p>{{end}}

        <form class="todo-create"
              hx-post="/i/{{$root.Item.PrimaryPath}}/caldav/todo/todo-create"
              hx-target="#tasks-section"
              hx-swap="outerHTML">
          <input type="hidden" name="calendar_url" value="{{$calURL}}">
          <input type="text" name="summary" placeholder="Add a task…" required>
          <input type="date" name="due" title="due date (optional)">
          <button type="submit">Add</button>
        </form>

        {{if .Open}}
          <ul class="todo open">
            {{range .Open}}
              <li class="todo-row" data-uid="{{.UID}}">
                <form class="todo-complete inline"
                      hx-post="/i/{{$root.Item.PrimaryPath}}/caldav/todo/complete"
                      hx-target="#tasks-section"
                      hx-swap="outerHTML">
                  <input type="hidden" name="calendar_url" value="{{$calURL}}">
                  <input type="hidden" name="uid" value="{{.UID}}">
                  <button type="submit" class="check" title="Mark complete" aria-label="Mark complete">☐</button>
                </form>

                <form class="todo-edit inline"
                      hx-post="/i/{{$root.Item.PrimaryPath}}/caldav/todo/edit"
                      hx-target="#tasks-section"
                      hx-swap="outerHTML">
                  <input type="hidden" name="calendar_url" value="{{$calURL}}">
                  <input type="hidden" name="uid" value="{{.UID}}">
                  <input type="text" name="summary" value="{{.Summary}}" required>
                  <input type="date" name="due" value="{{if .Due}}{{.Due.Format "2006-01-02"}}{{end}}">
                  <button type="submit" title="Save edits">Save</button>
                </form>

                <form class="todo-delete inline"
                      hx-post="/i/{{$root.Item.PrimaryPath}}/caldav/todo/delete"
                      hx-target="#tasks-section"
                      hx-swap="outerHTML"
                      hx-confirm="Delete this task? This cannot be undone.">
                  <input type="hidden" name="calendar_url" value="{{$calURL}}">
                  <input type="hidden" name="uid" value="{{.UID}}">
                  <button type="submit" class="x" title="Delete" aria-label="Delete">×</button>
                </form>
              </li>
            {{end}}
          </ul>
        {{else}}
          <p class="muted">No open tasks.</p>
        {{end}}

        {{if .DoneRecent}}
          <details>
            <summary class="muted">{{len .DoneRecent}} completed in last 30 days</summary>
            <ul class="todo done">
              {{range .DoneRecent}}
                <li class="todo-row" data-uid="{{.UID}}">
                  <form class="todo-reopen inline"
                        hx-post="/i/{{$root.Item.PrimaryPath}}/caldav/todo/reopen"
                        hx-target="#tasks-section"
                        hx-swap="outerHTML"
                        title="Reopen">
                    <input type="hidden" name="calendar_url" value="{{$calURL}}">
                    <input type="hidden" name="uid" value="{{.UID}}">
                    <button type="submit" class="check" aria-label="Reopen">☑</button>
                  </form>
                  <span class="summary">{{.Summary}}</span>
                  <form class="todo-delete inline"
                        hx-post="/i/{{$root.Item.PrimaryPath}}/caldav/todo/delete"
                        hx-target="#tasks-section"
                        hx-swap="outerHTML"
                        hx-confirm="Delete this task? This cannot be undone.">
                    <input type="hidden" name="calendar_url" value="{{$calURL}}">
                    <input type="hidden" name="uid" value="{{.UID}}">
                    <button type="submit" class="x" title="Delete" aria-label="Delete">×</button>
                  </form>
                </li>
              {{end}}
            </ul>
          </details>
        {{end}}
      </div>
    {{end}}
  {{else}}
    <p class="muted">No CalDAV list linked.</p>
  {{end}}

  {{/* Phase 5j: per-item picker for sharing an existing list across
       multiple projax items (e.g. one "Vacations 2026" list under
       several admin.vacations sub-items). Renders in BOTH states:
       unlinked items see it next to Create-new; already-linked items
       see it as "+ link another" for the multi-list flow. */}}
  <div class="caldav-actions">
    {{if .AvailableCalendars}}
      <form method="post" action="/i/{{.Item.PrimaryPath}}/caldav/link-existing" class="caldav-link-existing inline">
        <label class="visually-hidden" for="caldav-link-existing-select">Link existing CalDAV list</label>
        <select id="caldav-link-existing-select" name="calendar_url" required>
          <option value="">— link existing list —</option>
          {{range .AvailableCalendars}}<option value="{{.URL}}">{{.DisplayName}}</option>{{end}}
        </select>
        <button type="submit">Link</button>
      </form>
    {{end}}
    {{if not .Tasks}}
      <form method="post" action="/i/{{.Item.PrimaryPath}}/caldav/create" class="inline">
        <button type="submit">+ Create new list</button>
      </form>
    {{end}}
  </div>
</section>
{{end}}