@**
* Yona, 21st Century Project Hosting SW
*
* Copyright Yona & Yobi Authors & NAVER Corp. & NAVER LABS Corp.
* https://yona.io
**@
@import play.data.Form
@import org.apache.commons.lang3.StringUtils
@(title:String, issueForm: Form[Issue], issue:Issue,  project:Project)
@import helper._
@import scala.collection.mutable.Map
@import models.enumeration.ResourceType
@import models.enumeration.Operation
@import models.enumeration._
@import utils.AccessControl._
@import utils.TemplateHelper._
@parentIssueId = @{
    if(issue.parent != null) {
        issue.parent.id
    } else {
        null
    }
}

@projectLayout(Messages(title), project, utils.MenuType.ISSUE) {
@projectMenu(project, utils.MenuType.ISSUE, "main-menu-only")
<div class="page-wrap-outer">
    <div class="project-page-wrap">
        <div class="content-wrap frm-wrap">
        @form(action = routes.IssueApp.editIssue(project.owner, project.name, issue.getNumber), 'id -> "issue-form", 'enctype -> "multipart/form-data") {
            <input type="hidden" name="authorId" value="@issue.authorId">
            <input type="hidden" id="isDraft" name="isDraft" value="false">
            <input type="hidden" id="isPublish" name="isPublish" value="false">
            <div class="row-fluid">
            <div class="span12">
                <dl>
                    <dt>
                        @if(issue.isDraft) {
                            <span class="draft">@Messages("issue.state.draft")</span>
                        } else {
                            <label for="title"><strong class="secondary-txt">#@issue.getNumber</strong></label>
                        }
                    </dt>
                    <dd>
                    	@defining(issueForm.errors().get("title")) { errors =>
                            <div class="span12">
                                <div class="span11">
                                    <input type="text" id="title" name="title" value="@issue.title" class="text title @if(errors != null) {error}" maxlength="250" tabindex="1" placeholder="@Messages("title")" autocomplete="off">
                                </div>
                                <div class="span1 subtask-message">@Messages("issue.option")</div>
                            </div>
    	                    @if(errors != null) {
    							<div class="message">
    							@for(error <- errors) {
    								<div>@Messages(error.message)</div>
    							}
    							</div>
    						}
                          @partial_select_subtask(project, parentIssueId, issue.id)
    					}
                    </dd>
                </dl>
            </div>
            <div class="row-fluid">
                <div class="span9 span-left-pane">
                    <dl>
                        <dd style="position: relative;">
                            @common.editor("body", issue.body, "tabindex=2", "content-body")
                        </dd>
                    </dl>

                    @** fileUploader **@
                    @if(!UserApp.currentUser.isAnonymous) {
                        @common.fileUploader(ResourceType.ISSUE_POST, issue.id)
                    }
                    @** end of fileUploader **@

                    <div class=" actrow right-txt">
                        @if(!issue.isDraft && issue.isAuthoredBy(UserApp.currentUser())){
                        <span class="send-notification-check">
                            <label class="checkbox inline">
                                <input type="checkbox" name="notificationMail" id="notificationMail" value="yes" checked>
                                <strong>@Messages("notification.send.mail")</strong>
                            </label>
                        </span>
                        }
                        @if(isAllowed(UserApp.currentUser(), issue.asResource(), Operation.UPDATE) && issue.isDraft) {
                            <button type="submit" id="button-draft-publish" class="ybtn ybtn-info">@Messages("button.draft.publish")</button>
                            <button type="button" id="draft-save-btn" class="ybtn ybtn-watching draft-save-btn">@Messages("button.draft.save")</button><!--
                        }
                    -->@if(isAllowed(UserApp.currentUser(), issue.asResource(), Operation.UPDATE) && !issue.isDraft) {
                            <button type="submit" id="button-save" class="ybtn ybtn-info">@Messages("button.save")</button>}<!--
                     --><a href="javascript:history.back();" class="ybtn">@Messages("button.cancel")</a>
                    </div>
                </div>

                <div class="span3 span-hard-wrap right-menu">
                    @if(isAllowed(UserApp.currentUser(), issue.stateAsResource(), Operation.UPDATE)){
                    <dl class="issue-option">
                        <dt>@Messages("issue.state")</dt>
                        <dd>
                            <div id="state" class="btn-group auto" data-name="state">
                                <button class="btn dropdown-toggle auto" data-toggle="dropdown">
                                    <span class="d-label">@Messages("issue.state")</span>
                                    <span class="d-caret"><span class="caret"></span></span>
                                </button>
                                <ul class="dropdown-menu">
                                    <li data-value="@State.OPEN.name" @if(issue.state == State.OPEN){data-selected="true" class="active"}><a>@Messages("issue.state.open")</a></li>
                                    <li data-value="@State.CLOSED.name" @if(issue.state == State.CLOSED){data-selected="true" class="active"}><a>@Messages("issue.state.closed")</a></li>
                                </ul>
                            </div>
                        </dd>
                    </dl>
                    }

                    @if(isAllowed(UserApp.currentUser(), issue.assigneeAsResource(), Operation.UPDATE)){
                    <dl class="issue-option">
                         <dt>@Messages("issue.assignee")</dt>
                         <dd>
                            @partial_assignee(project, issue)
                         </dd>
                    </dl>
                    }

                    @if(project.menuSetting.milestone && isAllowed(UserApp.currentUser(), issue.milestoneAsResource(), Operation.UPDATE)){
                    <dl id="milestoneOption" class="issue-option">
                        <dt>@Messages("milestone")</dt>
                        <dd>
                        @defining(issue.milestone != null) { hasMilestone =>
                            @if(Milestone.findByProjectId(project.id).isEmpty()) {
                                <a href="@routes.MilestoneApp.newMilestoneForm(project.owner, project.name)"
                                   class="ybtn ybtn-small ybtn-fullsize" target="_blank">
                                    @Messages("milestone.menu.new")
                                </a>
                            } else {
                                <select id="milestoneId" name="milestoneId"
                                            data-toggle="select2" data-format="milestone" data-container-css-class="fullsize">
                                        <option value="@Milestone.NULL_MILESTONE_ID" @if(!hasMilestone){ selected }>
                                            @Messages("issue.noMilestone")
                                        </option>
                                        <optgroup label="@Messages("milestone.state.open")">
                                        @for(milestone <- Milestone.findOpenMilestones(project.id)){
                                            <option value="@milestone.id" data-state="@milestone.state"
                                            @if(hasMilestone && issue.milestone.id == milestone.id){
                                                selected
                                            }>
                                                @milestone.title
                                            </option>
                                        }
                                        </optgroup>
                                        <optgroup label="@Messages("milestone.state.closed")">
                                        @for(milestone <- Milestone.findClosedMilestones(project.id)){
                                            <option value="@milestone.id" data-state="@milestone.state"
                                            @if(hasMilestone && issue.milestone.id == milestone.id){
                                                selected
                                            }>
                                                @milestone.title
                                            </option>
                                        }
                                        </optgroup>
                                </select>
                            }
                        }
                        </dd>
                    </dl>
                    }

                    <dl class="issue-option">
                        <dt>@Messages("issue.dueDate")</dt>
                        <dd>
                            <div class="search search-bar">
                                <input type="text" id="issueDueDate" data-toggle="calendar" name="dueDate" class="textbox full" value="@issue.getDueDateString">
                                <button type="button" class="search-btn btn-calendar"><i class="yobicon-calendar2"></i></button>
                            </div>
                        </dd>
                    </dl>

                    @partial_select_label(IssueLabel.findByProject(project), issue.getLabelIds, "issue-option", "data-close-on-select=false", project)
                </div>
            </div>
        </div>
        } @** end of form **@
        </div>
    </div>
</div>

@common.markdown(project)
@common.select2()
@common.calendar()

<link rel="stylesheet" type="text/css" media="screen" href="@routes.IssueLabelApp.labelStyles(project.owner, project.name)">
<link rel="stylesheet" type="text/css" media="screen" href="@routes.Assets.at("javascripts/lib/atjs/jquery.atwho.css")">
<script type="text/javascript" src="@routes.Assets.at("javascripts/lib/atjs/jquery.caret.min.js")"></script>
<script type="text/javascript" src="@routes.Assets.at("javascripts/lib/atjs/jquery.atwho.js")"></script>
<script type="text/javascript" src="@routes.Assets.at("javascripts/common/yona.Subtask.js")"></script>
<script type="text/javascript" src="@routes.Assets.at("javascripts/service/yona.issue.Assginee.js")"></script>
<script type="text/jAvascript" src="@routes.Assets.at("javascripts/common/yona.TitleHeadAutoCompletion.js")"></script>
<script type="text/javascript">
    $(function(){
        // yobi.issue.Write
        $yobi.loadModule("issue.Write", {
            "sMode"             : "edit",
            "sIssueId"          : "@issue.getNumber",
            "sIssueFormURL"     : "@routes.IssueApp.newIssueForm(project.owner, project.name)",
            "sIssueListURL"     : "@routes.IssueApp.issues(project.owner, project.name)",
            "elTextarea"        : 'textarea[data-editor-mode="content-body"]',
            "elMilestoneRefresh": $("#milestoneOption .yobicon-refresh"),
            "elDueDate"         : $("#issueDueDate")
        });

        // yobi.Mention
        yobi.Mention({
            "target": "textarea[id^=editor-]",
            "url"   : "@routes.ProjectApp.mentionList(project.owner, project.name)"
        });

        yonaAssgineeModule(
                "@api.routes.IssueApi.findAssignableUsersOfProject(project.owner, project.name)",
                "",
                "@Messages("issue.assignee")"
        );

        yonaTitleHeadModule({
            "target": 'input[id=title]',
            "url"   : "@api.routes.ProjectApi.titleHeads(project.owner, project.name)"
        });

        if (localStorage.getItem(location.pathname) != null) {
            $('.editor-clear-temporary').show();
        }

        $('.editor-clear-temporary-button').on('click', function(){
            localStorage.removeItem(location.pathname);
            window.location.reload();
        });

        tippy('#button-clear-temporary', {
            content: '@Messages("button.clear.temporary.description")',
            placement: 'top-start',
            maxWidth: 'none',
        });

        tippy('#button-draft-publish', {
            content: '@Messages("button.draft.publish.description")',
            placement: 'top-start',
            maxWidth: 'none',
        });

        tippy('#draft-save-btn', {
            content: '@Messages("button.draft.save.description")',
            placement: 'top',
            maxWidth: 'none',
        });

        $('#button-save').on('click', function(){
            var $this = $(this);
            $this.prop('disabled', true);
            setTimeout(function (){
                $this.prop('disabled', false);
            }, 3000);

            $('#issue-form').submit();
        });

        $('#button-draft-publish').on('click', function(event){
            event.preventDefault();
            if (!confirm('@Messages("button.draft.publish.description")')) return false;
            
            var $this = $(this);
            $this.prop('disabled', true);
            setTimeout(function (){
                $this.prop('disabled', false);
            }, 3000);

            $('#isPublish').val('true');
            $('#issue-form').submit();
        });

        $('#draft-save-btn').on('click', function(){
            var $this = $(this);
            $this.prop('disabled', true);
            setTimeout(function (){
                $this.prop('disabled', false);
            }, 3000);

            $('#isDraft').val('true');
            $('#issue-form').submit();
        });
    });
</script>

}