@**
* Yona, 21st Century Project Hosting SW
*
* Copyright Yona & Yobi Authors & NAVER Corp. & NAVER LABS Corp.
* https://yona.io
**@
@(title: String, milestones: List[models.Milestone], project: Project, param: MilestoneApp.MilestoneCondition)
@import scala.collection.immutable._
@import utils.TemplateHelper._
@import models.enumeration.ResourceType
@import models.enumeration.Operation
@import utils.AccessControl._

<link rel="stylesheet" href="@routes.IssueLabelApp.labelStyles(project.owner, project.name)" type="text/css" />

@urlToList = {@routes.MilestoneApp.milestones(project.owner, project.name)}

@makeFilterLink(fieldName:String, orderBy:String, orderDir:String, fieldText:String) = {
	@if(orderBy.equals(fieldName)) {
		<a href="@urlToList?orderBy=@fieldName&orderDir=@if(orderDir.equals("desc")){asc}else{desc}&state=@param.state" class="filter active"><i class="ico btn-gray-arrow @if(orderDir.equals("desc")){ down }"></i>@fieldText</a>
	} else {
	    <a href="@urlToList?orderBy=@fieldName&orderDir=asc&state=@param.state" class="filter"><i class="ico btn-gray-arrow"></i>@fieldText</a>
	}
}

@makeMilestoneListLink(_state: String) = @{
	buildQueryString(routes.MilestoneApp.milestones(project.owner, project.name),
		Map("state"->_state)
	)
}

