<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<ul class="sprints-list">
    <c:forEach var="sprint" items="${sprints}" >
        <li class="sprint ${empty sprint.state ? 'not-started' : sprint.state eq 'S' ? 'started' : 'completed'}">
            <div class = "panel panel-info sprint-panel">
                <div class = "panel-body">
                    <div class="sprint-header">
                        <div class="first-row">
                            <div class="sprint-title">
                                <span class="sprint-title-title">SPRINT</span>
                                <span class="sprint-title-content">${sprint.id}</span>
                            </div>

                            <div class="sprint-progress progress">
                                <input type="hidden" name="all-tasks" class="all-tasks" value="${fn:length(sprint.tasks)}">

                                <div class="progress-bar progress-bar-success"
                                     style="width: ${not empty fn:length(sprint.tasks) ? sprint.doneTasks / fn:length(sprint.tasks) * 100 : 0}%">
                                    <input type="hidden" name="done-tasks" class="done-tasks" value="${sprint.doneTasks}">
                                </div>

                                <div class="progress-bar progress-bar-warning progress-bar-striped"
                                     style="width: ${not empty fn:length(sprint.tasks) ? sprint.inProgressTasks / fn:length(sprint.tasks) * 100 : 0}%">
                                    <input type="hidden" name="in-progress-tasks" class="in-progress-tasks" value="${sprint.inProgressTasks}">
                                </div>

                                <div class="progress-bar progress-bar-danger"
                                     style="width: ${not empty fn:length(sprint.tasks) ? sprint.bloquedTasks / fn:length(sprint.tasks) * 100 : 0}%">
                                    <input type="hidden" name="bloqued-tasks" class="bloqued-tasks" value="${sprint.bloquedTasks}">
                                </div>
                            </div>

                            <button type="button" class="btn btn-${empty sprint.state ? 'secondary' : sprint.state eq 'S' ? 'primary' : 'info'} btn-xs sprint-state">
                                    ${empty sprint.state ? 'Start sprint' : sprint.state eq 'S' ? 'Complete sprint' : 'Sprint completed'}
                            </button>

                            <span class="delete-sprint glyphicon glyphicon-trash"></span>
                        </div>
                    </div>

                    <div class="sprint-tasks-content extra-content hidden" style="display: none;">
                        <div class="second-row">
                            <div class="sprint-info-editable" style="display: ${empty sprint.state ? 'block' : 'none'}">
                                <div class="sprint-dates">
                                    <div class="sprint-start-date">
                                        <span class="start-date-title">Start date</span>
                                        <input type="date" name="start-date" class="start-date" value="${sprint.startDate}">
                                    </div>

                                    <div class="sprint-end-date">
                                        <span class="start-end-title">End date</span>
                                        <input type="date" name="end-date" class="end-date" value="${sprint.endDate}">
                                    </div>
                                </div>

                                <div class="sprint-numbers">
                                    <div class="total-capacity">
                                        <span class="total-capacity-title">Total capacity</span>
                                        <input type="number" name="total-capacity" class="total-capacity" value="${sprint.totalCapacity}">
                                    </div>

                                    <div class="sprints-members">
                                        <span class="sprints-members-title">Members</span>
                                        <input type="number" name="sprints-members" class="sprints-members" value="${sprint.members}">
                                    </div>
                                </div>
                            </div>

                            <div class="sprint-info-fixed" style="display: ${not empty sprint.state ? 'block' : 'none'}">
                                <div class="sprint-dates-span">
                                    <div class="sprint-start-date">
                                        <span class="start-date-title">Start date</span>
                                        <span class="start-date-content">${sprint.startDate}</span>
                                    </div>

                                    <div class="sprint-end-date">
                                        <span class="start-end-title">End date</span>
                                        <span class="start-end-content">${sprint.endDate}</span>
                                    </div>
                                </div>

                                <div class="sprint-numbers-span">
                                    <div class="total-capacity">
                                        <span class="total-capacity-title">Total capacity</span>
                                        <span class="total-capacity-content">${sprint.totalCapacity}</span>
                                    </div>

                                    <div class="sprints-members">
                                        <span class="sprints-members-title">Members</span>
                                        <span class="sprints-members-content">${sprint.members}</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <ul class="sortable_sprint sprint-tasks connectedSortable">
                            <span>Drop task here: </span>
                            <c:set var="tasks" value="${sprint.tasks}" scope="session" ></c:set>
                            <jsp:include page="sprint_task_elements.jsp"/>
                        </ul>
                    </div>
                </div>
            </div>
        </li>
    </c:forEach>
</ul>