@model CourseModel
@{
    HtmlTitle = "课程中心";
    ViewData["IsTopLevel"] = true;
    ViewData["CategoryId"] = Model.CategoryId.HasValue ? Model.CategoryId : null;
}
@section styles{
    <link rel="stylesheet" href="~/lib/jquery-treeview/jquery.treeview.css" />
    <style>
        .treeview a.selected {
            color: red;
        }
    </style>
}
@section scripts{
    <script src="~/lib/jquery-treeview/jquery.treeview.js"></script>
    <script>
        $(".treeview").treeview({
            persist: "location",
            collapsed: true,
            unique: true
        });
    </script>
}
<div class="row">
    <div class="col-md-3" style="background-color:#fff;">
        @await Html.PartialAsync("_Menu", Model.Categories.Where(o => o.Parent == null).ToList(), this.ViewData)
    </div>
    <div class="col-md-9">
        @foreach (var course in Model.List)
        {
            var category = course.Category;
            var list = new List<CourseCategory>();
            while (category != null)
            {
                list.Add(category);
                category = category.Parent;
            }
            list.Reverse();
            <div class="attachment-block clearfix">
                <img class="attachment-img" src="@course.Image" alt="Attachment Image">
                <div class="attachment-pushed">
                    <h4 class="attachment-heading">
                        <a href="@Url.Action("Details", "Course", new { id = course.Id })">@course.Name</a>
                    </h4>
                    <div class="attachment-text">
                        @course.Description
                        <br>
                        @foreach (var item in list)
                        {
                            <a href="@Url.Action(null, null, new { categoryId = item.Id })">@item.Name</a>
                        }
                    </div>
                </div>
            </div>
        }
        @await Html.PartialAsync("_Paged")
    </div>
</div>