@model ProfileIndexModel
@{    
    Layout = "_ColumnsOne";

    //title
    NopHtml.AddTitleParts(T("PageTitle.Profile").Text);
    //page class
    NopHtml.AppendPageCssClassParts("html-profile-page");
}
<div class="page profile-page">
    <div class="page-title">
        <h1>@Model.ProfileTitle</h1>
    </div>
    <div class="page-body">
        @{
            var selectPostsTab = Model.ForumsEnabled && Model.PagingPosts ? ".tabs( 'option', 'active', 1 )" : "";
        }
        <script asp-location="Footer">
            $(function() {
                //we use a small workaround to avoid bug with <base> tag (https://bugs.jqueryui.com/ticket/8637/)
                $.fn.__tabs = $.fn.tabs;
                $.fn.tabs = function (a, b, c, d, e, f) {
                    var base = window.location.href.replace(/#.*$/, '');
                    $('ul>li>a[href^="#"]', this).each(function () {
                        var href = $(this).attr('href');
                        $(this).attr('href', base + href);
                    });
                    $(this).__tabs(a, b, c, d, e, f);
                };

                $("#tabs").tabs()@Html.Raw(selectPostsTab);
            });
        </script>
        <div class="tabs inbox-tabs" id="tabs">
            <ul class="tabs-header">
                <li><a href="#tabs-1">@T("Profile.PersonalInfo")</a></li>
                @if (Model.ForumsEnabled)
                {
                    <li><a href="#tabs-2">@T("Profile.LatestPosts")</a></li>
                }
            </ul>
            <div id="tabs-1" class="tab-content">
                @await Component.InvokeAsync(typeof(ProfileInfoViewComponent), new { customerProfileId = Model.CustomerProfileId })
            </div>
            @if (Model.ForumsEnabled)
            {
                <div id="tabs-2" class="tab-content">
                    @await Component.InvokeAsync(typeof(ProfilePostsViewComponent), new { customerProfileId = Model.CustomerProfileId, pageNumber = Model.PostsPage })
                </div>
            }
        </div>
    </div>
</div>
