<!-- Message Preview -->
<div class="inbox-message-container">
  <div class="inbox-message-container-inner">
    <div class="message-head">
      <!-- Button group -->
      <div class="action-buttons">
        <div class="control is-grouped">
          <a class="button">
            <i data-feather="star"></i>
          </a>
          <a class="button">
            <i data-feather="clock"></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>
        <!-- Hidden on desktop, controls mobile left and right sidebars -->
        <div class="control is-grouped is-hidden-desktop is-hidden-landscape">
          <a id="close-inbox-preview" class="button is-solo">
            <i data-feather="x"></i>
          </a>
        </div>
      </div>
    </div>

    <!-- Message Previews -->
    <div class="message-body has-slimscroll">
      <!-- Message 0 preview -->
      <!-- /partials/pages/inbox/message-previews/message-preview-0.html -->
      {{> message-preview-0}}

      <!-- Message 1 preview -->
      <!-- /partials/pages/inbox/message-previews/message-preview-1.html -->
      {{> message-preview-1}}

      <!-- Message 2 preview -->
      <!-- /partials/pages/inbox/message-previews/message-preview-2.html -->
      {{> message-preview-2}}

      <!-- Message 3 preview -->
      <!-- /partials/pages/inbox/message-previews/message-preview-3.html -->
      {{> message-preview-3}}

      <!-- Message 4 preview -->
      <!-- /partials/pages/inbox/message-previews/message-preview-4.html -->
      {{> message-preview-4}}

      <!-- Message 5 preview -->
      <!-- /partials/pages/inbox/message-previews/message-preview-5.html -->
      {{> message-preview-5}}

      <!-- Message 6 preview -->
      <!-- /partials/pages/inbox/message-previews/message-preview-6.html -->
      {{> message-preview-6}}

      <!-- Message 7 preview -->
      <!-- /partials/pages/inbox/message-previews/message-preview-7.html -->
      {{> message-preview-7}}

      <!-- Message 8 preview -->
      <!-- /partials/pages/inbox/message-previews/message-preview-8.html -->
      {{> message-preview-8}}

      <!-- Message 9 preview -->
      <!-- /partials/pages/inbox/message-previews/message-preview-9.html -->
      {{> message-preview-9}}

      <!-- Message 10 preview -->
      <!-- /partials/pages/inbox/message-previews/message-preview-10.html -->
      {{> message-preview-10}}
    </div>
  </div>
</div>
