@model ForumTopicPageModel
@using Nop.Web.Extensions;
@using Nop.Web.Models.Boards;
@using Nop.Web.Models.Common;
@{
    Layout = "~/Views/Shared/_ColumnsOne.cshtml";

    Html.AddTitleParts(Model.Subject);
}
@Html.Action("ForumBreadcrumb", new { forumTopicId = Model.Id })
@Html.Partial("_SearchBox")
<div class="page forum-topic-page">
    <div class="title">
        <h2 class="topic-name">
            <span>@Model.Subject</span></h2>
    </div>
    <div class="topic-header">
        <div class="topic-options">
            @if (Model.IsCustomerAllowedToEditTopic)
            {
                @Html.RouteLink(T("Forum.EditTopic").Text, "TopicEdit", new { id = Model.Id }, new { @class = "edit-topic-link-button" })
            }
            @if (Model.IsCustomerAllowedToDeleteTopic)
            {                
                @Html.RouteLink(T("Forum.DeleteTopic").Text, "TopicDelete", new { id = Model.Id }, new { onClick = String.Format("return confirm('{0}');", T("Common.AreYouSure").Text), @class = "delete-topic-link-button" })
            }
            @if (Model.IsCustomerAllowedToMoveTopic)
            {
                @Html.RouteLink(T("Forum.MoveTopic").Text, "TopicMove", new { id = Model.Id }, new { @class = "move-topic-link-button" })
            }
            @Html.RouteLink(T("Forum.Reply").Text, "PostCreate", new { id = Model.Id }, new { @class = "reply-topic-link-button" })
            @if (Model.IsCustomerAllowedToSubscribe)
            {
                <a class="watch-topic-link-button" href="#" id="watch-topic-top">@Model.WatchTopicText</a>
                <script type="text/javascript">
                    $(function () {
                        $('#watch-topic-top').click(function () {
                            $.ajax({
                                cache: false,
                                type: 'POST',
                                url: '@Url.RouteUrl("TopicWatch", new { id = Model.Id })',
                                dataType: 'json',
                                success: function (data) {
                                    $('#watch-topic-top').text(data.Text);
                                    $('#watch-topic-bottom').text(data.Text);
                                },
                                error: function (xhr, ajaxOptions, thrownError) {
                                    alert('Failed to watch');
                                }
                            });
                        });
                    });
                </script>
            }
        </div>
        <div class="pager upper">
            @{
                var pager = Html.Pager(new PagerModel
                {
                    PageSize = Model.PostsPageSize,
                    TotalRecords = Model.PostsTotalRecords,
                    PageIndex = Model.PostsPageIndex,
                    ShowTotalSummary = false,
                    RouteActionName = "TopicSlugPaged",
                    UseRouteLinks = true,
                    RouteValues = new RouteValues { id = Model.Id, slug = Model.SeName }
                });
            }
            @pager
        </div>
    </div>
    <div class="posts">
        @foreach (var post in @Model.ForumPostModels)
        {
            Html.RenderPartial("_ForumPost", post);
        }
    </div>
</div>
<div class="topic-footer">
    <div class="topic-options">
        @Html.RouteLink(T("Forum.Reply").Text, "PostCreate", new { id = Model.Id }, new { @class = "reply-topic-link-button" })
        @if (Model.IsCustomerAllowedToSubscribe)
        {
            <a class="watch-topic-link-button" href="#" id="watch-topic-bottom">@Model.WatchTopicText</a>
                <script type="text/javascript">
                    $(function () {
                        $('#watch-topic-bottom').click(function () {
                            $.ajax({
                                cache: false,
                                type: 'POST',
                                url: '@Url.RouteUrl("TopicWatch", new { id = Model.Id })',
                                dataType: 'json',
                                success: function (data) {
                                    $('#watch-topic-top').text(data.Text);
                                    $('#watch-topic-bottom').text(data.Text);
                                },
                                error: function (xhr, ajaxOptions, thrownError) {
                                    alert('Failed to watch');
                                }
                            });
                        });
                    });
                </script>
        }
    </div>
    <div class="pager lower">
        @pager
    </div>
</div>