#{param name=taskModel/}
#{param name=userTimezone/}
#{param name=bundle/}

<%
import java.text.SimpleDateFormat;
import java.util.Date;
import org.exoplatform.task.util.TaskUtil;
import org.apache.commons.lang.StringUtils;
import org.apache.commons.lang.ArrayUtils;
import org.exoplatform.task.util.ResourceUtil;
import org.exoplatform.task.domain.Priority;
import org.exoplatform.task.util.DateUtil;
import org.exoplatform.commons.utils.HTMLEntityEncoder;

def encoder = HTMLEntityEncoder.getInstance();

def task = taskModel.getTask();
def breadcumbs = taskModel.getBreadcumbs();
def assignee = taskModel.getAssignee();
def hasAssignee = (assignee != null && assignee.getUsername() != "guest" && assignee.getUsername() != null);
def countCoWorker = taskModel.getNumberCoworkers();
def commentCount = taskModel.getCommentCount();
def comments = taskModel.getComments();
def currentUser = taskModel.getCurrentUser();
def labels = taskModel.getLabels();
def editableClasses = "hoverStatus editableField editable";
def locale = bundle != null ? bundle.getLocale() : Locale.getDefault(Locale.Category.FORMAT);

%>
<div class="addTask uiBox ${task.completed ? "task-completed" : ""}" data-taskid="${task.id}">
<div class="uiContentBox">
<div class="clearfix">
<div class="pull-right action-buttons dropdown">
<span class="taskPermalinkContainer" title="&{label.permalink}" data-toggle="tooltip" data-placement="bottom">
<a href="${TaskUtil.buildTaskURL(task)}" data-toggle="popover" data-placement="left"
class="permalink actionIcon taskPermalink" style="position: relative;">
<i class="uiIconPermalink"></i>
            </a>
</span>
        <div class="taskPermalinkPopoverContent" style="display:none">
            <div>
                <i class="uiIconPermalink"></i>
        &{popover.title.linkToShare}
</div>
            <div class="input-field input-xlarge">
                <form method="GET" action="#">
                    <input readonly type="text" name="" value="">
                </form>
</div>
        </div>
<a data-toggle="dropdown" class="dropdown-toggle actionIcon"><i class="uiIconArrowDown"></i></a>
<ul class="dropdown-menu">
<li><a class="action-clone-task" href="#"><i class="uiIconCloneNode"></i> &{label.clone}</a></li>
            <li><a class="action-delete-task" href="#"><i class="uiIconDelete"></i> &{label.delete}</a></li>
</ul>
        <a class="actionIcon close-right-panel" href="#"><i class="uiIconClose"></i></a>
    </div>

<div class="uiEditableInline clearfix ">
<span class="iconTaskName pull-left"><i title="&{tooltip.clickToEdit}" data-toggle="tooltip" data-placement="bottom" class="uiIconFolder"></i></span>
<div class="breadcrumbCont uiEditableInline" data-original-title="&{tooltip.clickToEdit}" data-toggle="tooltip" data-placement="bottom">
<ul class=" ${editableClasses} small"
data-name="project" data-type="ParentProject" data-breadcrumb="false" data-value="${task.status == null ? 0 : task.status.project.id}">
        ${breadcumbs}
</ul>
        </div>
</div>
</div>
<div class="tags uiEditableInline clearfix">
<%
def labelHtml = bundle.getString("label.labels");
def labelIds = '';
def labelOptions = '';
if (labels != null && !labels.isEmpty()) {
    labelHtml = "";
    for (def label in labels) {
        def labelName = encoder.encode(label.name);
        labelHtml += '<span class="'+ label.color+' label">' + labelName +'</span>';
        if (labelIds.length() > 0) {
            labelIds += ',';
        }
        labelIds += label.id;
        if (labelOptions.length() > 0) {
            labelOptions += ',';
        }
        labelOptions += '{"id": "'+label.id+'", "text":"' + labelName + '","color":"' + label.color + '"}';
    };
}

%>
<span class="pull-left icon-hash ${labelIds == "" ? "" : "hide"}"><i class="uiIconTag"></i></span>
<div class="${editableClasses} small pull-left" data-original-title="&{tooltip.clickToEdit}" rel="tooltip" data-name="labels" data-type="selectize" data-inputclass="input-large" data-selectizie-opts='[${labelOptions}]' data-value="${labelIds}">
        ${labelHtml}
