@**
* Yona, 21st Century Project Hosting SW
*
* Copyright Yona & Yobi Authors & NAVER Corp. & NAVER LABS Corp.
* https://yona.io
**@
@(title: String, milestone: Milestone, project: Project, issueState:State)
@import scala.collection.immutable._
@import org.apache.commons.lang.StringUtils
@import utils.TemplateHelper._
@import utils.AccessControl._
@import models.support.SearchCondition
@import play.libs.Json.toJson
@import utils.Markdown

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

@makeIssuesLink(mId: Long, _state: String) = @{
    buildQueryString(routes.IssueApp.issues(project.owner, project.name, _state),
        Map("milestoneId"->mId.toString)
    )
}

@getTabLinkByState(state:State) = {
	@routes.MilestoneApp.milestone(project.owner, project.name, milestone.id)?state=@state.state
}

@projectLayout(title, project, utils.MenuType.MILESTONE) {
@projectMenu(project, utils.MenuType.MILESTONE, "")
<div class="page-wrap-outer">
    <div class="project-page-wrap">
        <div class="milesion-wrap">
            <h4>
                <a href="@routes.MilestoneApp.milestone(project.owner, project.name, milestone.id)" class="title">@milestone.title</a>
                <small class="ml10">
                    @if(milestone.dueDate != null) {
                    <span class="due-date">@Messages("label.dueDate") <strong>@milestone.getDueDateString</strong></span>
                    @if(milestone.state != State.CLOSED) {
                    <span class="date">(@milestone.until)</span>
                    }
                    }
                    <span class="badge badge-issue-@milestone.state.state.toLowerCase margin-left-5">@Messages("milestone.state." + milestone.state.state)</span>
                </small>
            </h4>

            <div class="progress progress-success">
                <div class="bar" style="width: @milestone.getCompletionRate%;"></div>
            </div>
                @if(StringUtils.isEmpty(milestone.contents)){
                    <div class="content empty-content"></div>
                } else {
                    <div class="milestone-desc">
                        <div class="markdown-wrap">@Html(Markdown.render(milestone.contents, milestone.project))</div>
                        <div class="attachments" data-attachments="@toJson(AttachmentApp.getFileList(ResourceType.MILESTONE.toString(), milestone.id.toString()))"></div>
                    </div>
                }


            <div class="actrow right-txt row-fluid" style="padding: 15px 0; clear:both;">
                <a href="@routes.MilestoneApp.milestones(project.owner, project.name)" class="ybtn pull-left">@Messages("button.list")</a>

                @if(isAllowed(UserApp.currentUser(), milestone.asResource(), Operation.DELETE)){
                <a href="#deleteConfirm" data-toggle="modal" class="ybtn ybtn-danger">@Messages("button.delete")</a>
                }

                @if(isAllowed(UserApp.currentUser(), milestone.asResource(), Operation.UPDATE)){
                    <a href="@routes.MilestoneApp.editMilestoneForm(project.owner, project.name, milestone.id)" class="ybtn">@Messages("button.edit")</a>

                    @if(milestone.state == State.OPEN) {
                    <button type="button" data-request-method="post" data-request-uri="@routes.MilestoneApp.close(project.owner, project.name, milestone.id)" class="ybtn">@Messages("milestone.close")</button>
                    }
                    @if(milestone.state == State.CLOSED) {
                    <button type="button" data-request-method="post" data-request-uri="@routes.MilestoneApp.open(project.owner, project.name, milestone.id)" class="ybtn">@Messages("milestone.open")</button>
                    }
                }
            </div>

            <div id="issues">
                <ul class="nav nav-tabs">
                @for(state <- Array(State.OPEN, State.CLOSED, State.ALL)) {
                    <li @if(issueState == state) { class="active" }>
                        <a href="@getTabLinkByState(state)#issues">
                            @Messages("issue.state." + state.name.toLowerCase())
                            <span class="num-badge">@Issue.countIssuesBy(project.id, new SearchCondition().setState(state).setMilestoneId(milestone.id))</span>
                        </a>
                    </li>
                }
                </ul>

                <div class="issues">
                    <div class="filter-wrap">
                    @issue.partial_massupdate(project, new SearchCondition())
                    <div class="pull-right search search-bar">
                        <input name="filter" class="textbox" type="text" placeholder="@Messages("milestone.searchPlaceholder")" value="" data-toggle="item-search" data-items="issue-item">
                        <button type="submit" class="search-btn"><i class="yobicon-search"></i></button>
                    </div>
                    </div>
                    @{
                        issueState match {
                            case State.OPEN =>
                                issue.partial_list(project, milestone.sortedByNumberOfOpenIssue(), new SearchCondition(),0,0)
                            case State.CLOSED =>
                                issue.partial_list(project, milestone.sortedByNumberOfClosedIssue(), new SearchCondition(),0,0)
                            case _ =>
                                issue.partial_list(project, milestone.sortedByNumberOfIssue(), new SearchCondition(),0,0)
                        }
                    }
                </div>
            </div>

        </div>
    </div>
</div>
@** Confirm to delete post **@
<div id="deleteConfirm" class="modal hide fade">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
        <h3>@Messages("milestone.delete")</h3>
    </div>
    <div class="modal-body">
        <p>@Messages("post.delete.confirm")</p>
    </div>
    <div class="modal-footer">
        <button type="button" class="ybtn ybtn-danger" data-request-method="delete" data-request-uri="@routes.MilestoneApp.deleteMilestone(project.owner, project.name, milestone.id)">@Messages("button.yes")</button>
        <button type="button" class="ybtn" data-dismiss="modal">@Messages("button.no")</button>
    </div>
</div>

@common.markdown(project)
<link rel="stylesheet" href="@routes.IssueLabelApp.labelStyles(project.owner, project.name)" type="text/css" />
<script type="text/javascript">
    $(document).ready(function(){
        // when a user click head of title, it works like issue filter
        $(".title-prefix").on('click', function () {
            $(".textbox").val($(this).text());
            $(".post-item").hide();
            $("li[data-value*='"+$(".textbox").val() + "']").show();
            $(".textbox").focus();
        });
        $yobi.loadModule("milestone.View", {
            "sMilestoneId" : "@milestone.id",
            "sURLLabels"   : "@routes.IssueApp.issues(project.owner, project.name)"
        });

        // detect links contains mention at me
        $(".user-link:contains('@UserApp.currentUser().getPureNameOnly')").addClass("me");
    });
</script>
}