<?php echo $header; ?>
<div class="container-fluid bread_backg bread-desk">
<div class="container">
  <ul class="breadcrumb">
    <?php foreach ($breadcrumbs as $breadcrumb) { ?>
    <li><a href="<?php echo $breadcrumb['href']; ?>"><?php echo $breadcrumb['text']; ?></a></li>
    <?php } ?>
  </ul>
  </div>
</div>
<div class="container">
  <div class="row"><?php echo $column_left; ?>
    <?php if ($column_left && $column_right) { ?>
    <?php $class = 'col-sm-6'; ?>
    <?php } elseif ($column_left || $column_right) { ?>
    <?php $class = 'col-sm-9'; ?>
    <?php } else { ?>
    <?php $class = 'col-sm-12'; ?>
    <?php } ?>
    <div id="content" class="<?php echo $class; ?>"><?php echo $content_top; ?>
      <h1><?php echo $heading_title; ?></h1>
      <p><?php echo $text_balance; ?> <strong><?php echo $balance; ?></strong>.</p>
      <div class="table-responsive">
        <table class="table table-striped table-bordered table-hover">
          <thead>
            <tr>
              <td class="text-left"><?php echo $column_date_added; ?></td>
              <td class="text-left"><?php echo $column_description; ?></td>
              <td class="text-right"><?php echo $column_amount; ?></td>
            </tr>
          </thead>
          <tbody>
            <?php if ($transactions) { ?>
            <?php foreach ($transactions  as $transaction) { ?>
            <tr>
              <td class="text-left"><?php echo $transaction['date_added']; ?></td>
              <td class="text-left"><?php echo $transaction['description']; ?></td>
              <td class="text-right"><?php echo $transaction['amount']; ?></td>
            </tr>
            <?php } ?>
            <?php } else { ?>
            <tr>
              <td class="text-center" colspan="5"><?php echo $text_empty; ?></td>
            </tr>
            <?php } ?>
          </tbody>
        </table>
      </div>
      <div class="text-right"><?php echo $pagination; ?></div>
      <div class="buttons clearfix">
        <div class="pull-right"><a href="<?php echo $continue; ?>" class="btn btn-primary"><?php echo $button_continue; ?></a></div>
      </div>
      <?php echo $content_bottom; ?></div>
    <?php echo $column_right; ?></div>
</div>
<?php echo $footer; ?>

<script>
  jQuery (function ($) {
        if ($(window).width() <= 768)
        {
            $('.hidden-in-category').hide();
            $('.custom-0001').removeClass ('custom-0001').addClass ('custom-0001--DEACTIVE');
            $('#cart').addClass ('--in-category');
            var lastScrollTop = 0, delta = 5;
            $(window).scroll(function(){
                var nowScrollTop = $(this).scrollTop();
                if(Math.abs(lastScrollTop - nowScrollTop) >= delta){
                    if (nowScrollTop > lastScrollTop){
                        $('.hidden-in-category').hide ();
                        $('.custom-0001').removeClass ('custom-0001').addClass ('custom-0001--DEACTIVE');
                        $('#cart').addClass ('--in-category');
                    } else {
                        $('.hidden-in-category').show ();
                        $('.custom-0001--DEACTIVE').removeClass ('custom-0001--DEACTIVE').addClass ('custom-0001');
                        $('#cart').removeClass ('--in-category');
                    }
                    lastScrollTop = nowScrollTop;
                }
            });
        }
    });
  </script>
<style>
.bread-desk {
        margin-top:60px
  }
  @media (max-width: 768px) {
    .bread-desk {
        margin-top:5px
    }
  }
</style>