<!-- Central inbox part that holds the messages list -->
<div class="inbox-center-container is-both-opened">
  <div class="inbox-center-container-inner">
    <div class="messages">
      <!-- Button group -->
      <div class="action-buttons">
        <div class="control is-grouped is-hidden-desktop is-hidden-landscape">
          <a id="open-compose" class="button is-solo">
            <i data-feather="menu"></i>
          </a>
        </div>
        <div class="control is-grouped">
          <a class="button">
            <i data-feather="box"></i>
          </a>
          <a class="button">
            <i data-feather="refresh-cw"></i>
          </a>
        </div>
        <div class="control is-grouped">
          <a class="button">
            <i data-feather="inbox"></i>
          </a>
          <a class="button">
            <i data-feather="alert-octagon"></i>
          </a>
          <a class="button">
            <i data-feather="trash-2"></i>
          </a>
        </div>
        <div class="control is-grouped">
          <a class="button">
            <i data-feather="folder"></i>
          </a>
          <a class="button">
            <i data-feather="tag"></i>
          </a>
        </div>
        <div class="control is-grouped is-arrows">
          <a class="button">
            <i data-feather="chevron-left"></i>
          </a>
          <a class="button">
            <i data-feather="chevron-right"></i>
          </a>

          <span class="message-count">1-10 of 123</span>
        </div>
      </div>
      <!-- Messages list -->
      <div id="inbox-messages" class="inbox-messages has-slimscroll">
        <div class="inbox-messages-inner">
          <!-- Message cards -->
          <!-- /partials/pages/inbox/messages-list/messages-list.html -->
          {{> messages-list}}
        </div>
      </div>
    </div>
  </div>
</div>
