<div class="">
    <!-- Breadcrumb Navigation -->
    <div class="text-sm breadcrumbs mb-4 opacity-70">
        <ul>
            <li><a href="{{ url_for('main.index') }}">Projects</a></li>
            <li><a href="{{ url_for('main.project_detail', project_id=project.id) }}">{{ project.name }}</a></li>
            <li>{{ sprint.name }}</li>
        </ul>
    </div>

    <div id="sprint-{{ sprint.id }}" class="sprint-container" 
         x-data="{ 
            sprintOpen: true, 
            isSprintDetail: {{ 'true' if is_sprint_detail|default(false) else 'false' }},
            tasksOpen: localStorage.getItem('sprint-{{ sprint.id }}-tasks') !== 'false', 
            issuesOpen: localStorage.getItem('sprint-{{ sprint.id }}-issues') !== 'false',
            toggleTasks() {
                this.tasksOpen = !this.tasksOpen;
                localStorage.setItem('sprint-{{ sprint.id }}-tasks', this.tasksOpen);
            },
            toggleIssues() {
                this.issuesOpen = !this.issuesOpen;
                localStorage.setItem('sprint-{{ sprint.id }}-issues', this.issuesOpen);
            }
         }">
        <!-- Sprint Header - Collapsible with Alpine.js (unless on sprint detail page) -->
        <div class="card border-b border-base-300">
            <div class="flex items-center mb-2 gap-4">
                <span class="badge {% if sprint.status == 'Active' %}badge-primary{% elif sprint.status == 'Completed' %}badge-success{% else %}badge-secondary{% endif %}">{{ sprint.status }}</span>

                <span class="opacity-70 text-sm">Sprint #{{ sprint.id }}</span>
                <span class="opacity-70 text-sm">{{ sprint.created_at.strftime('%Y-%m-%d') if sprint.created_at else '' }}</span>
            </div>
            <div class="card-header flex justify-between items-center pb-2"
                 :class="{ 'cursor-pointer': !isSprintDetail }"
                 @click="if (!isSprintDetail) sprintOpen = !sprintOpen">
                 
                <div class="flex items-center">
                    <h4 class="text-lg font-medium">{{ sprint.name }}</h4></div>
               
                <div class="sprint-actions flex items-center ml-auto gap-2">
                    <div class="text-slate-200 hover:text-slate-400 cursor-pointer flex items-center justify-center tooltip tooltip-top"
                          data-tip="Edit sprint"
                          hx-get="/htmx/sprints/{{ sprint.id }}/edit" 
                          hx-target="#sprint-edit-form-container-{{ sprint.id }}" 
                          hx-swap="innerHTML"
                          hx-trigger="click"
                          @click.stop="sprintOpen = true">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" width="1.2em" height="1.2em">
                            <path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
                        </svg>
                    </div>
                    <div class="text-slate-200 hover:text-error cursor-pointer flex items-center justify-center tooltip tooltip-top"
                          data-tip="Delete sprint"
                          @click.stop="$dispatch('open-modal', {
                              id: 'delete-confirmation-modal', 
                              title: 'Confirm Delete Sprint'
                          }); 
                          const content = document.getElementById('delete-confirmation-modal-content');
                          content.innerHTML = '';
                          
                          // Create confirmation message
                          const message = document.createElement('p');
                          message.className = 'mb-4';
                          message.textContent = 'Are you sure you want to delete this sprint? This will also delete all tasks and issues in this sprint.';
                          content.appendChild(message);
                          
                          // Create action buttons container
                          const actions = document.createElement('div');
                          actions.className = 'modal-action';
                          
                          // Create cancel button
                          const cancelBtn = document.createElement('button');
                          cancelBtn.className = 'btn btn-ghost';
                          cancelBtn.textContent = 'Cancel';
                          // Use Alpine.js directive to close modal
                          cancelBtn.setAttribute('x-on:click', 'open = false');
                          
                          // Create delete button
                          const deleteBtn = document.createElement('button');
                          deleteBtn.className = 'btn btn-error';
                          deleteBtn.textContent = 'Delete';
                          deleteBtn.addEventListener('click', function() {
                              // Find the Alpine.js component and set open to false
                              const modalComponent = document.querySelector('#delete-confirmation-modal [x-data]');
                              if (modalComponent && modalComponent.__x) {
                                  modalComponent.__x.setData('open', false);
                              }
                              // Send delete request
                              htmx.ajax('DELETE', '/htmx/sprints/{{ sprint.id }}/delete', {target: '#appMainContainer', swap: 'innerHTML'});
                          });
                          
                          // Add buttons to container
                          actions.appendChild(cancelBtn);
                          actions.appendChild(deleteBtn);
                          content.appendChild(actions);">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" width="1.2em" height="1.2em">
                            <path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
                        </svg>
                    </div>
                </div>
                
            </div>
            
            
            <!-- Sprint Content - Collapsible with Alpine.js (unless on sprint detail page) -->
            <div x-show="isSprintDetail || sprintOpen" 
                 x-transition 
                 class="py-2">
                <!-- Sprint Edit Form Container -->
                <div id="sprint-edit-form-container-{{ sprint.id }}" class="border-none"></div>
                
                <!-- Sprint Description -->
                <div class="prose markdown">{{ sprint.description|markdown or 'No description provided.' }}</div>
                
                <!-- Tasks Section -->
                <div class="py-4">
                    <div class="flex items-center mb-3 cursor-pointer"
                         @click="toggleTasks()">
                        <h3 class="text-lg font-medium mb-0">Tasks</h3>
                        <div class="flex gap-4 ml-4">
                            <span class="badge badge-soft badge-primary">{{ sprint.tasks.count() - sprint.tasks.filter_by(completed=True).count() }} Open</span>
                            <span class="badge badge-soft badge-success">{{ sprint.tasks.filter_by(completed=True).count() }} Done</span>
                        </div>
                        <div class="flex">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5 ml-4" :class="tasksOpen ? 'rotate-180' : ''">
                                <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
                            </svg>
                        </div>
                        <div class="ml-auto">
                            <button class="btn btn-sm btn-outline btn-primary" 
                                    hx-get="/htmx/tasks/form/{{ sprint.id }}" 
                                    hx-target="#task-form-container-{{ sprint.id }}" 
                                    hx-swap="innerHTML"
                                    @click.stop>
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="1.2em" height="1.2em">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
                                </svg>
                                Add Task
                            </button>
                        </div>
                    </div>
                    
                    <div x-show="tasksOpen" x-transition>
                        <div id="task-form-container-{{ sprint.id }}" class="mb-3"></div>
                        <div id="sprint-tasks-{{ sprint.id }}" class="space-y-2">
                            {% if sprint.tasks.all() %}
                                {% for task in sprint.get_sorted_tasks() %}
                                    {% include 'partials/task_item.html' %}
                                {% endfor %}
                            {% else %}
                                <div class="text-center p-4 bg-base-200 rounded-lg">
                                    <p class="text-base-content/70">No tasks yet.</p>
                                </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
                
                <!-- Issues Section -->
                <div class="pt-4">
                    <div class="flex items-center mb-3 cursor-pointer"
                         @click="toggleIssues()">
                        <h3 class="text-lg font-medium mb-0">Issues</h3>
                        <div class="flex gap-4 ml-4">
                            <span class="badge badge-soft badge-primary">{{ sprint.issues.count() - sprint.issues.filter_by(completed=True).count() }} Open</span>
                            <span class="badge badge-soft badge-success">{{ sprint.issues.filter_by(completed=True).count() }} Done</span>
                        </div>
                        <div class="flex">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5 ml-4" :class="issuesOpen ? 'rotate-180' : ''">
                                <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
                            </svg>
                        </div>
                        <div class="ml-auto">
                            <button class="btn btn-sm btn-outline btn-primary" 
                                    hx-get="/htmx/issues/form/{{ sprint.id }}" 
                                    hx-target="#issue-form-container-{{ sprint.id }}" 
                                    hx-swap="innerHTML"
                                    @click.stop>
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="1.2em" height="1.2em">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
                                </svg>
                                Add Issue
                            </button>
                        </div>
                    </div>
                    
                    <div x-show="issuesOpen" x-transition>
                        <div id="issue-form-container-{{ sprint.id }}" class="mb-3"></div>
                        <div id="sprint-issues-{{ sprint.id }}" class="space-y-2">
                            {% if sprint.issues.all() %}
                                {% for issue in sprint.get_sorted_issues() %}
                                    {% include 'partials/issue_item.html' %}
                                {% endfor %}
                            {% else %}
                                <div class="text-center p-4 bg-base-200 rounded-lg">
                                    <p class="text-base-content/70">No issues yet.</p>
                                </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>