</div>
</div>
<div class="taskName uiEditableInline clearfix taskPermalinkContainer">
<div class="title-container clearfix">
<a href="javascript:void(0);" data-taskcompleted="${task.completed}" class="pull-left validate-action"
rel="tooltip" data-placement="top" data-original-title="<% if (task.completed) {%> &{message.markAsUnCompleted} <%} else {%> &{message.markAsCompleted} <%}%>">
<%
def uiIconClass = task.completed ? 'uiIconBlue' : 'uiIconLightGray';
%>
<i class="uiIconValidate ${uiIconClass}"></i>
      </a>
<span class="projectName ${editableClasses} small "
data-original-title="&{tooltip.clickToEdit}" rel="tooltip" data-placement="bottom"
data-name="title" data-type="text" data-emptytext="&{label.untitledTask}">
        ${encoder.encode(task.title)}
</span>
    </div>
</div>

<%
 SimpleDateFormat dueDateFormat = new SimpleDateFormat('dd MMM yyyy',locale);
 dueDateFormat.setTimeZone(userTimezone);
%>
<div class="inforBar1 clearfix">
    <div class="pull-left">
        <div class="uiEditableInline">
            <i class="uiIconClock"></i>
<span class="${editableClasses} small dueDateField"
data-original-title="&{tooltip.clickToEdit}" rel="tooltip" data-placement="top"
data-type="calendar" data-name="duedate"
data-value="${task.dueDate != null ? task.dueDate.format('yyyy-MM-dd', userTimezone) : ''}"
data-format="yyyy-MM-dd" data-viewformat="dd M yyyy">
        ${task.dueDate != null ? dueDateFormat.format(task.dueDate) : ''}
</span>
        </div>
</div>
    <div class="pull-left">
        <div class="uiEditableInline inactive">
            <span>
                <span class="unassigned ${!hasAssignee ? "" : "hide"}"><i class="uiIconUser"></i></span>
                <a class="avatarMini pull-left assigned ${!hasAssignee ? "hide" : ""}" href="#">
                    <img alt="avatar" src="${hasAssignee ? assignee.avatar : ""}">
                </a>
<a title="&{tooltip.clickToEdit}" data-toggle="tooltip" data-placement="bottom" class="hoverStatus small editableField editAssignee ${hasAssignee && countCoWorker == 0 && assignee.deleted ? "muted" : ""}">
<% if (countCoWorker > 0) {%>
    +${countCoWorker} ${bundle.getString(countCoWorker > 1 ? "label.coworkers" : "label.coworker").toLowerCase()}
    <%} else if (hasAssignee) {%>
    ${encoder.encode(assignee.displayName)} <% if (!assignee.enable) {%> <span class = "muted"><i>(&{label.inactive})</i></span> <%}%>
    <%} else {%>
    &{label.unassigned}
    <%}%>
</a>
            </span>
<div class="uiBox assignmentPopup" style="display: none; position: absolute; left: auto; right: 0; top: 30px; width: 300px; z-index: 9">
<div class="uiContentBox">
<div class="contBlock">
<div class="mgB10 mgT5">&{label.assignTo}:</div>
                        <div class="inputUser">
                            <input type = "text" name="assignee" value="${hasAssignee ? encoder.encode(task.assignee) : ""}"/>
<a href="javascript:void(0);" data-action="assign" data-value="${currentUser.username}">&{label.assignToMe}</a>
                        </div>
</div>
                    <div class="contBlock tags">
                        <%
                            def coWorkers = "";
                            if(task.coworker != null && task.coworker.size() > 0) {
                                coWorkers = task.coworker.join(',');
                            }
                        %>
                        <div class="mgB10 mgT5">&{label.coworkers}:</div>
<input type="text" name="coworker" value="${encoder.encode(coWorkers)}"/>
<a href="javascript:void(0);" data-action="add-coworker" data-value="${currentUser.username}">&{label.addMeAsCoworker}</a>
                    </div>
</div>
            </div>
</div>

    </div>
<div class="pull-left">
<div class="toDo">
<div class="uiEditableInline">
<% if (task.status != null) { %>
    <i class="uiIconTime"></i>
                    <span  class="${editableClasses} small" href="javascript:void(0)"
                       data-original-title="&{tooltip.clickToEdit}" rel="tooltip"
                       data-source="@{StatusController.getAllStatus(projectId=task.status.project.id)}"
                       data-inputclass="selectboxMini" data-name="status" data-type="select"
                       data-title="Select status" data-val="${task.status != null ?  task.status.id: '0'}"></span>
    <%}  %>
</div>
        </div>
</div>
</div>
<div class="taskDescription">
<div data-type="ckeditor" data-name="description" class="${editableClasses}"
data-original-title="&{tooltip.clickToEdit}" rel="tooltip">
        ${task.description == null ? "" : task.description}
