{% set active_page = 'Chat' -%}

{% extends "layouts/" + layout + ".html" %}

{% block content %}
<div class="mdc-layout-grid mdc-layout-grid--chat-container">
  <div class="mdc-layout-grid__inner">
    <div class="mdc-layout-grid__cell--span-4-desktop portal-email-list-container portal-hide-scrollbars">
      <div class="mdc-list mdc-list--two-line mdc-list--avatar-list">
        <div class="mdc-list-item mdc-list--avatar-list--item mdc-list-item--selected">
          <img class="mdc-list-item__graphic" src="{{ base }}assets/images/male/4.jpg" width="56" height="56" alt="Brown Bear">
          <span class="mdc-list-item__text">
            Astrid Edeleanu
            <span class="mdc-list-item__secondary-text">I shall have to fly; and the.</span>
            <span class="mdc-list-item__secondary-text">1/28/18, 10:57 AM</span>
          </span>
          <i class="mdc-list-item__meta fa fa-comment mdc-theme--secondary"></i>
        </div>
        <div class="mdc-list-item mdc-list--avatar-list--item">
          <img class="mdc-list-item__graphic" src="{{ base }}assets/images/male/1.jpg" width="56" height="56" alt="Brown Bear">
          <span class="mdc-list-item__text">
            Faisal Khan
            <span class="mdc-list-item__secondary-text">Dormouse said--' the Hatter.</span>
            <span class="mdc-list-item__secondary-text">1/16/18, 12:06 AM</span>
          </span>
          <i class="mdc-list-item__meta fa fa-comment"></i>
        </div>
        <div class="mdc-list-item mdc-list--avatar-list--item">
          <img class="mdc-list-item__graphic" src="{{ base }}assets/images/male/2.jpg" width="56" height="56" alt="Brown Bear">
          <span class="mdc-list-item__text">
            Tom McGuiness
            <span class="mdc-list-item__secondary-text">Good-bye, feet!' (for when.</span>
            <span class="mdc-list-item__secondary-text">1/17/18, 6:22 PM</span>
          </span>
          <i class="mdc-list-item__meta fa fa-comment"></i>
        </div>
        <div class="mdc-list-item mdc-list--avatar-list--item">
          <img class="mdc-list-item__graphic" src="{{ base }}assets/images/male/3.jpg" width="56" height="56" alt="Brown Bear">
          <span class="mdc-list-item__text">
            Kimon Lauterbach
            <span class="mdc-list-item__secondary-text">Duchess, digging her sharp.</span>
            <span class="mdc-list-item__secondary-text">12/31/17, 6:13 PM</span>
          </span>
          <i class="mdc-list-item__meta fa fa-comment"></i>
        </div>
        <div class="mdc-list-item mdc-list--avatar-list--item">
          <img class="mdc-list-item__graphic" src="{{ base }}assets/images/male/5.jpg" width="56" height="56" alt="Brown Bear">
          <span class="mdc-list-item__text">
            Emmy Lueilwitz
            <span class="mdc-list-item__secondary-text">And yet I wish I hadn't to.</span>
            <span class="mdc-list-item__secondary-text">12/31/17, 10:50 AM</span>
          </span>
          <i class="mdc-list-item__meta fa fa-comment"></i>
        </div>
        <div class="mdc-list-item mdc-list--avatar-list--item">
          <img class="mdc-list-item__graphic" src="{{ base }}assets/images/male/6.jpg" width="56" height="56" alt="Brown Bear">
          <span class="mdc-list-item__text">
            Robbie Jenkins
            <span class="mdc-list-item__secondary-text">However, on the spot.' This.</span>
            <span class="mdc-list-item__secondary-text">1/5/18, 3:36 AM</span>
          </span>
          <i class="mdc-list-item__meta fa fa-comment"></i>
        </div>
        <div class="mdc-list-item mdc-list--avatar-list--item">
          <img class="mdc-list-item__graphic" src="{{ base }}assets/images/male/7.jpg" width="56" height="56" alt="Brown Bear">
          <span class="mdc-list-item__text">
            Trudie Feest
            <span class="mdc-list-item__secondary-text">Bill's place for a long way..</span>
            <span class="mdc-list-item__secondary-text">12/31/17, 4:53 PM</span>
          </span>
          <i class="mdc-list-item__meta fa fa-comment"></i>
        </div>
        <div class="mdc-list-item mdc-list--avatar-list--item">
          <img class="mdc-list-item__graphic" src="{{ base }}assets/images/male/8.jpg" width="56" height="56" alt="Brown Bear">
          <span class="mdc-list-item__text">
            Sheldon Bashirian
            <span class="mdc-list-item__secondary-text">Our family always HATED.</span>
            <span class="mdc-list-item__secondary-text">1/10/18, 8:10 PM</span>
          </span>
          <i class="mdc-list-item__meta fa fa-comment"></i>
        </div>
        <div class="mdc-list-item mdc-list--avatar-list--item">
          <img class="mdc-list-item__graphic" src="{{ base }}assets/images/male/9.jpg" width="56" height="56" alt="Brown Bear">
          <span class="mdc-list-item__text">
            Arch Sporer IV
            <span class="mdc-list-item__secondary-text">Heads below!' (a loud.</span>
            <span class="mdc-list-item__secondary-text">12/31/17, 4:05 PM</span>
          </span>
          <i class="mdc-list-item__meta fa fa-comment"></i>
        </div>
        <div class="mdc-list-item mdc-list--avatar-list--item">
          <img class="mdc-list-item__graphic" src="{{ base }}assets/images/male/10.jpg" width="56" height="56" alt="Brown Bear">
          <span class="mdc-list-item__text">
            Winston Frami
            <span class="mdc-list-item__secondary-text">White Rabbit read:-- 'They.</span>
            <span class="mdc-list-item__secondary-text">1/13/18, 8:51 PM</span>
          </span>
          <i class="mdc-list-item__meta fa fa-comment"></i>
        </div>
        <div class="mdc-list-item mdc-list--avatar-list--item">
          <img class="mdc-list-item__graphic" src="{{ base }}assets/images/male/11.jpg" width="56" height="56" alt="Brown Bear">
          <span class="mdc-list-item__text">
            Olaf Donnelly
            <span class="mdc-list-item__secondary-text">I'm not looking for the.</span>
            <span class="mdc-list-item__secondary-text">1/16/18, 3:44 AM</span>
          </span>
          <i class="mdc-list-item__meta fa fa-comment"></i>
        </div>
        <div class="mdc-list-item mdc-list--avatar-list--item">
          <img class="mdc-list-item__graphic" src="{{ base }}assets/images/male/12.jpg" width="56" height="56" alt="Brown Bear">
          <span class="mdc-list-item__text">
            Eunice Morissette
            <span class="mdc-list-item__secondary-text">Miss, this here ought to.</span>
            <span class="mdc-list-item__secondary-text">1/24/18, 10:27 PM</span>
          </span>
          <i class="mdc-list-item__meta fa fa-comment"></i>
        </div>
        <div class="mdc-list-item mdc-list--avatar-list--item">
          <img class="mdc-list-item__graphic" src="{{ base }}assets/images/male/13.jpg" width="56" height="56" alt="Brown Bear">
          <span class="mdc-list-item__text">
            Dr. Moises Beahan DDS
            <span class="mdc-list-item__secondary-text">Pigeon in a very grave.</span>
            <span class="mdc-list-item__secondary-text">1/19/18, 5:55 AM</span>
          </span>
          <i class="mdc-list-item__meta fa fa-comment"></i>
        </div>
        <div class="mdc-list-item mdc-list--avatar-list--item">
          <img class="mdc-list-item__graphic" src="{{ base }}assets/images/male/14.jpg" width="56" height="56" alt="Brown Bear">
          <span class="mdc-list-item__text">
            Berry Dooley
            <span class="mdc-list-item__secondary-text">Alice, 'it's very easy to.</span>
            <span class="mdc-list-item__secondary-text">1/1/18, 11:26 PM</span>
          </span>
          <i class="mdc-list-item__meta fa fa-comment"></i>
        </div>
      </div>
    </div>
    <div class="mdc-layout-grid__cell--span-8-desktop portal-chat__details">
      <div class="portal-chat__details-content">
        <div class="mdc-layout-grid">
          <div class="mdc-layout-grid__inner portal-chat__details-grid">
            <div class="portal-message">
              <div class="portal-message__user">
                <img class="portal-message__avatar" src="{{ base }}assets/images/male/13.jpg">
                <span class="mdc-typography--caption">Ruby Shields</span>
              </div>
              <div class="portal-message__card mdc-card">
                <section class="portal-card__content mdc-typography--body1">
                  <p>Magni quis voluptatem porro repudiandae. Velit vitae voluptatem quaerat eaque voluptatem voluptatem officiis.</p>

                  <p>Sint et porro dolore ipsam consequuntur doloribus. Praesentium deserunt sit aliquam provident sed blanditiis sapiente aliquid. Voluptatem incidunt ipsum quae nemo. Explicabo autem enim ab dolor velit explicabo.</p>

                  <p>Corrupti perspiciatis dolore dolore magnam quia. Quia autem itaque asperiores vel ipsa. Aut harum sunt magni molestiae praesentium ut esse. Atque repudiandae quasi ullam odio aut magnam id.</p>
                </section>
                <div class="portal-message__card-time">
                  2 months ago
                </div>
                <div class="portal-message__card-action">
                  <a href="{{ base }}chat.html">
                    Edit comment
                  </a>
                  <a href="{{ base }}chat.html" class="portal-message__card-action--warning">
                    Delete comment
                  </a>
                </div>
              </div>
            </div>
            <div class="portal-message portal-message--not-author">
              <div class="portal-message__user">
                <img class="portal-message__avatar" src="{{ base }}assets/images/male/12.jpg">
                <span class="mdc-typography--caption">Ruby Shields</span>
              </div>
              <div class="portal-message__card mdc-card">
                <section class="portal-card__content mdc-typography--body1">
                  <p>Magni quis voluptatem porro repudiandae. Velit vitae voluptatem quaerat eaque voluptatem voluptatem officiis.</p>

                  <p>Sint et porro dolore ipsam consequuntur doloribus. Praesentium deserunt sit aliquam provident sed blanditiis sapiente aliquid. Voluptatem incidunt ipsum quae nemo. Explicabo autem enim ab dolor velit explicabo.</p>

                  <p>Corrupti perspiciatis dolore dolore magnam quia. Quia autem itaque asperiores vel ipsa. Aut harum sunt magni molestiae praesentium ut esse. Atque repudiandae quasi ullam odio aut magnam id.</p>
                </section>
                <div class="portal-message__card-time">
                  2 months ago
                </div>
                <div class="portal-message__card-action">
                  <a href="{{ base }}chat.html">
                    Edit comment
                  </a>
                  <a href="{{ base }}chat.html" class="portal-message__card-action--warning">
                    Delete comment
                  </a>
                </div>
              </div>
            </div>
            <div class="portal-message">
              <div class="portal-message__user">
                <img class="portal-message__avatar" src="{{ base }}assets/images/male/11.jpg">
                <span class="mdc-typography--caption">Olaf Donnelly</span>
              </div>
              <div class="portal-message__card mdc-card">
                <section class="portal-card__content mdc-typography--body1">
                  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ratione labore est quia ex inventore quod incidunt sit quam distinctio quo fuga dolorem assumenda nihil itaque et corrupti, sapiente ad quas.</p>

                  <p>Sint et porro dolore ipsam consequuntur doloribus. Praesentium deserunt sit aliquam provident sed blanditiis sapiente aliquid. Voluptatem incidunt ipsum quae nemo. Explicabo autem enim ab dolor velit explicabo.</p>
                </section>
                <div class="portal-message__card-time">
                  1 month ago
                </div>
                <div class="portal-message__card-action">
                  <a href="{{ base }}chat.html">
                    Edit comment
                  </a>
                  <a href="{{ base }}chat.html" class="portal-message__card-action--warning">
                    Delete comment
                  </a>
                </div>
              </div>
            </div>
            <div class="portal-message portal-message--not-author">
              <div class="portal-message__user">
                <img class="portal-message__avatar" src="{{ base }}assets/images/male/12.jpg">
                <span class="mdc-typography--caption">Ruby Shields</span>
              </div>
              <div class="portal-message__card mdc-card">
                <section class="portal-card__content mdc-typography--body1">

                  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam perferendis ducimus explicabo. Nulla doloribus omnis sapiente libero dolorum ipsa? Odio porro ex repudiandae labore odit commodi ut placeat assumenda nihil.</p>

                </section>
                <div class="portal-message__card-time">
                  3 weeks ago
                </div>
                <div class="portal-message__card-action">
                  <a href="{{ base }}chat.html">
                    Edit comment
                  </a>
                  <a href="{{ base }}chat.html" class="portal-message__card-action--warning">
                    Delete comment
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="portal-chat__details-new-message mdc-elevation--z24">
        <div class="mdc-text-field mdc-text-field--fullwidth portal-text-field--fullwidth mdc-text-field--dense mdc-text-field--with-trailing-icon">
          <input type="text" class="mdc-text-field__input" id="send">
          <label for="send" class="mdc-floating-label">Type a message here</label>
          <i class="material-icons mdc-text-field__icon" tabindex="0">send</i>
          <div class="mdc-line-ripple"></div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
  (function() {
    const tfRoot = document.querySelector('.mdc-text-field');
    const tf = new mdc.textField.MDCTextField(tfRoot);
  })();
</script>
{% endblock %}