<style type="text/css">
    /*.notification-section li{background: #ecebeb;}*/
    /*.notification-section li:hover{background: #fff;}*/
    /*.notification-section li a:hover{background: #fff;}*/
    /*.notification-section li.seen{background: #fff;}*/
    .notif-seen-status-trigger{display: block;}
    .navbar-top-links li a{padding: 20px 4px;}
    .count-info .label{top: 8px;}
    .navbar-top-links .dropdown-alerts.help-section{width: 180px; margin-left: 0px !important;}
    body.rtls .navbar-top-links .dropdown-alerts.help-section{width: 180px; margin-right: -140px !important;}


    .navbar-top-links .dropdown-alerts.notification-section{margin-left: 0px !important;}
    body.rtls .navbar-top-links .dropdown-alerts.notification-section{margin-right: -140px !important;}
</style>
<div id="page-wrapper" class="gray-bg dashbard-1">
    <div class="row border-bottom">
        <nav class="navbar navbar-static-top" role="navigation" style="margin-bottom: 0">
            <?php if(is_project_user() === false AND is_sales_man_user() === false AND is_marketer_user() === false AND is_customer_user() === false){ ?>
                <div class="navbar-header" style="width: 75%;">
                    <!-- <div id="mob-nav-icon" style="width: 10%; display: block; float: <?php if($app_direction == 'rtl'){echo 'right;';}else{echo 'left;';} ?>">
                        <a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#"><i class="fa fa-bars"></i> </a>
                    </div> -->
                    <?php
                        $item_settings = get_item_settings();
                    ?>
                    <div id="mob-head-btn-icon" style="width: 100%; display: block; float: left;">
                    <?php if($item_settings['sale'] == 'enable'){ ?>
                    <?php if(check_user_access('add_sale') === TRUE){ ?>
                        <a class="cs-btn-top-nav cs-col-primary cs-col-bd-primary" href="<?php echo url('/sales/add'); ?>"><i class="fa fa-plus"></i><?= print_lang($app_lang,'sales'); ?></a>
                    <?php }} ?>

                    <?php if($item_settings['purchase'] == 'enable'){ ?>
                    <?php if(check_user_access('add_purchase') === TRUE){ ?>
                        <a class="cs-btn-top-nav cs-col-primary cs-col-bd-primary" href="<?php echo url('/purchases/add'); ?>"><i class="fa fa-bar-chart-o"></i><?= print_lang($app_lang,'purchases'); ?></a>
                    <?php }} ?>

                    <?php if($item_settings['production'] == 'enable'){ ?>
                    <?php if(check_user_access('add_production') === TRUE){ ?>
                       
                    <?php }} ?>
                    
                    <?php if($item_settings['journal'] == 'enable'){ ?>
                    <?php if(check_user_access('add_journal') === TRUE){ ?>
                        <a class="cs-btn-top-nav cs-col-primary cs-col-bd-primary" href="<?php echo url('/journal/add'); ?>"><i class="fa fa-book"></i><?= print_lang($app_lang,'journal'); ?></a>
                    <?php }} ?>

                    <?php if($item_settings['expenses'] == 'enable'){ ?>
                    <?php if(check_user_access('add_expense') === TRUE){ ?>
                        <a class="cs-btn-top-nav cs-col-primary cs-col-bd-primary" href="<?php echo url('/expenses/add'); ?>"><i class="fa fa-bullseye"></i><?= print_lang($app_lang,'expenses'); ?></a>
                    <?php }} ?>


                    <?php if(check_user_access('edit_currency_rates') === TRUE){ ?>
                        <a class="cs-btn-top-nav cs-col-primary cs-col-bd-primary" href="<?php echo url('/currency-rates'); ?>"><i class="fa fa-dollar"></i><?= print_lang($app_lang,'currency_rates'); ?></a>
                    <?php } ?>


                    <?php if(check_user_access('backup_right') === TRUE){ ?>
                        <a class="cs-btn-top-nav cs-col-primary cs-col-bd-primary" href="<?php echo url('/db-backup'); ?>"><i class="fa fa-download"></i><?= print_lang($app_lang,'backup'); ?></a>
                    <?php } ?>

                    
                    </div>
                </div>
            <?php } ?>

            <?php if(is_marketer_user() === true){ ?>
                <div class="navbar-header" style="width: 93%;">
                    <div id="mob-head-btn-icon" style="width: 100%; padding: 4px; display: block; float: left;">
                        <a class="cs-btn-top-nav cs-col-primary cs-col-bd-primary" href="<?php echo url('/activities/add'); ?>"><i class="fa fa-plus"></i><?= print_lang($app_lang,'activity_add_new_btn'); ?></a>
                        <a class="cs-btn-top-nav cs-col-primary cs-col-bd-primary" href="<?php echo url('/activities'); ?>"><i class="fa fa-plus"></i><?= print_lang($app_lang,'activity_view_btn'); ?></a>
                        <a class="cs-btn-top-nav cs-col-primary cs-col-bd-primary" href="<?php echo url('/money-receipts/add'); ?>"><i class="fa fa-plus"></i><?= print_lang($app_lang,'sales_man_db_btn_receipts'); ?></a>
                        <a class="cs-btn-top-nav cs-col-primary cs-col-bd-primary" href="<?php echo url('/money-receipts'); ?>"><i class="fa fa-eye"></i><?= print_lang($app_lang,'sales_man_db_btn_received_listing'); ?></a>
                        <a class="cs-btn-top-nav cs-col-primary cs-col-bd-primary" href="<?php echo url('/client-balance-summary'); ?>"><i class="fa fa-eye"></i><?= print_lang($app_lang,'sales_man_db_btn_balance_summary'); ?></a>
                        <a class="cs-btn-top-nav cs-col-primary cs-col-bd-primary" href="<?php echo url('/db-my-sales'); ?>"><i class="fa fa-eye"></i><?= print_lang($app_lang,'sales_man_db_btn_sales'); ?></a>
                        <a class="cs-btn-top-nav cs-col-primary cs-col-bd-primary" href="<?php echo url('/logout'); ?>"><i class="fa fa-sign-out"></i><?= print_lang($app_lang,'logout'); ?></a>
                    </div>
                </div>
            <?php } ?>

            <?php if(is_sales_man_user() === true){ ?>
                <style type="text/css">
                    .mbl-vw-nv-elem-sidebar{display: none !important;}
                </style>
                <div class="navbar-header" style="width: 100%;">
                    <div id="mob-head-btn-icon" style="width: 100%; padding: 4px; display: block; text-align: center; float: left;">
                        <a class="cs-btn-top-nav cs-col-primary cs-col-bd-primary" href="<?php echo url('/activities/add'); ?>"><i class="fa fa-plus"></i><?= print_lang($app_lang,'activity_add_new_btn'); ?></a>
                        <a class="cs-btn-top-nav cs-col-primary cs-col-bd-primary" href="<?php echo url('/activities'); ?>"><i class="fa fa-eye"></i><?= print_lang($app_lang,'activity_view_btn'); ?></a>
                        <a class="cs-btn-top-nav cs-col-primary cs-col-bd-primary" href="<?php echo url('/money-receipts/add'); ?>"><i class="fa fa-plus"></i><?= print_lang($app_lang,'sales_man_db_btn_receipts'); ?></a>
                        <a class="cs-btn-top-nav cs-col-primary cs-col-bd-primary" href="<?php echo url('/money-receipts'); ?>"><i class="fa fa-eye"></i><?= print_lang($app_lang,'sales_man_db_btn_received_listing'); ?></a>
                        <a class="cs-btn-top-nav cs-col-primary cs-col-bd-primary" href="<?php echo url('/client-balance-summary'); ?>"><i class="fa fa-eye"></i><?= print_lang($app_lang,'sales_man_db_btn_balance_summary'); ?></a>
                        <a class="cs-btn-top-nav cs-col-primary cs-col-bd-primary" href="<?php echo url('/db-my-sales'); ?>"><i class="fa fa-eye"></i><?= print_lang($app_lang,'sales_man_db_btn_sales'); ?></a>
                        <a class="cs-btn-top-nav cs-col-primary cs-col-bd-primary" href="<?php echo url('/reports/accounts').'?currency=usd'; ?>"><i class="fa fa-eye"></i><?= print_lang($app_lang,'sales_man_db_btn_ledger'); ?></a>
                        <a class="cs-btn-top-nav cs-col-primary cs-col-bd-primary" href="<?php echo url('/logout'); ?>"><i class="fa fa-sign-out"></i><?= print_lang($app_lang,'logout'); ?></a>
                    </div>
                </div>
            <?php } ?>

            <?php if(is_customer_user() === true){ ?>
                <style type="text/css">
                    .mbl-vw-nv-elem-sidebar{display: none !important;}
                    @media only screen
                    and (min-width : 321px)
                    and (max-width : 480px) {
                        .customer-btn-group{width: 100% !important;}
                        .customer-btn-group-ul{width: 100% !important;}
                        .mbl-vw-nv-elem-sidebar{display: none;}
                        .btn-default{border: none !important;}
                    }
                    @media only screen
                    and (min-width : 481px)
                    and (max-width : 767px) {
                        .customer-btn-group{width: 100% !important;}
                        .customer-btn-group-ul{width: 100% !important;}
                        .mbl-vw-nv-elem-sidebar{display: none;}
                        .btn-default{border: none !important;}
                    }

                </style>
                <div class="navbar-header" style="width: 100%;">
                    <div id="mob-head-btn-icon" style="width: 100%; padding: 4px; display: block; text-align: center; float: <?php if($app_direction == 'rtl'){echo 'right;';}else{echo 'left;';} ?>">
                        <div class="btn-group customer-btn-group" style="margin-top: 12px;">
                            <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle customer-btn-group cs-col-primary cs-col-bd-primary customer-dp-btn" aria-expanded="false"><i class="fa fa-arrow-down" style="margin: 0px 6px;"></i><?= print_lang($app_lang,'customer_u_db_btn_my_bookings'); ?></button>
                            <ul class="dropdown-menu customer-btn-group-ul" x-placement="top-start" style="position: absolute; top: 40px; left: 0px; will-change: top, left;">
                                <li><a class="dropdown-item customer-btn-group-ul" href="<?php echo url('/bookings'); ?>?status=pending"><?= print_lang($app_lang,'customer_u_db_btn_my_bookings_pending'); ?></a></li>
                                <li><a class="dropdown-item" href="<?php echo url('/bookings/processed'); ?>"><?= print_lang($app_lang,'customer_u_db_btn_my_bookings_processed'); ?></a></li>
                            </ul>
                        </div>
                        <a class="cs-btn-top-nav cs-col-primary cs-col-bd-primary" href="<?php echo url('/bookings/add'); ?>"><i class="fa fa-plus"></i><?= print_lang($app_lang,'customer_u_db_btn_new_booking'); ?></a>
                        <a class="cs-btn-top-nav cs-col-primary cs-col-bd-primary" href="<?php echo url('/reports/accounts'); ?>?type=client&currency=usd&account=<?= get_active_customer(); ?>"><i class="fa fa-eye"></i><?= print_lang($app_lang,'customer_u_db_btn_ledger'); ?></a>
                        <a class="cs-btn-top-nav cs-col-primary cs-col-bd-primary" href="<?php echo url('/bookings/sales'); ?>?client=<?= get_active_customer(); ?>"><i class="fa fa-eye"></i><?= print_lang($app_lang,'customer_u_db_btn_sales'); ?></a>
                        <a class="cs-btn-top-nav cs-col-primary cs-col-bd-primary" href="<?php echo url('/suggestions'); ?>?client=<?= get_active_customer(); ?>"><i class="fa fa-eye"></i><?= print_lang($app_lang,'customer_u_db_btn_my_suggestions'); ?></a>
                        <a class="cs-btn-top-nav cs-col-primary cs-col-bd-primary" href="<?php echo url('/suggestions/add'); ?>?client=<?= get_active_customer(); ?>"><i class="fa fa-eye"></i><?= print_lang($app_lang,'customer_u_db_btn_new_suggestion'); ?></a>
                        <a class="cs-btn-top-nav cs-col-primary cs-col-bd-primary" href="<?php echo url('/logout'); ?>"><i class="fa fa-sign-out"></i><?= print_lang($app_lang,'logout'); ?></a>
                    </div>
                </div>
            <?php } ?>

            <span id="cs-mob-vw-image"><img alt="image" class="" src="<?= get_branch_image('logo'); ?>" /></span>

            <ul class="nav navbar-top-links navbar-right">
                
                <?php if(is_project_user() === false AND is_sales_man_user() === false AND is_marketer_user() === false AND is_customer_user() === false){ ?>
                    <!-- Payment ALert -->
                    <li class="dropdown">
                        <a class="dropdown-toggle count-info" data-toggle="dropdown" href="#">
                            <i class="fa fa-bandcamp" style="font-size: 16px;" title="<?= print_lang($app_lang,'titlebar_payments_alerts'); ?>"></i>  <span class="label label-danger display-none">1</span>
                        </a>
                        <ul class="dropdown-menu dropdown-alerts notification-section">
                            <div class="full-height-scroll" style="max-height: calc(100vh - 130px);">
                                <li>
                                    <div class="text-center link-block">
                                        <a href="notifications.html">
                                            <strong><?= print_lang($app_lang,'titlebar_payments_alert_empty'); ?></strong>
                                        </a>
                                    </div>
                                </li>
                            </div>
                        </ul>
                    </li>
                    <!-- Payment ALert -->


                    <?php if(isset($alerts_notifications)){ ?>
                    <!-- Expiry ALert -->
                    <li class="dropdown">
                        <a class="dropdown-toggle count-info" data-toggle="dropdown" href="#">
                            <i class="fa fa-gear" style="font-size: 16px;" title="<?= print_lang($app_lang,'titlebar_expiry_alerts'); ?>"></i>  <span class="label label-danger"><?php if(count($alerts_notifications['expiry_alerts']) > 9){ echo '9+'; }else{ echo count($alerts_notifications['expiry_alerts']); } ?></span>
                        </a>
                        <ul class="dropdown-menu dropdown-alerts notification-section">
                            <div class="full-height-scroll" style="max-height: calc(100vh - 130px);">
                                <?php if(count($alerts_notifications['expiry_alerts']) > 0){ ?>
                                    <?php $expiry_count = 1; foreach($alerts_notifications['expiry_alerts'] as $expiry_alert){ ?>
                                        <?php if($expiry_count > 30){ break; } ?>
                                        <?php if($expiry_count > 1){ ?><li class="divider"></li><?php } ?>

                                        <?php
                                            $notification_uid = 'ITEM'.$expiry_alert['uid'].'EXPIRYALERT';
                                            $notification_seen_status = array_key_exists($notification_uid,$seen_notifications) ? 'seen' : NULL;
                                        ?>

                                        <li class="notification-info-section <?= $notification_seen_status; ?>">
                                            <a class="notif-seen-status-trigger" data-id="<?= $notification_uid; ?>" href="<?= url('/items/edit').'/'.$expiry_alert['uid']; ?>">
                                                <div>
                                                    <!-- <i class="fa fa-envelope fa-fw"></i> -->
                                                    <aant><?= $expiry_alert['name']; ?></aant>
                                                    <span class="text-muted small"><?= print_lang($app_lang,'titlebar_expiry_date'); ?>: <?= $expiry_alert['expiry_date']; ?></span>
                                                </div>
                                            </a>
                                        </li>
                                    <?php $expiry_count++; } ?>
                                <?php }else{ ?>
                                    <li>
                                        <div class="text-center link-block">
                                            <a href="notifications.html">
                                                <strong><?= print_lang($app_lang,'titlebar_expiry_alert_empty'); ?></strong>
                                            </a>
                                        </div>
                                    </li>
                                <?php } ?>
                            </div>
                        </ul>
                    </li>
                    <!-- Expiry ALert -->
                    <?php } ?>


                    <?php if(isset($alerts_notifications)){ ?>
                    <!-- Product ALert -->
                    <li class="dropdown">
                        <a class="dropdown-toggle count-info" data-toggle="dropdown" href="#">
                            <i class="fa fa-globe" style="font-size: 16px;" title="<?= print_lang($app_lang,'titlebar_product_alerts'); ?>"></i>  <span class="label label-danger"><?php if(count($alerts_notifications['qty_alerts']) > 9){ echo '9+'; }else{ echo count($alerts_notifications['qty_alerts']); } ?></span>
                        </a>
                        <ul class="dropdown-menu dropdown-alerts notification-section">
                            <div class="full-height-scroll" style="max-height: calc(100vh - 130px);">
                                <?php if(count($alerts_notifications['qty_alerts']) > 0){ ?>
                                    <?php $qty_alert_count = 1; foreach($alerts_notifications['qty_alerts'] as $qty_alert_row){ ?>
                                        <?php if($qty_alert_count > 30){ break; } ?>
                                        <?php if($qty_alert_count > 1){ ?> <li class="divider"></li> <?php } ?>

                                        <?php
                                            $notification_uid = 'ITEM'.$qty_alert_row['uid'].'QTYALERT';
                                            $notification_seen_status = array_key_exists($notification_uid,$seen_notifications) ? 'seen' : NULL;
                                        ?>

                                        <li class="notification-info-section <?= $notification_seen_status; ?>">
                                            <a class="notif-seen-status-trigger" data-id="<?= $notification_uid; ?>" href="<?= url('/items/edit').'/'.$qty_alert_row['uid']; ?>">
                                                <div>
                                                    <!-- <i class="fa fa-envelope fa-fw"></i> -->
                                                    <aant><?= $qty_alert_row['name']; ?></aant>
                                                    <span class="text-muted small"><?= print_lang($app_lang,'titlebar_avail_qty'); ?>: <?= $qty_alert_row['avail_qty']; ?></span>
                                                </div>
                                            </a>
                                        </li>
                                    <?php $qty_alert_count++; } ?>
                                <?php }else{ ?>
                                    <li>
                                        <div class="text-center link-block">
                                            <a href="notifications.html">
                                                <strong><?= print_lang($app_lang,'titlebar_product_alert_empty'); ?></strong>
                                            </a>
                                        </div>
                                    </li>
                                <?php } ?>
                            </div>
                        </ul>
                    </li>
                    <!-- Product ALert -->
                    <?php } ?>


                    <?php if(isset($alerts_notifications)){ ?>
                    <!-- Activity Alerts -->
                    <li class="dropdown">
                        <a class="dropdown-toggle count-info" data-toggle="dropdown" href="#">
                            <i class="fa fa-bell" style="font-size: 16px;" title="<?= print_lang($app_lang,'titlebar_activities_notifications'); ?>"></i>  <span class="label label-danger"><?php if(count($alerts_notifications['activity_alerts']) > 9){ echo '9+'; }else{ echo count($alerts_notifications['activity_alerts']); } ?></span>
                        </a>
                        <ul class="dropdown-menu dropdown-alerts notification-section">
                            <div class="full-height-scroll" style="max-height: calc(100vh - 130px);">
                            <?php if(count($alerts_notifications['activity_alerts']) > 0){ ?>
                                <?php $activity_alert_count = 1; foreach($alerts_notifications['activity_alerts'] as $activity_alert_row){ ?>
                                    
                                    <?php if($activity_alert_count > 30){ break; } ?>
                                    <?php if($activity_alert_count > 1){ ?><li class="divider"></li><?php } ?>

                                    <?php
                                        $notification_uid = $activity_alert_row['uid'];
                                        $notification_seen_status = array_key_exists($notification_uid,$seen_notifications) ? 'seen' : NULL;
                                        $notification_url = empty($activity_alert_row['url']) ? 'javascript:void(0);' : url('/').$activity_alert_row['url'];
                                    ?>

                                    <li class="notification-info-section <?= $notification_seen_status; ?>">
                                        <a class="notif-seen-status-trigger" href="<?= $notification_url; ?>" data-id="<?= $notification_uid; ?>">
                                            <div class="">
                                                <!-- <i class="fa fa-envelope fa-fw"></i> -->
                                                <aant><?= ucwords(str_replace('_', ' ', $activity_alert_row['module'])); ?> <?= ucwords($activity_alert_row['activity']); ?>: <?= ucwords($activity_alert_row['details']); ?></aant>
                                                <span class="text-muted small"><?= get_elapsed_time($activity_alert_row['activity_time']); ?></span>
                                            </div>
                                        </a>
                                    </li>
                                <?php $activity_alert_count++; } ?>
                            <?php }else{ ?>
                                <li>
                                    <div class="text-center link-block">
                                        <a href="notifications.html">
                                            <strong><?= print_lang($app_lang,'titlebar_activities_notification_empty'); ?></strong>
                                        </a>
                                    </div>
                                </li>
                            <?php } ?>
                            </div>
                        </ul>
                    </li>
                    <!-- Activity Alerts -->
                    <?php } ?>


                    <!-- Help Section -->
                    <li class="dropdown">
                        <a title="help" class="dropdown-toggle count-info" data-toggle="dropdown" href="#">
                            <i style="font-size: 18px;" class="fa fa-question-circle"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-alerts help-section">
                            <li>
                                <a href="<?php echo url('/help/english'); ?>">
                                    <div>
                                        English
                                    </div>
                                </a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="<?php echo url('/help/pashto'); ?>">
                                    <div>
                                        Pashto
                                    </div>
                                </a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="<?php echo url('/help/dari'); ?>">
                                    <div>
                                        Dari
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <!-- Help Section -->
                <?php } ?>

                <?php if(is_sales_man_user() === false AND is_marketer_user() === false AND is_customer_user() === false){ ?>
                    <!-- Logout -->
                    <li>
                        <a title="<?= print_lang($app_lang,'logout'); ?>" href="<?php echo url('/logout'); ?>">
                            <i style="font-size: 18px;" class="fa fa-sign-out"></i>
                        </a>
                    </li>
                    <!-- Logout -->
                <?php } ?>

                <li class="mbl-vw-nv-elem-top-nav">
                    <a id="cs-nav-top-links-btn" title="Navbar" href="javascript:;"><i style="font-size: 18px;" class="fa fa-sliders"></i></a>
                </li>
                <li class="mbl-vw-nv-elem-sidebar">
                    <a id="cs-nav-sidebar-btn" title="Sidebar" href="javascript:;"><i style="font-size: 18px;" class="fa fa-bars"></i></a>
                </li>

            </ul>
        </nav>
        <!-- <div class="col-md-12 text-center">
            <a class="btn btn-primary sm title-bar-btn" href="<?php echo url('/sales/add'); ?>" style="margin-top: 13px;"><i class="fa fa-plus" <?php if($app_direction == 'rtl'){echo 'style="margin-left: 5px;"';}else{echo 'style="margin-right: 5px;"';}?>></i><?= print_lang($app_lang,'sales'); ?></a>
            <a class="btn btn-primary sm title-bar-btn" href="<?php echo url('/purchases/add'); ?>" style="margin-top: 13px;"><i class="fa fa-bar-chart-o" <?php if($app_direction == 'rtl'){echo 'style="margin-left: 5px;"';}else{echo 'style="margin-right: 5px;"';}?>></i><?= print_lang($app_lang,'purchases'); ?></a>
            <a class="btn btn-primary sm title-bar-btn" href="<?php echo url('/production/add'); ?>" style="margin-top: 13px;"><i class="fa fa-cogs" <?php if($app_direction == 'rtl'){echo 'style="margin-left: 5px;"';}else{echo 'style="margin-right: 5px;"';}?>></i><?= print_lang($app_lang,'production'); ?></a>
            <a class="btn btn-primary sm title-bar-btn" href="<?php echo url('/journal/add'); ?>" style="margin-top: 13px;"><i class="fa fa-book" <?php if($app_direction == 'rtl'){echo 'style="margin-left: 5px;"';}else{echo 'style="margin-right: 5px;"';}?>></i><?= print_lang($app_lang,'journal'); ?></a>
            <a class="btn btn-primary sm title-bar-btn" href="<?php echo url('/expenses/add'); ?>" style="margin-top: 13px;"><i class="fa fa-bullseye" <?php if($app_direction == 'rtl'){echo 'style="margin-left: 5px;"';}else{echo 'style="margin-right: 5px;"';}?>></i><?= print_lang($app_lang,'expenses'); ?></a>
            <a class="btn btn-primary sm title-bar-btn" href="<?php echo url('/db-backup'); ?>" style="margin-top: 13px;"><i class="fa fa-download" <?php if($app_direction == 'rtl'){echo 'style="margin-left: 5px;"';}else{echo 'style="margin-right: 5px;"';}?>></i><?= print_lang($app_lang,'backup'); ?></a>
        </div> -->
    </div>

    <!-- wrapper for dynamic contents -->
    <div id="dynamic-content-container">