</div>
</div>
<div class="inforBar2 clearfix">
<div class="pull-left">
<%
def startDate = task.getStartDate();
def endDate = task.getEndDate();

def workplan = bundle.getString("label.noWorkPlan");
def duration = 0;
if (startDate != null) {
    def start = DateUtil.newCalendarInstance(userTimezone);
    start.setTime(task.getStartDate());
    def end = DateUtil.newCalendarInstance(userTimezone);
    end.setTime(task.getEndDate());
    workplan = TaskUtil.getWorkPlan(start, end, bundle);
    duration = endDate.getTime() - startDate.getTime();
}

def hasPlan = true;
if(startDate == null) {
    hasPlan = false;
    def startTmp = DateUtil.newCalendarInstance(userTimezone);
    startTmp.set(Calendar.MINUTE, 0);
    startDate = startTmp.getTime();
    duration = 30 * 60 * 1000;
}
def endTmp = DateUtil.newCalendarInstance(userTimezone);
endTmp.setTimeInMillis(startDate.getTime() + duration);
endDate = endTmp.getTime();

def df = new SimpleDateFormat("YYYY-MM-dd-HH-mm");
df.setTimeZone(userTimezone);

def dateFormat = new SimpleDateFormat("yyyy-MM-dd");
dateFormat.setTimeZone(userTimezone);

def timeFormat = new SimpleDateFormat("HH:mm");
timeFormat.setTimeZone(userTimezone);

int halfHour = 30 * 60 * 1000;
def isAllday = false;
if (duration > halfHour * 47 && duration <= halfHour * 48) {
    isAllday = true;
}
%>
<div class="uiEditableInline clearfix fieldWorkPlan inactive"
data-startdate="<%=df.format(startDate)%>" data-duration="${duration}">
<div class="pull-right"><span title="&{label.remove}" data-placement="bottom" data-toggle="tooltip"  class="actionIcon inline-hide removeWorkPlan ${hasPlan ? "" : "hide"}"><i class="uiIcon uiIconTrashMini"></i></span></div>
            <div class="date-work-plan">
            <%
            	def inCal = task.isCalendarIntegrated();
            	def iconIntegCal = inCal ? "uiIconPLFBlue" : "";
            	def title = inCal ? bundle.getString("tooltip.removeFromCalendar") : bundle.getString("tooltip.addToCalendar");
            %>
            <i class="uiIconPLFCalendar pull-left ${iconIntegCal}" rel="tooltip" title="${title}" data-integrated="${inCal}" data-title-add="&{tooltip.addToCalendar}" data-title-remove="&{tooltip.removeFromCalendar}"></i>
<span data-original-title="&{tooltip.clickToEdit}" rel="tooltip" data-placement="bottom" class="hoverStatus hoverStatusBlock small editableField">${workplan}</span></div>
<div class = "rangeCalendar" style = "display: none">
<div class="rangeCalendar-container">
<div class="row-fluid">
<div class="span6"><strong style="text-transform: capitalize;">&{label.from}</strong></div>
<div class="span6"><strong style="text-transform: capitalize;">&{label.to}</strong></div>
</div>
                    <div class="clearfix">
                        <div class="uiCalendarComponent pull-left" id="BlockCalendar1">
                            <input name="fromDate" type="hidden" value="${hasPlan ? dateFormat.format(startDate) : ""}" />
</div>
                        <div class="uiCalendarComponent pull-left" id="BlockCalendar2">
                            <input name="toDate" type="hidden" value="${hasPlan ? dateFormat.format(endDate) : ""}" />
</div>
                    </div>
<!-- /.clearfix -->
                    <div class="row-fluid choose-time ${isAllday} ${isAllday || !hasPlan ? "all-day" : ""}">
                        <div class="span5 center timeSelector">
                            <div class="form-dropdown">
                                <input data-toggle="dropdown" class="input-size-mini" type="text" name="fromTime" maxlength="5" value="${isAllday ? "00:00" : timeFormat.format(startDate)}">
                                <ul class="dropdown-menu">
                                    <%for(int i = 0; i <= 23; i++) {
                                        def hour = i < 10 ? "0" + i : i;
                                    %>
                                        <li><a href="javascript:void(0)" data-time="${hour}:00">${hour}:00</a></li>
                                        <li><a href="javascript:void(0)" data-time="${hour}:30">${hour}:30</a></li>
                                    <%}%>
                                </ul>
</div>
                        </div>
<div class="span2 center">
<label class="uiCheckbox">
<input type="checkbox" name="allday" class="checkbox" ${isAllday || !hasPlan ? 'checked="true"' : ''}>
<span>&{label.allday}</span>
                            </label>
