{{define "task-detail"}}
<div class="p-4">
    <h3 class="font-semibold text-white mb-3">{{.Title}}</h3>
    <form hx-post="/tasks/update" hx-swap="none" hx-on::after-request="if(event.detail.successful) { closeTaskModal(); htmx.trigger(document.body, 'refresh-tasks'); }">
        <input type="hidden" name="id" value="{{.ID}}">
        <input type="hidden" name="source" value="{{.Source}}">
        <label class="block text-sm font-medium text-white/70 mb-1">Description</label>
        <textarea name="description" class="w-full bg-input border border-white/20 rounded-lg px-3 py-2 text-sm text-white placeholder-white/50 mb-3 h-32">{{.Description}}</textarea>
        <button type="submit" class="w-full bg-white/20 hover:bg-white/30 text-white px-4 py-2 rounded-lg text-sm font-medium">Save</button>
    </form>

    {{if .IsDoot}}
    <div class="mt-4 pt-4 border-t border-white/10">
        <h4 class="text-sm font-medium text-white/70 mb-2">Recurrence</h4>
        {{if .RecurrenceFreq}}
        <p class="text-xs text-teal-300/80 mb-2">
            Repeats every {{if gt .RecurrenceInterval 1}}{{.RecurrenceInterval}} {{recurrenceUnit .RecurrenceFreq}}s{{else}}{{recurrenceUnit .RecurrenceFreq}}{{end}}{{if and (eq .RecurrenceFreq "weekly") .RecurrenceWeekdays}} on {{weekdayNames .RecurrenceWeekdays}}{{end}}
        </p>
        {{end}}
        <form hx-post="/tasks/recurrence" hx-target="#task-edit-content" hx-swap="innerHTML">
            <input type="hidden" name="id" value="{{.ID}}">
            <div class="flex gap-2 mb-2">
                <select name="freq" class="flex-1 bg-input border border-white/20 rounded-lg px-3 py-2 text-sm text-white">
                    <option value="" {{if eq .RecurrenceFreq ""}}selected{{end}}>None</option>
                    <option value="daily" {{if eq .RecurrenceFreq "daily"}}selected{{end}}>Daily</option>
                    <option value="weekly" {{if eq .RecurrenceFreq "weekly"}}selected{{end}}>Weekly</option>
                    <option value="monthly" {{if eq .RecurrenceFreq "monthly"}}selected{{end}}>Monthly</option>
                    <option value="yearly" {{if eq .RecurrenceFreq "yearly"}}selected{{end}}>Yearly</option>
                </select>
                <input type="number" name="interval" min="1" value="{{if gt .RecurrenceInterval 0}}{{.RecurrenceInterval}}{{else}}1{{end}}"
                       class="w-20 bg-input border border-white/20 rounded-lg px-3 py-2 text-sm text-white" title="Every N">
            </div>
            <div class="flex flex-wrap gap-3 mb-3">
                <label class="flex items-center gap-1 text-xs text-white/60">
                    <input type="checkbox" name="weekdays" value="0" {{if hasInt .RecurrenceWeekdays 0}}checked{{end}} class="h-3.5 w-3.5 rounded bg-black/40 border-white/30">
                    Su
                </label>
                <label class="flex items-center gap-1 text-xs text-white/60">
                    <input type="checkbox" name="weekdays" value="1" {{if hasInt .RecurrenceWeekdays 1}}checked{{end}} class="h-3.5 w-3.5 rounded bg-black/40 border-white/30">
                    Mo
                </label>
                <label class="flex items-center gap-1 text-xs text-white/60">
                    <input type="checkbox" name="weekdays" value="2" {{if hasInt .RecurrenceWeekdays 2}}checked{{end}} class="h-3.5 w-3.5 rounded bg-black/40 border-white/30">
                    Tu
                </label>
                <label class="flex items-center gap-1 text-xs text-white/60">
                    <input type="checkbox" name="weekdays" value="3" {{if hasInt .RecurrenceWeekdays 3}}checked{{end}} class="h-3.5 w-3.5 rounded bg-black/40 border-white/30">
                    We
                </label>
                <label class="flex items-center gap-1 text-xs text-white/60">
                    <input type="checkbox" name="weekdays" value="4" {{if hasInt .RecurrenceWeekdays 4}}checked{{end}} class="h-3.5 w-3.5 rounded bg-black/40 border-white/30">
                    Th
                </label>
                <label class="flex items-center gap-1 text-xs text-white/60">
                    <input type="checkbox" name="weekdays" value="5" {{if hasInt .RecurrenceWeekdays 5}}checked{{end}} class="h-3.5 w-3.5 rounded bg-black/40 border-white/30">
                    Fr
                </label>
                <label class="flex items-center gap-1 text-xs text-white/60">
                    <input type="checkbox" name="weekdays" value="6" {{if hasInt .RecurrenceWeekdays 6}}checked{{end}} class="h-3.5 w-3.5 rounded bg-black/40 border-white/30">
                    Sa
                </label>
            </div>
            <button type="submit" class="w-full bg-white/10 hover:bg-white/20 text-white/90 px-4 py-2 rounded-lg text-sm font-medium">
                {{if .RecurrenceFreq}}Update{{else}}Set{{end}} Recurrence
            </button>
        </form>
    </div>
    {{end}}
</div>
{{end}}