<%@ 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" %>

<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-title">
                        <span class="item-title-title title">Title</span>
                        <span class="item-title-content content">${task.title}</span>
                    </li>

                    <li>
                        <span class="glyphicon glyphicon-remove remove-sprint-task" aria-hidden="true" style="display:none;"></span>
                    </li>
                </ul>
            </div>

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

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

                    <tr>
                        <td class="task-state">
                            <span class="item-state-title">State</span> <br>

                            <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' : ''}>Blocked</option>
                            </select>
                        </td>
                    </tr>

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

                    <tr>
                        <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 class="task-created-date">
                        <td>
                            <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-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 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>