@projectLayout(project.name + " - " + title, project, utils.MenuType.MILESTONE) {
@projectMenu(project, utils.MenuType.MILESTONE, "")
<div class="page-wrap-outer">
    <div class="project-page-wrap">
        <div class="tab-wrap">
            @if(isProjectResourceCreatable(UserApp.currentUser(), project, ResourceType.MILESTONE)) {
            <div class="pull-right btns">
                <a href="@routes.MilestoneApp.newMilestoneForm(project.owner, project.name)" class="ybtn ybtn-success">@Messages("milestone.menu.new")</a>
            </div>
            }

            <ul class="nav nav-tabs">
                <li class="@if(param.state.equals("open")){active}">
                    <a href="@makeMilestoneListLink("open")">@Messages("milestone.state.open")</a>
                </li>
                <li class="@if(param.state.equals("closed")){active}">
                    <a href="@makeMilestoneListLink("closed")">@Messages("milestone.state.closed")</a>
                </li>
                <li class="@if(param.state.equals("all")){active}">
                    <a href="@makeMilestoneListLink("all")">@Messages("milestone.state.all")</a>
                </li>
            </ul>
        </div>

	@if(milestones == null || milestones.isEmpty){

    	<div class="error-wrap">
    		<i class="ico ico-err1"></i>
    		<p>@Messages("milestone.is.empty")</p>
    	</div>

    	} else {

        <div class="filter-wrap milestone">
            @if(milestones.length > 1){
    		<div class="filters">
    			@makeFilterLink("dueDate", param.orderBy, param.orderDir, Messages("common.order.dueDate"))
    			@makeFilterLink("completionRate", param.orderBy, param.orderDir, Messages("common.order.completionRate"))
    		</div>
            <div class="pull-left search search-bar">
                <input name="filter" class="textbox" type="text" placeholder="@Messages("search.title")" value="">
                <button type="submit" class="search-btn"><i class="yobicon-search"></i></button>
            </div>
    		}
        </div>

        <div class="row-fluid">
            <div>
                <ul class="milestones">
                @for(milestone <- milestones){
                    <li class="milestone">
                        <div class="infos">
                            <div class="meta-info">
                                <strong class="version"></strong>
                                <a href="@routes.MilestoneApp.milestone(project.owner, project.name, milestone.id)" class="milestone-name">@milestone.title</a>
                                <span class="sp">|</span>
                                <span class="issue-item">@milestone.getNumClosedIssues / @(milestone.getNumOpenIssues + milestone.getNumClosedIssues)</span>
                                @if(milestone.state != State.CLOSED) {
                                    @if(param.state.equals("all")) {
                                        <span class="sp">|</span>
                                        <span class="state nm open">@Messages("milestone.state." + milestone.state.state)</span>
                                    }
                                    @if(milestone.dueDate != null) {
                                        <span class="sp">|</span>
                                        <span class="due-date @if(milestone.isOverDueDate){over}">
                                            @Messages("label.dueDate")
                                            <strong>@milestone.getDueDateString</strong>
                                            <span class="date">
                                                (@milestone.until)
                                            </span>
                                        </span>
                                    }
                                } else {
                                    @if(param.state.equals("all")) {
                                        <span class="sp">|</span>
                                        <span class="state nm closed">@Messages("milestone.state." + milestone.state.state)</span>
                                    }
                                    @if(milestone.dueDate != null) {
                                        <span class="sp">|</span>
                                        <span class="due-date ml5">
                                            @Messages("label.dueDate")
                                            <strong>@milestone.getDueDateString</strong>
                                        </span>
                                    }
                                }
                                <div class="pull-right">
                                    <span class="number completion-rate">@if(milestone.getNumOpenIssues + milestone.getNumClosedIssues > 0) { @milestone.getCompletionRate % }</span>
                                </div>
                            </div>

                            <div class="progress-wrap">
                                <div class="progress progress-success">
                                    <div class="bar" style="width: @milestone.getCompletionRate%;"></div>
                                </div>
                            </div>
                        </div>
                        <div>
                            <div></div>
                            <div>
                            @for(issue <- Issue.findOpenIssuesByMilestone(milestone)){
                                <a class="issue-link" href="@routes.IssueApp.issue(project.owner, project.name, issue.getNumber)" target="_blank">
                                    <div class="issue-item">
                                        <span class="state-label open">
                                        </span>
                                        <span class="item-name">
                                            <span class="number">#@issue.getNumber</span>
                                            @issue.title
                                            @if(issue.assignee != null){
                                                - @issue.assignee.user.name
                                            }
                                            @for(label <- issue.labels.toList.sortBy(r => (r.category.name, r.name))) {
                                                <a href="#" class="label issue-label list-label active" data-category-id="@label.category.id" data-label-id="@label.id">@label.name</a>
                                            }
                                        </span>
                                    </div>
                                </a>
                            }
                            </div>
                            <div></div>
                            <div>
                            @for(issue <- Issue.findClosedIssuesByMilestone(milestone)){
                                <a class="issue-link" href="@routes.IssueApp.issue(project.owner, project.name, issue.getNumber)" target="_blank">
                                    <div class="issue-item">
                                        <span class="state-label closed">
                                            <i class=" yobicon-checkmark"></i>
                                        </span>
                                        <span class="item-name">
                                            <span class="number">#@issue.getNumber</span>
                                            @issue.title
                                            @if(issue.assignee != null){
                                                - @issue.assignee.user.name
                                            }
                                            @for(label <- issue.labels.toList.sortBy(r => (r.category.name, r.name))) {
                                                <a href="#" class="label issue-label list-label active" data-category-id="@label.category.id" data-label-id="@label.id">@label.name</a>
                                            }
                                        </span>
                                    </div>
                                </a>
                            }
                            </div>
                        </div>
                    </li>
                }
                </ul>
            </div>
        </div>

        }
    </div>
</div>
@if(project.menuSetting.milestone) {
<script type="text/javascript">
    $(document).ready(function () {
        // search by keyword
        $(".textbox").on("keyup", function() {
            var value = $(this).val().toLowerCase().trim();
            $(".issue-link").each(function() {
                $(this).toggle($(this).text().toLowerCase().indexOf(value) !== -1);
            });
        });
        yobi.ShortcutKey.setKeymapLink({
            "N": "@routes.MilestoneApp.newMilestoneForm(project.owner, project.name)"
        });
    });
</script>
}
}