@using Abp.Configuration
@using WeOnlineApp.Configuration
@using WeOnlineApp.Helpers
@{

}
<style>
    .main-header .nav-item > .nav-link, .main-header .nav-item > .nav-link > .fas {
        font-size: 1rem;
    }
</style>
<!-- Navbar -->
<nav class="main-header navbar navbar-expand navbar-white navbar-light">
    <!-- Left navbar links -->
    <ul class="navbar-nav">
        <li class="nav-item">
            <a id="PushMenuBar" class="nav-link" data-widget="pushmenu" href="/" onclick="PushmenuExtra(this)"><i class="fas fa-bars"></i></a>
        </li>
        <li class="nav-item d-none d-sm-inline-block">
            <a href="@(ApplicationPath)" class="nav-link">@(L("Home"))</a>
        </li>
    </ul>

    <!-- Right navbar links -->
    <ul class="navbar-nav ml-auto">
        <!-- Notifications Dropdown Menu -->

        <li class="nav-item dropdown" id="header_notification_bar">
            <a class="nav-link" data-toggle="dropdown" href="#">
                <i class="fas fa-bell text-warning"></i>
                <span class="badge badge-iwb navbar-badge" style="top: 4px;font-weight: 600"></span>
            </a>
            <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
               
            </div>
        </li>

        @Html.Action("UserMenu", "Layout")
        @if (ShowLang())
        {
            @Html.Action("LanguageChange", "Layout")
        }

        <li class="nav-item">
            <a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#">
                <i class="fas fa-th-large"></i>
            </a>
        </li>
    </ul>
</nav>
<!-- /.navbar -->

@using (Html.BeginScripts())
{
    <!-- Navbar -->
    <script>
        function PushmenuExtra(that) {
            if ($(that).hasClass("iwb-collapse")) {
                $(that).removeClass("iwb-collapse");
            } else {
                $(that).addClass("iwb-collapse");
            }
        }
        $(function () {

            //监听 #PushMenuBar 的class变化
            var mutationObserver = new MutationObserver(function (m, o) {
                console.log(m, o);
                $('.iwb-bootstrap-table').fadeOut(200);
                setTimeout(function () {
                    $('table').each(function () {
                        if ($(this).data('iwb.table')) {
                            $(this).iwbTable('resetView');
                            $('.iwb-bootstrap-table').fadeIn();
                        }
                    });
                },
                    300);
            });
            mutationObserver.observe($('#PushMenuBar')[0], { attributes: true, attributeFilter: ['class'], attributeOldValue: true });
        });
    </script>
    <script id="headerNotificationBarTemplate" type="x-tmpl-mustache">
        <a class="nav-link" data-toggle="dropdown" href="#">
            <i class="fas fa-bell text-warning"></i>
            {{#unreadCount}}
            <span class="badge badge-iwb navbar-badge" style="top: 4px;font-weight: 600"> {{unreadCount}}</span>
            {{/unreadCount}}
        </a>
        <div class="dropdown-menu notification-menu dropdown-menu-right">
            {{#notifications.length}}
            <span class="dropdown-header">{{unreadCount}} @L("NewNotifications")</span>
            <div class="dropdown-divider"></div>
            {{/notifications.length}}

            {{#notifications}}

            <a class="dropdown-item notification-item {{#url}}notification-url{{/url}} {{#isUnread}}user-notification-item-unread{{/isUnread}}" data-url="{{url}}">
                <div class="item-icon">
                    <i class="{{icon}}"></i>
                </div>
                <div class="item-title">{{text}}</div>
                <div class="item-time text-i">{{timeAgo}}</div>
                <div class="item-state set-read">
                    {{#isUnread}}
                    <span data-notification-id="{{userNotificationId}}" class="no-read">@L("NoRead")</span>
                    {{/isUnread}}
                    {{^isUnread}}
                    <span class="has-read">@L("HasRead")</span>
                    {{/isUnread}}
                </div>
            </a>
            {{/notifications}}
            {{^notifications.length}}
            <span class="notification-empty-text p-3">
                @L("ThereIsNoNotification")
            </span>
            {{/notifications.length}}
            {{#notifications.length}}
            <div class="dropdown-divider"></div>
            <div class="row m-2">
                {{#unreadCount}}
                <div class="text-center col-6">
                    <a href="" id="SetAllNotificationsAsRead">@L("SetAllAsRead")</a>
                </div>
                {{/unreadCount}}
                <div class="text-center col-6">
                    <div class="text-center"><a href="@Url.Action("Notification", "BaseSystem")">@L("SeeAllNotifications")</a></div>
                </div>
            </div>
            {{/notifications.length}}

        </div>
    </script>
    <!-- /.navbar -->
}