{{template "base/head" .}}
{{template "base/navbar" .}}
{{template "repo/nav" .}}
{{template "repo/toolbar" .}}
<div id="body" class="container">
    <div id="issue">
        <form class="form" action="{{.RepoLink}}/issues/new" method="post" id="issue-create-form" enctype="multipart/form-data">
            {{.CsrfTokenHtml}}
            {{template "base/alert" .}}
            <div class="col-md-1">
                <img class="avatar" src="{{.SignedUser.AvatarLink}}" alt=""/>
            </div>
            <div class="col-md-8 panel panel-default">
                <div class="form-group panel-body">
                    <input class="form-control input-lg" type="text" name="title" required="required" placeholder="Title" value="{{.title}}" />
                </div>
                <div class="form-group panel-body">
                    {{if .IsRepositoryOwner}}
                    <span><strong id="assigned" data-no-assigned="No one">No one</strong> will be assigned</span>
                    <input type="hidden" name="assigneeid" value="0" id="assignee"/>&nbsp;&nbsp;
                    <div style="display: inline-block;position: relative">
                        <button type="button" class="dropdown-toggle btn btn-default btn-sm" data-toggle="dropdown">
                            <i class="fa fa-group"></i>
                            <span class="caret"></span>
                        </button>
                        <div class="dropdown-menu assignee">
                            <ul class="list-unstyled">
                                <li data-uid="0" class="clear-assignee hidden"><i class="fa fa-times-circle-o"></i> Clear assignee</li>
                                {{range .Collaborators}}
                                <li data-uid="{{.Id}}"><img src="{{.AvatarLink}}"><strong>{{.Name}}</strong> {{.FullName}}</li>
                                {{end}}
                            </ul>
                        </div>
                    </div>
                    <span><strong id="milestone" data-no-milestone="No milestone">No milestone</strong></span>
                    <input type="hidden" name="milestoneid" value="0" id="milestone-id"/>
                    <div style="display: inline-block;position: relative">
                        <button type="button" class="dropdown-toggle btn btn-default btn-sm" data-toggle="dropdown">
                            <i class="fa fa-check-square-o"></i>
                            <span class="caret"></span>
                        </button>
                        <div class="dropdown-menu milestone">
                            <ul class="list-unstyled">
                                <li data-id="0" class="clear-milestone milestone-item hidden"><i class="fa fa-times-circle-o"></i> Clear milestone </li>
                                <li class="milestone-list">
                                    <ul class="nav nav-tabs" data-init="tabs">
                                        <li class="active"><a href="#milestone-open" data-toggle="tab">Open</a></li>
                                        <li><a href="#milestone-close" data-toggle="tab">Closed</a></li>
                                    </ul>
                                    <div class="tab-content">
                                        <div class="tab-pane active" id="milestone-open">
                                            {{if not .OpenMilestones}}
                                            <p class="milestone-item">Nothing to show</p>
                                            {{else}}
                                            <ul class="list-unstyled">
                                                {{range .OpenMilestones}}
                                                <li class="milestone-item" data-id="{{.Id}}">
                                                    <p><strong>{{.Name}}</strong></p>
                                                    <!-- <p>due to 3 days later</p> -->
                                                </li>
                                                {{end}}
                                            </ul>
                                            {{end}}
                                        </div>

                                        <div class="tab-pane" id="milestone-close">
                                            {{if not .ClosedMilestones}}
                                            <p class="milestone-item">Nothing to show</p>
                                            {{else}}
                                            <ul class="list-unstyled">
                                                {{range .ClosedMilestones}}
                                                <li class="milestone-item" data-id="{{.Id}}">
                                                    <p><strong>{{.Name}}</strong></p>
                                                    <p>Closed {{TimeSince .ClosedDate $.Lang}}</p>
                                                </li>
                                                {{end}}
                                            </ul>
                                            {{end}}
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                {{end}}
                <div class="form-group panel-body">
                    <div class="md-help pull-right"><!-- todo help link -->
                        Content with <a href="https://help.github.com/articles/markdown-basics">Markdown</a>
                    </div>
                    <ul class="nav nav-tabs" data-init="tabs">
                        <li class="active issue-write"><a href="#issue-textarea" data-toggle="tab">Write</a></li>
                        <li class="issue-preview"><a href="#issue-preview" data-toggle="tab" data-ajax="/api/v1/markdown" data-ajax-name="issue-preview" data-ajax-context="{{.RepoLink}}" data-ajax-method="post" data-preview="#issue-preview">Preview</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane" id="issue-textarea">
                            <div class="form-group">
                                <div id="submit-error" class="text-danger"></div>
                                <textarea class="form-control" name="content" id="issue-content" rows="10" placeholder="Write some content" data-ajax-rel="issue-preview" data-ajax-val="val" data-ajax-field="text">{{.content}}</textarea>
                            </div>
                        </div>
                        <div class="tab-pane issue-preview-content" id="issue-preview">loading...</div>
                    </div>
                </div>
                {{if .AttachmentsEnabled}}
                <div id="attached">
                    <div id="attached-list">
                        <b>Attachments:</b>
                    </div>
                </div>
                {{end}}
                <div class="text-right panel-body">
                    <div class="form-group">
                        {{if .AttachmentsEnabled}}
                        <input type="file" accept="{{.AllowedTypes}}" style="display: none;" id="attachments-input" name="attachments" multiple />
                        <button class="btn-default btn attachment-add" id="attachments-button">Select Attachments...</button>
                        {{end}}
                        <input type="hidden" value="id" name="repo-id"/>
                        <button class="btn-success btn">Create new issue</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
{{template "base/footer" .}}