<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>

<ul class="backlog-list" id="sortable">
    <c:forEach var="task" items="${tasks}" >
        <li class="item">
            <div class="panel panel-${task.state eq 'Blocked' ? 'default' : 'info'}">
                <div class="panel-heading">
                    <ul class="title-info-list">
                        <li class="item-ref">
                            <span class="item-ref-title title">Ref</span>
                            <span class="item-ref-content content">#${task.id}</span>
                        </li>

                        <li class="item-type">
                            <span class="item-type-title title">Type</span>
                            <span class="item-type-content content">${task.type}</span>
                        </li>

                        <li class="item-title">
                            <span class="item-title-title title">Title</span>
                            <span class="item-title-content content">${task.title}</span>
                        </li>

                        <li class="item-state">
                            <span class="item-state-title title">State</span>

                            <select>
                                <option value="To do" ${'To do' eq task.state ? 'selected' : ''}>To do</option>
                                <option value="In progress" ${'In progress' eq task.state ? 'selected' : ''}>In progress</option>
                                <option value="Done" ${'Done' eq task.state ? 'selected' : ''}>Done</option>
                                <option value="Blocked" ${'Blocked' eq task.state ? 'selected' : ''}><span class="label label-danger">Blocked</span></option>
                            </select>
                        </li>

                        <li class="item-cost">
                            <span class="item-cost-title title">Cost</span>
                            <input type="text" name="point" id="points" value="${task.points}" />
                        </li>
                    </ul>

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

                <div class="extra-content hidden" style="display: none">
                    <table class="table task-info">
                        <tr>
                            <td rowspan="3" colspan="2" class="task-description">
                                <span class="item-description-title">Description</span> <br>
                                <span class="item-description-content">${task.description}</span>
                            </td>

                            <td class="task-created-by">
                                <span class="item-created-by-title">Created by</span> <br>
                                <span class="item-created-by-content">${task.createdBy}</span>
                            </td>
                        </tr>

                        <tr>
                            <td class="task-created-date">
                                <span class="item-created-date-title">Created date</span> <br>
                                <span class="item-created-date-content">${task.createdDate}</span>
                            </td>
                        </tr>

                        <tr>
                            <td class="task-sprint">
                                <span class="item-sprint-title">Loaded on</span> <br>
                                <span class="item-sprint-content">Sprint
                                    <span class="badge">
                                        <c:if test="${task.sprint == 0}">
                                            Not assigned
                                        </c:if>

                                        <c:if test="${task.sprint != 0}">
                                            ${task.sprint}
                                        </c:if>
                                    </span>
                                </span>
                            </td>
                        </tr>

                        <tr>
                            <td class="task-tags">
                                <span class="item-tags-title">Tags</span> <br>

                                <div class="item-tags-content">
                                    <c:forEach var="tag" items="${task.tags}" >
                                        <div class="tag-element">
                                            <span class="label label-warning">
                                                <span class="tag-name">${tag}</span>
                                                <span class="glyphicon glyphicon-remove delete-tag" style="display: none"></span>
                                            </span>
                                        </div>
                                    </c:forEach>

                                    <input type="text" name="addTag" id="addTag" maxlength="15" style="display: none;" />
                                    <span class="glyphicon glyphicon-plus add-tag"></span>
                                </div>
                            </td>

                            <td>
                                <span class="item-progress-title">Progress</span> <br>

                                <div class="item-progress-content progress" style="width: 300px">
                                    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"
                                         style="width: ${task.state == 'Blocked' ? 33 : task.state == 'In progress' ? 50 : task.state == 'Done' ? 100: 0}%">
                                        <span class="sr-only">40% Complete (success)</span>
                                    </div>
                                </div>
                            </td>

                            <td class="task-assigned-to">
                                <span class="item-assigned-to-tile">Assigned to</span> <br>

                                <div class="assigned-member">
                                    <select>
                                        <option value="">No one</option>
                                        <c:forEach var="member" items="${members}" >
                                            <option value="${member.email}" ${member.email eq task.assignedTo ? 'selected' : ''}>
                                                    ${member.firstName} ${member.lastName}
                                            </option>
                                        </c:forEach>
                                    </select>
                                </div>
                            </td>
                        </tr>
                    </table>

                    <div class="panel-footer">
                        <span class="task-last-update-title">Last update</span>
                        <span class="task-last-update-content">${task.updateDate}</span>
                    </div>
                </div>
            </div>
        </li>
    </c:forEach>
</ul>