<div id="message-preview-9" class="message-body-inner">
  <div class="box message-preview">
    <div class="box-inner">
      <div class="header">
        <div class="avatar">
          <img
            src="https://via.placeholder.com/300x300"
            data-demo-src="assets/img/avatars/rolf.jpg"
            alt=""
            data-user-popover="13"
          />
        </div>
        <div class="meta">
          <div class="name">Rolf Krupp</div>
          <div class="date">sept 14 2018, 02:27pm</div>
        </div>
        <div class="meta-right">
          <div>
            <span class="tag is-important">Important</span>
          </div>
          <div>
            <i data-feather="paperclip"></i>
            <small>3 attachments</small>
          </div>
        </div>
      </div>

      <hr />
      <div class="content">
        <p>Hello, here are the project files</p>
        <p>
          Corporis tempora id quae fuga. Perspiciatis quam magnam dolores ut
          quia. Neque vero non laudantium animi omnis qui debitis minus
          molestias. Est ut minus est dolores quo harum illum suscipit cumque.
        </p>
        <p>
          Natus vel ipsam suscipit est possimus qui quia. Distinctio aspernatur
          quia tenetur harum. Tempore qui aut ratione earum quia nam. Et
          asperiores officiis delectus. Optio quisquam nulla.
        </p>
        <p>Sincerely, <br />Dan.</p>
      </div>
      <div class="has-text-right">
        <a class="button is-solid grey-button is-bold raised"
          >Reply to Message</a
        >
      </div>
    </div>
  </div>

  <div class="attachments">
    <div class="attachments-header">
      <div class="paperclip">
        <i data-feather="paperclip"></i>
      </div>
    </div>
    <div class="attachments-inner">
      <div class="box has-file sheet">
        <div class="box-inner">
          <i data-feather="file-text"></i>
          <h5>project_budget.xlsx</h5>
        </div>
        <div class="actions-group">
          <a class="action">
            <i data-feather="download"></i>
          </a>
          <a class="action">
            <i data-feather="arrow-right"></i>
          </a>
        </div>
      </div>
      <div class="box has-file pdf">
        <div class="box-inner">
          <i data-feather="file-text"></i>
          <h5>project_graphics.pdf</h5>
        </div>
        <div class="actions-group">
          <a class="action">
            <i data-feather="download"></i>
          </a>
          <a class="action">
            <i data-feather="arrow-right"></i>
          </a>
        </div>
      </div>
      <div class="box has-file slides">
        <div class="box-inner">
          <i data-feather="file-text"></i>
          <h5>slides.opt</h5>
        </div>
        <div class="actions-group">
          <a class="action">
            <i data-feather="download"></i>
          </a>
          <a class="action">
            <i data-feather="arrow-right"></i>
          </a>
        </div>
      </div>
    </div>
  </div>

  <div class="reply-wrapper">
    <div class="reply-title">
      Reply to conversation
      <i data-feather="help-circle" class="has-tip"></i>
      <!-- Title Popover -->
      <div class="webui-popover-content">
        <div class="popover-flex-block">
          <div class="icon-block">
            <i data-feather="info"></i>
          </div>
          <div class="content-block">
            <span>Format message, </span>
            <span
              >Select the text you want to edit to make the toolbar
              appear.</span
            >
          </div>
        </div>
      </div>
    </div>

    <div class="reply-wrapper-inner">
      <div class="flex-form">
        <img
          src="https://via.placeholder.com/300x300"
          data-demo-src="assets/img/avatars/jenna.png"
          alt=""
        />
        <div class="control">
          <div class="reply-textarea"></div>
        </div>
      </div>
      <div class="has-text-right">
        <button
          type="button"
          class="button is-solid accent-button is-bold raised send-message"
        >
          Send Message
        </button>
      </div>
    </div>
  </div>
</div>
