@model PrivateMessageIndexModel
@{    
    Layout = "_ColumnsOne";

    //title
    NopHtml.AddTitleParts(T("PageTitle.PrivateMessages").Text);
    //page class
    NopHtml.AppendPageCssClassParts("html-private-messages");
    NopHtml.AppendPageCssClassParts("html-private-messages-page");
}
<div class="page private-messages private-messages-page">
    <div class="page-title">
        <h1>@T("PrivateMessages.PrivateMessages")</h1>
    </div>
    <div class="page-body">
        @{
            var selectSentTab = Model.SentItemsTabSelected ? ".tabs( 'option', 'active', 1 )" : "";
        }
        <script asp-location="Footer">
            $(function() {
                $("#tabs").tabs()@Html.Raw(selectSentTab);
            });
        </script>
        <div class="tabs inbox-tabs" id="tabs">
            <ul class="tabs-header">
                <li><a href="#tabs-1">@T("PrivateMessages.Inbox")</a></li>
                <li><a href="#tabs-2">@T("PrivateMessages.SentItems")</a></li>
            </ul>
            <div id="tabs-1" class="tab-content">
                @await Component.InvokeAsync(typeof(PrivateMessagesInboxViewComponent), new { pageNumber = Model.InboxPage, tab = "inbox" })
            </div>
            <div id="tabs-2" class="tab-content">
                @await Component.InvokeAsync(typeof(PrivateMessagesSentItemsViewComponent), new { pageNumber = Model.SentItemsPage, tab = "sent" })
            </div>
        </div>
    </div>
</div>
