{{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/milestones/new" method="post" id="issue-create-form">
            {{.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">
                    <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">
                                <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>
                <div class="text-right panel-body">
                    <div class="form-group">
                        <input type="hidden" value="id" name="repo-id"/>
                        <button class="btn-success btn">Create new milestone</button>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <h4>Milestone Due Date</h4>

                <div class="form-group">
                    <input name="due_date" type="text" class="form-control" id="milestone-due-date">
                </div>
            </div>
        </form>
    </div>
</div>
<script src="/js/bootstrap-datepicker.js"></script>
<script>
    $(function(){
        $('#milestone-due-date').datepicker({
            weekStart: 1,
            todayBtn: "linked",
            calendarWeeks: true,
            todayHighlight: true
        });
    });
</script>
{{template "base/footer" .}}
