<style>
	.box, .box-row, .box-cell { overflow: visible !important; -webkit-mask-image: none !important; }
    .page-messages-container > .box-row > .box-cell { display: block !important; }

    .page-messages-label {
      width: 8px;
      height: 8px;
      display: block;
      border-radius: 999px;
      float: left;
      margin-top: 6px;
      margin-right: 12px;
    }

    html[dir="rtl"] .page-messages-label {
      float: right;
      margin-left: 12px;
      margin-right: 0;
    }

    #page-messages-aside-nav {
      max-height: 0;
      overflow: hidden;
      -webkit-transition: max-height .3s;
      transition: max-height .3s;
    }

    #page-messages-aside-nav.show { max-height: 2000px; }

    @media (min-width: 768px) {
      .page-messages-container > .box-row > .box-cell {
        display: table-cell !important;
        padding-top: 15px;
      }
      .page-messages-aside { width: 200px; }
      .page-messages-content { padding-left: 20px; }

      html[dir="rtl"] .page-messages-content {
        padding-left: 0;
        padding-right: 20px;
      }

      #page-messages-aside-nav { max-height: none !important; }

      .page-messages-wide-buttons .btn { width: 60px; }
    }



    .page-messages-pages { line-height: 31px; }

    .page-messages-items td {
      border: none !important;
      padding-top: 12px !important;
      padding-bottom: 12px !important;
    }

    .page-messages-item-actions {
      width: 60px;
    }

    .page-messages-item-from,
    .page-messages-item-subject {
      display: block;
    }

    .page-messages-item-date {
      display: block;
      position: absolute;
      right: 0;
      top: 0;
    }

    html[dir="rtl"] .page-messages-item-date {
      right: auto;
      left: 0;
    }

    @media (min-width: 768px) {
      .page-messages-item-from,
      .page-messages-item-subject {
        display: table-cell;
      }

      .page-messages-item-from { width: 140px; }

      .page-messages-item-date {
        display: table-cell;
        position: static;
        max-width: 130px;
      }
    }
</style>
<div class="col-md-12">

<form method="post" name="privmsg_list" action="{S_PRIVMSGS_ACTION}">
{S_HIDDEN_FIELDS}
<!-- IF BOX_EXPL -->
	<p class="small text-muted">{BOX_EXPL}</p>
<!-- ENDIF -->
<div class="page-messages-container box m-a-0 bg-transparent">
    <div class="box-row">
        <div class="page-messages-aside box-cell valign-top">
          <div class="clearfix">
            <div class="box-container">
              <div class="box-row">
                <div class="box-cell">{POST_PM}</div>
                <div class="box-cell p-l-3 hidden-md hidden-lg hidden-xl" style="width: 60px;"><button type="button" class="btn btn-block btn-outline btn-outline-colorless p-x-0" id="page-messages-aside-nav-toggle"><i class="fa fa-bars"></i></button></div>
              </div>
            </div>

            <div class="m-t-3" id="page-messages-aside-nav">
              <div class="list-group m-b-1">
                {INBOX}
                {OUTBOX}
                {SENTBOX}
                {SAVEBOX}
              </div>

              <div class="m-t-3 visible-xs visible-sm"></div>
            </div>
          </div>
        </div>

        <hr class="page-wide-block m-t-0 visible-xs visible-sm">

		<div class="page-messages-content box-cell valign-top">
          <div class="row">
            <h3 class="p-x-3 col-xs-12 col-md-7 col-lg-8" style="margin-top: 5px;"><i class="fa fa-inbox"></i>&nbsp;&nbsp;{PAGE_TITLE}</h3>

            <div class="col-xs-12 col-md-5 col-lg-4">
              <div class="input-group">
                <select class="form-control" name="msgdays">{S_SELECT_MSG_DAYS}</select>
				<span class="input-group-btn">
					<button type="submit" name="submit_msgdays" class="btn btn-primary"><i class="fa fa-search"></i></button>
				</span>
              </div>
			</div>
          </div>

          <div class="m-t-3 visible-xs visible-sm"></div>

          <div class="panel">
			<div class="panel-body p-a-1 clearfix">
              <div class="btn-toolbar page-messages-wide-buttons pull-left" role="toolbar">
                <div class="btn-group">
                    <button type="button" class="btn dropdown-toggle" data-toggle="dropdown"><i class="fa fa-check-square-o"></i>&nbsp;<i class="fa fa-caret-down"></i></button>
                    <ul class="dropdown-menu" role="menu">
                      <li><a href="javascript:select_switch(true);">{L_MARK_ALL}</a></li>
                      <li class="divider"></li>
                      <li><a href="javascript:select_switch(false);">{L_UNMARK_ALL}</a></li>
                    </ul>
                </div>
				<div class="btn-group">
                  <button type="submit" name="save" class="btn"><i class="fa fa-exclamation-circle" title="{L_SAVE_MARKED}" data-toggle="tooltip"></i></button>
                  <button type="submit" name="delete" class="btn"><i class="fa fa-trash-o" title="{L_DELETE_MARKED}" data-toggle="tooltip"></i></button>
                  <button type="submit" name="deleteall" class="btn"><i class="fa fa fa-file-text-o" title="{L_DELETE_ALL}" data-toggle="tooltip"></i></button>
                </div>
              </div>

            </div>
			<hr class="m-y-0">

            <div class="panel-body p-a-1 clearfix">
              <table class="page-messages-items table table-striped m-a-0">
                <tbody>
				<!-- BEGIN listrow -->
                  <tr>
                    <td class="page-messages-item-actions">
                      <label class="custom-control custom-checkbox custom-control-blank m-a-0 pull-xs-left">
                        <input type="checkbox" class="custom-control-input" name="mark[]2" value="{listrow.S_MARK_ID}"><span class="custom-control-indicator"></span>
                      </label>
                      <span href="#" class="pull-xs-left m-l-1 text-muted font-size-14" title="{listrow.L_PRIVMSG_FOLDER_ALT}" data-toggle="tooltip"><i class="{listrow.PRIVMSG_FOLDER_IMG}"></i></span>
                    </td>
                    <td>
                      <div class="box m-a-0 bg-transparent">
                        <span href="#" class="page-messages-item-from box-cell text-default">{listrow.FROM}</span>
                        <div class="page-messages-item-subject box-cell"><a href="{listrow.U_READ}" class="text-default">{listrow.SUBJECT}</a></div>
                        <div class="page-messages-item-date box-cell text-muted text-xs-right">{listrow.DATE}</div>
                      </div>
                    </td>
                  </tr>
				<!-- END listrow -->
				<!-- BEGIN switch_no_messages -->
				<tr>
					<td class="pad_10 tCenter" colspan="5">{L_NO_MESSAGES_FOLDER}</td>
				</tr>
				<!-- END switch_no_messages -->
                </tbody>
              </table>
            </div>
		  </div>
        </div>
	</div>
</div>
</form>

<nav>
    <ul class="pagination pagination-sm m-y-0">
        {PAGINATION}
    </ul>
	<p class="pull-right">{PAGE_NUMBER}</p>
</nav>

	<script type="text/javascript">
	function select_switch(status)
	{
		for (i = 0; i < document.privmsg_list.length; i++)
		{
			document.privmsg_list.elements[i].checked = status;
		}
	}
	</script>
	<script>
    $(function () {
		$('#page-messages-aside-nav-toggle').on('click', function() {
			$(this)[
			  $('#page-messages-aside-nav').toggleClass('show').hasClass('show') ? 'addClass' : 'removeClass'
			]('active');
		});
	});
	</script>


</div>
