@inherits Umbraco.Web.Macros.PartialViewMacroPage

<div class="markdown-spacer"></div>
<div id="markdown-editor" class="markdown-editor">
    <div class="container">
        <div class="row reply-to">
            <div class="col-sm-6">
                <p>Write your reply to: <a class="reply-name" href=""></a></p>
            </div>
        </div>

        <div class="row create-topic">
            <div class="col-sm-6">
                <input id="topic-title" class="markdown-control" name="topic-title" type="text" placeholder="Enter topic title">
            </div>

            @if (CurrentPage.Parent.DocumentTypeAlias != "Project")
            {
                <div class="col-sm-3 col-xs-6">
                    <select name="topic-category" id="topic-category" class="markdown-control">
                        <option value="" selected="" disabled="">Choose a category</option>
                        @foreach (var main in CurrentPage.AncestorOrSelf(2).Children)
                        {
                            foreach (var cat in main.Children)
                            {
                                <option class="@cat.Name.ToLower().Replace(" ", "")" value="@cat.Id">@cat.Parent.Name - @cat.Name</option>
                            }
                        }
                    </select>
                </div>
            }

            <div class="col-sm-3 col-xs-6">
                <select name="topic-version" id="topic-version" class="markdown-control">
                    <option value="Choose a version" selected="" disabled="">Choose version</option>
                    <option value="7">Umbraco v7</option>
                    <option value="6">Umbraco v6</option>
                    <option value="4">Umbraco v4</option>
                </select>
            </div>

            @if (CurrentPage.Parent.DocumentTypeAlias == "Project")
            {
                <div class="col-sm-3 col-xs-6">
                    <select name="topic-category" id="topic-category" class="markdown-control" style="display: none;">
                        <option class="@CurrentPage.Name.ToLower().Replace(" ", "")" value="@CurrentPage.Id" selected>@CurrentPage.Name</option>
                    </select>
                </div>
            }
        </div>

        <div class="row hidden-xs">
            <div class="col-md-12">
                <div id="wmd-button-bar"></div>
            </div>
        </div>
        <div class="row input-row">
            <div id="input-container" class="col-md-6">
                <label>Editor</label>
                <textarea name="" id="wmd-input" cols="30" rows="10" class="wmd-input markdown-control"></textarea>
            </div>
            <div id="preview-container" class="col-md-6">
                <label>Preview</label>
                <div id="wmd-preview" class="wmd-panel wmd-preview markdown-syntax"></div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-8">
                <input class="button tiny markdown-control" type="button" value="Post reply" id="topic-submit">
                <div id="posting"><div class="loader"></div></div>
            </div>
            <div class="col-xs-4 visible-xs visible-sm">
                <button id="mobile-preview" class="markdown-control">
                    <i class="icon-Eye"></i> <span>Preview</span>
                </button>
            </div>
        </div>
    </div>
    <span class="markdown-close icon-Page-down"></span>
    <div class="draft">Draft</div>
</div>

<div id="insert-image-dialog" class="wmd-prompt-dialog" style="display: none;">
    <div style="padding: 5px;">
        <p><b>Upload image</b></p>
        <p>Image will be uploaded when post is submitted</p>
        <div class="span" style="display:none;"><div class=" loader"></div></div>
        <input type="file" name="file" id="file" data-action="/umbraco/api/forum/editorupload" />
        <div style="text-align:center;">
            <input type="button" value="Cancel" style="margin: 10px; display: inline; width: 7em;">
        </div>
    </div>

</div>



<!-- Mustache template-->
<script id="comment-template" type="x-tmpl-mustache">
    <li class="comment  {{cssClass}}"  data-parent="{{id}}" id="comment-{{id}}">
        <div class="meta">
            <div class="profile">
                <a href="/member/{{authorId}}">{{authorName}}</a> has in total {{authorKarma}} karma points

                <span class="roles">
                    {{#roles}}
                    <span class="{{#lower}}{{.}}{{/lower}}">{{.}}</span>
                    {{/roles}}
                </span>

            </div>
            <div class="time">
                {{created}}
            </div>
        </div>

        <div class="comment-inner">

            <a href="/member/{{authorId}}" class="photo">
                {{{avatar}}}
            </a>


            <div class="highfive">

                <div class="highfive-count">
                    0
                </div>
            </div>

            <div class="body markdown-syntax">
                {{#isSpam}}
                <div class="alert">
                    Sorry if we're causing you any inconvenience but this comment has been automatically marked as spam. A moderator has been notified and will evaluate the validity of your comment. <br>
                    Only moderators and the comment author starter can see this comment. When this comment has been marked as clean, this comment will be shown as normal.<br>
                </div>
                {{/isSpam}}
                {{{body}}}

            </div>
        </div>

        <div class="actions">
            {{#canHaveChildren}}
            <a href="#" data-topic="{{topicId}}" data-parent="{{id}}" data-controller="comment" class="forum-reply reply">
                <i class="icon-Reply-arrow"></i><span>Reply</span>
            </a>
            {{/canHaveChildren}}
            <a href="#" class="edit-post" data-id="{{id}}" data-topic="{{topicId}}" data-controller="comment">
                <i class="icon-Edit"></i><span>Edit</span>
            </a>
            <a href="#" class="delete-reply" data-id="{{id}}">
                <i class="icon-Delete-key"></i><span>Delete post</span>
            </a>
            <a href="#" class="copy-link" data-id="#{{id}}">
                <i class="icon-Link"></i><span>Copy Link</span>
            </a>
        </div>
    </li>
</script>