{% set messages = [{
  avatar: 'assets/images/people/110/guy-6.jpg',
  name: "Laza Bogdan", 
  date: "1 hour ago",
  message: "Coming along nicely, we've got a draft for the client design completed, take a look! 🤓",
  file: {
    name: "draft.sketch",
    size: "5 MB"
  }
}, {
  avatar: 'assets/images/people/110/woman-5.jpg',
  name: 'Michelle',
  date: '5 minutes ago',
  message: 'Clients loved the new design.'
}, {
  avatar: 'assets/images/people/110/woman-5.jpg',
  name: 'Michelle',
  date: '5 minutes ago',
  message: '🔥 Superb job..'
}, {
  avatar: 'assets/images/people/110/guy-6.jpg',
  name: 'Laza Bogdan',
  date: 'just now',
  message: 'Glad it all worked out 😉'
}] %}

<div class="app-messages__container d-flex flex-column h-100 pb-4">
  <div class="navbar navbar-light bg-white navbar-expand-sm navbar-shadow z-1">
    <div class="{{ navbarContainerClass or containerClass }} flex-wrap px-sm-0">
      <div class="nav py-2">
        <div class="nav-item align-items-center mr-3">
          <div class="mr-3">
            <div class="avatar avatar-online avatar-sm">
              <img src="assets/images/people/110/woman-5.jpg" alt="people" class="avatar-img rounded-circle">
            </div>
          </div>
          <div class="d-flex flex-column" style="max-width: 200px; font-size: 15px">
            <strong class="text-body">Michelle Smith</strong>
            <span class="text-muted text-ellipsis">Personal Development Teacher since 2014</span>
          </div>
        </div>
      </div>
      <div class="py-2 flex d-flex align-items-center">
        <div class="flex search-form form-control-rounded search-form--light" style="min-width: 200px;">
          <input type="text" class="form-control" placeholder="Search messages" id="searchSample02">
          <button class="btn pr-3" type="button" role="button"><i class="material-icons">search</i></button>
        </div>
        <button data-target="#messages-drawer" class="navbar-toggler d-block{% if layout !== 'fixed' %} d-md-none{% endif %} ml-3 p-0" data-toggle="sidebar" type="button">
          <i class="material-icons">people_outline</i>
        </button>
      </div>
    </div>
  </div>
  <div class="flex pt-4" style="position: relative;" data-perfect-scrollbar>
    <div class="{{ containerClass }} page__container">
      <div class="jumbotron">
        <div class="d-flex align-items-center">
          <div class="mr-3">
            <div class="avatar avatar-xl">
              <img src="assets/images/people/110/woman-5.jpg" alt="people" class="avatar-img rounded-circle">
            </div>
          </div>
          <div class="flex">
            <h4 class="mb-0">Michelle Smith</h4>
            <p class="text-muted mb-0">Personal Development Teacher since 2014</p>
          </div>
        </div>
      </div>
      <ul class="d-flex flex-column list-unstyled" id="messages">

        {% for item in messages %}
        <li class="message d-inline-flex">
          <div class="message__aside">
            <a href="{{ prefix }}profile.html" class="avatar">
              <img src="{{ item.avatar }}" alt="people" class="avatar-img rounded-circle">
            </a>
          </div>
          <div class="message__body card">
            <div class="card-body">
              <div class="d-flex align-items-center">
                <div class="flex mr-3">
                  <a href="{{ prefix }}profile.html" class="text-body"><strong>{{ item.name }}</strong></a>
                </div>
                <div>
                  <small class="text-muted">{{ item.date }}</small>
                </div>
              </div>
              <span class="text-black-70">{{ item.message }}</span>
              {% if item.file %}
              <a href="#" class="media align-items-center mt-2 text-decoration-0 bg-white px-3">
                <span class="avatar mr-2">
                  <span class="avatar-title rounded-circle">
                    <i class="material-icons font-size-24pt">attach_file</i>
                  </span>
                </span>
                <span class="media-body" style="line-height: 1.5">
                  <span class="text-primary">{{ item.file.name }}</span><br>
                  <span class="text-muted">{{ item.file.size }}</span>
                </span>
              </a>
              {% endif %}
            </div>
          </div>
        </li>
        {% endfor %}

      </ul>
    </div>
  </div>
  <div class="{{ containerClass }} page__container">
    <form action="#" id="message-reply">
      <div class="input-group input-group-merge">
        <input type="text" class="form-control form-control-appended" autofocus="" required="" placeholder="Type message">
        <div class="input-group-append">
          <div class="input-group-text pr-2">
            <button class="btn btn-flush" type="button"><i class="material-icons">tag_faces</i></button>
          </div>
          <div class="input-group-text pl-0">
            <div class="custom-file custom-file-naked d-flex" style="width: 24px; overflow: hidden;">
              <input type="file" class="custom-file-input" id="customFile">
              <label class="custom-file-label" style="color: inherit;" for="customFile">
                <i class="material-icons">attach_file</i>
              </label>
            </div>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>