{% extends "base.html" %}

{% block content %}
<div id="project-sprints-{{ project.id }}" class="sprints-container">
    <div class="d-flex justify-content-end mb-3">
        <button class="btn btn-sm btn-outline-primary" 
                hx-get="/htmx/sprints/form?project_id={{ project.id }}" 
                hx-target="#sprint-form-container-{{ project.id }}" 
                hx-swap="innerHTML">
            <i class="fas fa-plus me-1"></i>Add Sprint
        </button>
    </div>
    <div id="sprint-form-container-{{ project.id }}"></div>
    {% if project.get_sorted_sprints() %}
        {% for sprint in project.get_sorted_sprints() %}
            <div class="card mb-3 sprint-card" 
                 x-data="{ sprintOpen: {% if sprint.status == 'Active' %}true{% else %}false{% endif %} }"
                 :class="{ 'sprint-open': sprintOpen }">
                <!-- Sprint Header - Collapsible with Alpine.js -->
                <div class="sprint-container">
                    <div class="card-header d-flex justify-content-between align-items-center sprint-header cursor-pointer" 
                         @click="sprintOpen = !sprintOpen">
                        <div>
                            <span class="sprint-name">{{ sprint.name }}</span>
                            <small class="text-muted ms-2">(Created: {{ sprint.created_at.strftime('%Y-%m-%d') if sprint.created_at else '' }})</small>
                            <span class="badge 
                                {% if sprint.status == 'Planned' %}badge-secondary
                                {% elif sprint.status == 'Active' %}badge-primary
                                {% elif sprint.status == 'Completed' %}badge-success
                                {% else %}badge-secondary{% endif %}">
                                {{ sprint.status }}
                            </span>
                        </div>
                        <div class="sprint-actions">
                            <button class="btn btn-sm btn-outline-secondary me-2" 
                                    hx-get="/htmx/sprints/{{ sprint.id }}/edit" 
                                    hx-target="#sprint-edit-form-container-{{ sprint.id }}" 
                                    hx-swap="innerHTML"
                                    @click.stop>
                                <i class="fas fa-edit"></i>
                            </button>
                            <button class="btn btn-sm btn-outline-danger" 
                                    data-delete-sprint
                                    data-sprint-id="{{ sprint.id }}"
                                    hx-post="/htmx/sprints/{{ sprint.id }}/delete" 
                                    hx-target="#project-sprints-{{ project.id }}" 
                                    hx-swap="outerHTML"
                                    @click.stop>
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                    </div>
                    <div class="card-body" 
                         x-show="sprintOpen" 
                         id="sprint{{ sprint.id }}Content">
                        
                        <!-- Sprint Edit Form Container -->
                        <div id="sprint-edit-form-container-{{ sprint.id }}" class="mb-3"></div>
                        
                        <!-- Sprint Description -->
                        <div class="sprint-description mb-3">{{ sprint.description|markdown or 'No description provided.' }}</div>
                        
                        <!-- Tasks Section -->
                        <div class="tasks-section mb-3">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <h5 class="mb-0">
                                    Tasks
                                    <small class="text-muted ms-2">
                                        <span class="badge bg-primary">{{ sprint.tasks.count() - sprint.tasks.filter_by(completed=True).count() }} Open</span>
                                        <span class="badge bg-success">{{ sprint.tasks.filter_by(completed=True).count() }} Done</span>
                                    </small>
                                </h5>
                                <button class="btn btn-sm btn-outline-primary" 
                                        hx-get="/htmx/tasks/form/{{ sprint.id }}" 
                                        hx-target="#task-form-container-{{ sprint.id }}" 
                                        hx-swap="innerHTML">
                                    <i class="fas fa-plus me-1"></i>Add Task
                                </button>
                            </div>
                            <div id="task-form-container-{{ sprint.id }}" class="mb-3"></div>
                            <div class="tasks-container">
                                {% if sprint.tasks.count() > 0 %}
                                    {% for task in sprint.get_sorted_tasks() %}
                                        {% include 'partials/task_item.html' %}
                                    {% endfor %}
                                {% else %}
                                    <p class="text-muted">No tasks yet. Add your first task!</p>
                                {% endif %}
                            </div>
                        </div>
                        
                        <!-- Issues Section -->
                        <div class="issues-section">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <h5 class="mb-0">
                                    Issues
                                    <small class="text-muted ms-2">
                                        <span class="badge bg-primary">{{ sprint.issues.count() - sprint.issues.filter_by(completed=True).count() }} Open</span>
                                        <span class="badge bg-success">{{ sprint.issues.filter_by(completed=True).count() }} Done</span>
                                    </small>
                                </h5>
                                <button class="btn btn-sm btn-outline-primary" 
                                        hx-get="/htmx/issues/form/{{ sprint.id }}" 
                                        hx-target="#issue-form-container-{{ sprint.id }}" 
                                        hx-swap="innerHTML">
                                    <i class="fas fa-plus me-1"></i>Add Issue
                                </button>
                            </div>
                            <div id="issue-form-container-{{ sprint.id }}" class="mb-3"></div>
                            <div class="issues-container">
                                {% if sprint.issues.count() > 0 %}
                                    {% for issue in sprint.get_sorted_issues() %}
                                        {% include 'partials/issue_item.html' %}
                                    {% endfor %}
                                {% else %}
                                    <p class="text-muted">No issues yet. Add your first issue!</p>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        {% endfor %}
    {% else %}
        <p class="text-muted">No sprints yet. Click "Add Sprint" to create one.</p>
    {% endif %}
</div>
{% endblock %}
