

  <div class="d-flex flex-column flex-grow-1 bg-white">

    <!-- inbox header -->
    <div class="flex-grow-0">
        <!-- inbox title -->
        <div class="d-flex align-items-center pl-2 pr-3 py-3 pl-sm-3 pr-sm-4 py-sm-4 px-lg-5 py-lg-4  border-faded border-top-0 border-left-0 border-right-0 flex-shrink-0">
            <!-- button for mobile -->
            <a href="javascript:void(0);" class="pl-3 pr-3 py-2 d-flex d-lg-none align-items-center justify-content-center mr-2 btn" data-action="toggle" data-class="slide-on-mobile-left-show" data-target="#js-inbox-menu">
                <i class="fa fa-ellipsis-v h1 mb-0 "></i>
            </a>
            <!-- end button for mobile -->
            <h1 class="subheader-title ml-1 ml-lg-0">
                <i class="fa fa-folder-open mr-2 hidden-lg-down"></i>
                Inbox
            </h1>

            <div class="d-flex position-relative ml-auto" style="max-width: 23rem;">
                <i class="fa fa-search position-absolute pos-left fs-lg px-3 py-2 mt-1"></i>
                <input type="hidden" name="b" value="box">
                <input id="filter" type="text" class="form-control bg-subtlelight pl-6" placeholder="Filter doc">
            </div>

        </div>
        <!-- end inbox title -->

        <!-- inbox button shortcut -->
        <div class="d-flex flex-wrap align-items-center pl-3 pr-1 py-2 px-sm-4 px-lg-5 border-faded border-top-0 border-left-0 border-right-0">
            <div class="flex-1 d-flex align-items-center">
                <div class="custom-control custom-checkbox mr-2 mr-lg-2 d-inline-block">
                    <input type="checkbox" class="custom-control-input" id="js-msg-select-all">
                    <label class="custom-control-label bolder" for="js-msg-select-all"></label>
                </div>
                
                <a href="javascript:void(0);" onclick="window.location.reload(true);" class="btn btn-icon rounded-circle mr-1">
                    <i class="fa fa-redo fs-md"></i>
                </a>
                
                <a href="javascript:void(0);" id="js-delete-selected" class="btn btn-icon rounded-circle mr-1">
                    <i class="fa fa-trash-o fs-md"></i>
                </a>
            </div>

            <div class="text-muted mr-1 mr-lg-3 ml-auto">
            
            </div>

            <div class="d-flex flex-wrap">
               <nav aria-label="Page navigation example">
                    <ul id="pagin" class="pagination"></ul>
                </nav>
            </div>

        </div>
        <!-- end inbox button shortcut -->
    </div>
    <!-- end inbox header -->

    <!-- inbox message -->
    <div class="flex-wrap align-items-center flex-grow-1 position-relative bg-gray-50">
        <div class="position-absolute pos-top pos-bottom w-100 custom-scroll">
            <div class="d-flex h-100 flex-column">
                <div id="results">           
                    <!-- message list (the part that scrolls) -->
                    <?php include 'inbox.php'; ?>
                    <!-- end message list -->
                </div>
            </div>
        </div>
    </div>  
    <!-- end inbox message -->
    </div>

   
<script>
    $("#filter").keyup(function() {

    // Retrieve the input field text and reset the count to zero
    var filter = $(this).val(),
    count = 0;
    // Loop through the comment list
    $('#results li').each(function() {
    // If the list item does not contain the text phrase fade it out
    if ($(this).text().search(new RegExp(filter, "i")) < 0) {
        $(this).hide();  // MY CHANGE
        
        // Show the list item if the phrase matches and increase the count by 1
    } else {
        $(this).show(); // MY CHANGE
        count++;
    }

    });

    });
</script>

<script>
//Pagination
    pageSize = 50;

    var pageCount =  $(".line-content").length / pageSize;

    for(var i = 0 ; i<pageCount;i++){
        
    $("#pagin").append('<li class="page-item"><a class="page-link" href="#">'+(i+1)+'</a></li> ');
    }
        $("#pagin li").first().find("a").addClass("current")
    showPage = function(page) {
        $(".line-content").hide();
        $(".line-content").each(function(n) {
            if (n >= pageSize * (page - 1) && n < pageSize * page)
                $(this).show();
        });        
    }

    showPage(1);

    $("#pagin li a").click(function() {
        $("#pagin li a").removeClass("current");
        $(this).addClass("current");
        showPage(parseInt($(this).text())) 
    });
</script>