</div>
                        <div class="span5 center timeSelector">
                            <div class="form-dropdown">
                                <input data-toggle="dropdown" class="input-size-mini" type="text" name="toTime" maxlength="5" value="${isAllday ? '23:59' : timeFormat.format(endDate)}">
                                <ul class="dropdown-menu">
                                    <%for(int i = 0; i <= 23; i++) {
                                        def hour = i < 10 ? "0" + i : i;
                                    %>
                                        <li><a href="javascript:void(0)" data-time="${hour}:00">${hour}:00</a></li>
                                        <li><a href="javascript:void(0)" data-time="${hour}:30">${hour}:30</a></li>
                                    <%}%>
                                </ul>
</div>
                        </div>
</div>
                    <div class="row-fluid center error errorMessage"></div>
</div>
            </div>
</div>
    </div>
<div id="due-warning" style="display: none;" class="alert alert-warning dueAlertWarning"><i class="uiIconWarning"></i>&{message.dueDateBeforeEndDate}</div>
<div class="priority pull-left">
<div class="uiEditableInline">
<i  class="uiIconColorPriority${task.priority != null ?  task.priority : Priority.NONE}"></i>
            <%
                Priority[] ps = Priority.values();
                String[] arrays = new String[ps.length];
                for (int i = ps.length - 1; i >= 0; i--) {
                    String name = ps[i].name();
                    arrays[ps.length - 1 - i] = '{"value": "'+name+'", "text": "'+bundle.getString('label.priority.' + name.toLowerCase())+'"}';
                }

                def priorities = "[" + StringUtils.join(arrays, ",") + "]";
            %>
            <span class="task-priority ${editableClasses} small"
                  data-original-title="&{tooltip.clickToEdit}" rel="tooltip"
                  data-inputclass="selectboxMini"
               data-name="priority" data-source='${priorities}' data-type="select" data-emptytext="&{label.noPriority}"
               data-value="${task.priority != null ?  task.priority : Priority.NONE}"></span>
</div>
    </div>

</div>
<div id="tab-action" class="uiTabPane uiTabNormal">
    <ul id="myTab" class="nav nav-tabs">
        <li class="active">
            <a href="#tab-comments" data-toggle="tab">&{label.comments}</a>
</li>
        <li class="taskTabs">
            <a href="#tab-changes" data-toggle="tab">&{label.changes}</a>
</li>
    </ul>
<div id="myTabContent" class="tab-content">
<div id="tab-comments" class="tab-pane fade in active ">
#{include path=taskComments.gtmpl /}
</div>
        <div id="tab-changes" class="tab-pane fade taskLogs">

        </div>
</div>
</div>
</div>
</div>

<!-- TODO: remove this block, it's old template for task detail? -->
<div id="taskDetailContainer" class="task-detail" task-id="${task.id}" style="display:none">
<div class="row-fluid task-info-row">
<a href="#" class="icon task-completed-field status-icon ${task.completed ? "icon-completed" : ""}">&nbsp;</a>
        <a class="editable" href="#" data-name="title" data-type="text">${encoder.encode(task.title)}</a>

<div class="btn-group task-action-buttons">
<button class="btn dropdown-toggle" data-toggle="dropdown"><i class="uiIconMiniArrowDown uiIconLightGray"></i></button>
<ul class="dropdown-menu">
<li><a href="#" class="action-clone-task">Clone</a></li>
<li><a href="#">Watch</a></li>
<li><a href="#" class="action-delete-task">Delete</a></li>
</ul>
        </div><!-- /btn-group -->
    </div>
<div class="row-fluid task-info-row">
<div class="span6">
<a href="javascript:void(0)"><i class="uiIconClock"></i></a>
<a class="editable" href="#" data-name="dueDate" data-type="date" data-format="yyyy-mm-dd" data-viewformat="M dd, yyyy">${task.dueDate != null ? dateFormat.format(task.dueDate) : ''}</a>
            <div class="dueDateControl" style="display: none">
            	<a href="#" class="none calControl">None</a>
<a href="#" class="today calControl">Today</a>
            	<a href="#" class="tomorrow calControl">Tomorrow</a>
<a href="#" class="nextWeek calControl">Next Week</a>
            </div>
