@using OurUmbraco.Forum.Extensions
@inherits OurUmbraco.Our.Models.OurUmbracoTemplatePage

<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")
            {
                var categories = Model.Content.AncestorOrSelf(2).Children.Where(m => m.NewTopicsAllowed()).ToList();
                var categoriesIncludeCurrentPage = categories.Any(x => x.Id == Model.Content.Id);

                <div class="col-sm-3 col-xs-6">
                    <select name="topic-category" id="topic-category" class="markdown-control">
                        @if (categoriesIncludeCurrentPage)
                        {
                            <option value="" disabled="">Choose a category</option>
                        }
                        else
                        {
                            <option value="" selected="" disabled="">Choose a category</option>
                        }
                        @foreach (var cat in categories)
                        {
                            <option class="@cat.Name.ToLower().Replace(" ", "")" value="@cat.Id" selected="@(cat.Id == Model.Content.Id ? "" : null)">@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 for manual approval. A moderator has been notified and will evaluate to make sure you're not trying to post spam. <br />
                    Only moderators and the comment author can see this comment. When this comment has been approved this comment will be shown as normal. After that, your future comments will not need manual approval. <br /><br />
                    <strong>Note:</strong>We will send you an email when your account has been approved.<br /><br />
                    <strong>Why are we doing this?</strong> We're dealing with a spam problem that cannot be fought with automated systems. Therefore, we approve each account that has a low number of posts manually. Again, sorry for the inconvenience, we much appreciate your contribution and your patience while we approve your account.
                </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>