</div>
        <div class="span6">
            <% if (task.status != null) { %>
                <a class="editable task-status" href="#" data-source="@{StatusController.getAllStatus(projectId=task.status.project.id)}" data-inputclass="input-small" data-name="status" data-type="select" data-title="Select status" data-val="${task.status != null ?  task.status.id: '1'}"></a>
<%} else { %>
    <a href="#" title="You need add task to one project before can change status">No Status</a>
            <% }%>
        </div>
    </div>
    <div class="row-fluid task-assign">
        <div class="span6">
        </div>
    <div class="span6">
    </div>
    </div>
    <div class="row-fluid task-info-row task-description">
    <a class="editable" href="#" data-name="description" data-type="textarea">
            ${task.description != null ? task.description : ''}
    </a>
    </div>
    <ul class="nav nav-tabs taskTabs" role="tablist">
    <li role="presentation" class="active">
    <a href="#task-comment" aria-controls="comment" role="tab" data-toggle="tab">Comment</a>
    	</li>
    <li role="presentation">
    <a href=".taskLogs" aria-controls="changes" role="tab" data-toggle="tab">Changes</a>
    	</li>
    </ul>
    <%
    	def commentDF = new SimpleDateFormat("MMM dd, yyyy HH:mm");
    	commentDF.setTimeZone(userTimezone);
    %>
    <div class="tab-content">
	    <div class="row-fluid task-comment-row tab-pane active" id="task-comment">
	        <div class="comment-area">
	            <% if(commentCount > 2) {%>
	            <div class="text-right">
	                <a href="#" class="load-all-comments"><%=ResourceUtil.resolveMessage(bundle, "comment.message.showAll", commentCount);%></a>
    </div>
	            <%}%>
	            <ul class="list-comments media-list">
	                <%if(commentCount == 0) {%>
	                    <li class="no-comment">&{comment.message.noComment}</li>
    <%} else { for (def comment in comments) { %>
    <li class="comment media">
    <a class="pull-left avatarXSmall" href="#">
    <img class="media-object" src="${comment.author.avatar}" alt="${encoder.encode(comment.author.displayName)}">
    </a>
	                        <div class="media-body">
	                            <div class="pull-right">
	                                <span class="muted">${commentDF.format(comment.createdTime)}</span>
    <span class="comment-action">
    <%if(comment.author.username == currentUser.username && currentUser.username != "guest") {%>
        <a href="#" class="action-link delete-comment" commen-id="${comment.id}"><i class="uiIconLightGray uiIconTrashMini"></i></a>
        <%}%>
    </span>
	                            </div>
    <h6 class="media-heading"><a href="#">${encoder.encode(comment.author.displayName)}</a></h6>
    <div>
            ${comment.formattedComment}
    </div>
	                        </div>
    </li>
	                <%}
	                }%>
	            </ul>
    <div class="comment-form">
    <form action="#" method="POST">
    <div class="media" style="overflow: visible">
    <a class="pull-left avatarXSmall" href="#">
    <img class="media-object" src="${currentUser.avatar}" alt="${encoder.encode(currentUser.displayName)}">
    </a>
	                        <div class="media-body" style="overflow: visible; margin-left: 48px;">
	                            <textarea name="comment"></textarea>
    </div>
	                    </div>
    <div  class="text-right">
    <input id="taskCommentButton" type="submit" value="Comment"  class="btn btn-default"/>
    </div>
	                </form>
    </div>
	        </div>
    </div>

	    <div class="taskLogs tab-pane">
	    </div>
    </div>
    <div class="row-fluid task-workplan-row">
      <div class="span6">
	      <a href="javascript:void(0)"><i class="uiIconClock"></i></a>
	      <div class="workPlan" data-startdate="<%=df.format(startDate)%>" data-duration="${duration}">
	      	<a class="duration" href="#">${workplan}</a>
    <%if (hasPlan) {%>
        <a href="#"><i class="uiIconTrash removeWorkPlan"></i></a>
        <%} %>
    <div class="rangeCalendar" style="display:none">
            From:
    <div class="fromCalendar calendar"></div>
					To:
					<div class="toCalendar calendar"></div>
    <input type="checkbox" name="allDay"/>All day<br/>
    <a class="timeSelector" data-name="timeFrom" href="#" data-type="select"></a>
					<a class="timeSelector" data-name="timeTo" href="#" data-type="select"></a>
    </div>
			</div>
    </div>
      <div class="span6">
     	<%
     		//def priorities = StringUtils.join(Priority.values(), ",");
    %>
    <a class="editable task-priority" href="#" data-priority="${priorities}" data-inputclass="input-small"
    data-name="priority" data-type="select" data-emptytext="&{label.noPriority}"
    data-value="${task.priority != null ?  task.priority : Priority.UNDEFINED}"></a>
      </div>
    </div>
</div>
    <script type="text/javascript">
            require(['taskDetailView'], function(detail) {
                detail.init();
            })
    </script>
