{% set active_page = 'Email' -%}

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

{% block content %}
<div class="mdc-layout-grid mdc-layout-grid--portal-container">
  <div class="mdc-layout-grid__inner">
    <div class="mdc-layout-grid__cell--span-1-desktop portal-email-menu-container portal-hide-scrollbars">
      <button class="mdc-button portal-email-menu-container__link portal-email-menu-container__link--selected">
        <i class="material-icons mdc-button__icon">inbox</i>
        <span class="portal-badge portal-badge--mini portal-badge--secondary">4</span>
        Inbox
      </button>
      <button class="mdc-button portal-email-menu-container__link">
        <i class="material-icons mdc-button__icon">stars</i>
        <span class="portal-badge portal-badge--mini portal-badge--secondary">2</span>
        Starred
      </button>
      <button class="mdc-button portal-email-menu-container__link">
        <i class="material-icons mdc-button__icon">flag</i>
        <span class="portal-badge portal-badge--mini portal-badge--secondary">5</span>
        Important
      </button>
      <button class="mdc-button portal-email-menu-container__link">
        <i class="material-icons mdc-button__icon">send</i>
        Sent
      </button>
      <button class="mdc-button portal-email-menu-container__link">
        <i class="material-icons mdc-button__icon">drafts</i>
        Drafts
      </button>
      <button class="mdc-button portal-email-menu-container__link">
        <i class="material-icons mdc-button__icon">contact_mail</i>
        Contacts
      </button>
    </div>
    <div class="mdc-layout-grid__cell--span-3-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">
          <img class="mdc-list-item__graphic" src="{{ base }}assets/images/avatar-1.png" width="56" height="56" alt="Brown Bear">
          <span class="mdc-list-item__text">
            Prof. Ezekiel Mann
            <span class="mdc-list-item__secondary-text">YOUR temper!' 'Hold your...</span>
          </span>
        </div>
        <div class="mdc-list-item">
          <img class="mdc-list-item__graphic" src="{{ base }}assets/images/avatar-2.png" width="56" height="56" alt="Brown Bear">
          <span class="mdc-list-item__text">
            Clara Cremin
            <span class="mdc-list-item__secondary-text">But her sister sat still.</span>
          </span>
        </div>
        <div class="mdc-list-item">
          <img class="mdc-list-item__graphic" src="{{ base }}assets/images/avatar-3.png" width="56" height="56" alt="Brown Bear">
          <span class="mdc-list-item__text">
            Jeffery Weimann
            <span class="mdc-list-item__secondary-text">Why, I wouldn't be so proud.</span>
          </span>
        </div>
        <div class="mdc-list-item">
          <img class="mdc-list-item__graphic" src="{{ base }}assets/images/avatar-4.png" width="56" height="56" alt="Brown Bear">
          <span class="mdc-list-item__text">
            Newton Welch
            <span class="mdc-list-item__secondary-text">You gave us three or more;</span>
          </span>
        </div>
        <div class="mdc-list-item">
          <img class="mdc-list-item__graphic" src="{{ base }}assets/images/avatar-5.png" width="56" height="56" alt="Brown Bear">
          <span class="mdc-list-item__text">
            Emmy Lueilwitz
            <span class="mdc-list-item__secondary-text">I suppose, by being drowned.</span>
          </span>
        </div>
        <div class="mdc-list-item">
          <img class="mdc-list-item__graphic" src="{{ base }}assets/images/avatar-6.png" width="56" height="56" alt="Brown Bear">
          <span class="mdc-list-item__text">
            Robbie Jenkins
            <span class="mdc-list-item__secondary-text">Lizard in head downwards.</span>
          </span>
        </div>
        <div class="mdc-list-item">
          <img class="mdc-list-item__graphic" src="{{ base }}assets/images/avatar-big.png" width="56" height="56" alt="Brown Bear">
          <span class="mdc-list-item__text">
            Trudie Feest
            <span class="mdc-list-item__secondary-text">Alice's head. 'Is that the.</span>
          </span>
        </div>
        <div class="mdc-list-item">
          <img class="mdc-list-item__graphic" src="{{ base }}assets/images/avatar-2.png" width="56" height="56" alt="Brown Bear">
          <span class="mdc-list-item__text">
            Sheldon Bashirian
            <span class="mdc-list-item__secondary-text">Hatter. 'Stolen!' the King.</span>
          </span>
        </div>
        <div class="mdc-list-item">
          <img class="mdc-list-item__graphic" src="{{ base }}assets/images/avatar-1.png" width="56" height="56" alt="Brown Bear">
          <span class="mdc-list-item__text">
            Arch Sporer IV
            <span class="mdc-list-item__secondary-text">I am! But I'd better take.</span>
          </span>
        </div>
        <div class="mdc-list-item">
          <img class="mdc-list-item__graphic" src="{{ base }}assets/images/avatar-4.png" width="56" height="56" alt="Brown Bear">
          <span class="mdc-list-item__text">
            Winston Frami
            <span class="mdc-list-item__secondary-text">Prizes!' Alice had learnt.</span>
          </span>
        </div>
        <div class="mdc-list-item">
          <img class="mdc-list-item__graphic" src="{{ base }}assets/images/avatar-3.png" width="56" height="56" alt="Brown Bear">
          <span class="mdc-list-item__text">
            Olaf Donnelly
            <span class="mdc-list-item__secondary-text">But I've got to the Knave of.</span>
          </span>
        </div>
        <div class="mdc-list-item">
          <img class="mdc-list-item__graphic" src="{{ base }}assets/images/avatar-5.png" width="56" height="56" alt="Brown Bear">
          <span class="mdc-list-item__text">
            Eunice Morissette
            <span class="mdc-list-item__secondary-text">I THINK; or is it twelve?.</span>
          </span>
        </div>
        <div class="mdc-list-item">
          <img class="mdc-list-item__graphic" src="{{ base }}assets/images/avatar-6.png" width="56" height="56" alt="Brown Bear">
          <span class="mdc-list-item__text">
            Dr. Moises Beahan DDS
            <span class="mdc-list-item__secondary-text">He got behind Alice as he.</span>
          </span>
        </div>
        <div class="mdc-list-item">
          <img class="mdc-list-item__graphic" src="{{ base }}assets/images/avatar-big.png" width="56" height="56" alt="Brown Bear">
          <span class="mdc-list-item__text">
            Berry Dooley
            <span class="mdc-list-item__secondary-text">I think I must sugar my.</span>
          </span>
        </div>
      </div>
    </div>
    <div class="mdc-layout-grid__cell--span-8-desktop portal-email-preview-container">
      <h2 class="mdc-typography--title">YOUR temper!' 'Hold your.</h2>
      <div class="mdc-card portal-email-card">
        <header class="portal-email-card__header">
          <img class="portal-email-card__avatar" src="{{ base }}assets/images/avatar-1.png" width="56" height="56" alt="Brown Bear">
          <div class="portal-email-card__heading">
            <h1 class=" mdc-typography--title portal-email-card__title">Prof. Ezekiel Mann</h1>
            <h2 class="mdc-typography--subheading1 portal-email-card__subtitle">orga79@dunno.com</h2>
          </div>
          <span class="portal-email-card__date">3 weeks ago</span>
        </header>
        <section class="portal-email-card__text">
          <p>Numquam blanditiis quae qui accusamus ullam qui sunt magni. Magni enim ut libero fugiat sit saepe. Qui tenetur dicta laboriosam sit. Error nostrum magnam assumenda quasi laboriosam.</p>

          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse velit ipsa laborum dolorum sed blanditiis ratione atque ducimus voluptas soluta modi alias, quo aspernatur, est repellendus? Dicta excepturi cumque quis!</p>

        </section>
        <section class="mdc-card__actions portal-email-card__actions mdc-card__action-icons">
          <a href="#" class="mdc-card__action--icon mdc-card__action">
            <i class="material-icons" title="Reply">reply</i>
          </a>
          <a href="#" class="mdc-card__action--icon mdc-card__action">
            <i class="material-icons" title="Reply All">reply_all</i>
          </a>
          <a href="#" class="mdc-card__action--icon mdc-card__action">
            <i class="material-icons" title="Forward">forward</i>
          </a>
          <div class="portal-email-card__action-delete">
            <a href="#" class="mdc-card__action--icon mdc-card__action">
              <i class="material-icons mdc-theme--secondary" title="Delete">delete</i>
            </a>
          </div>
        </section>
      </div>
      <div class="mdc-card portal-email-card">
          <header class="portal-email-card__header">
            <img class="portal-email-card__avatar" src="{{ base }}assets/images/avatar-3.png" width="56" height="56" alt="Brown Bear">
            <div class="portal-email-card__heading">
              <h1 class=" mdc-typography--title portal-email-card__title">Jeffery Weimann</h1>
              <h2 class="mdc-typography--subheading1 portal-email-card__subtitle">salma93@ortiz.com</h2>
            </div>
            <span class="portal-email-card__date">a month ago</span>
          </header>
          <section class="portal-email-card__text">
            <p>Numquam blanditiis quae qui accusamus ullam qui sunt magni. Magni enim ut libero fugiat sit saepe. Qui tenetur dicta laboriosam sit. Error nostrum magnam assumenda quasi laboriosam.</p>

            <p>Vero quos odio sapiente asperiores. Necessitatibus quo earum cumque illum non deleniti corporis. Sint fugit cupiditate voluptate dignissimos error sint aut. Atque et sed qui sint beatae.</p>

            <p>Eaque dolores velit totam id accusantium. Officia ut provident in est. Doloribus quia nisi quis aut reiciendis ipsum architecto.</p>
          </section>
          <section class="mdc-card__actions portal-email-card__actions mdc-card__action-icons">
            <a href="#" class="mdc-card__action--icon mdc-card__action">
              <i class="material-icons" title="Reply">reply</i>
            </a>
            <a href="#" class="mdc-card__action--icon mdc-card__action">
              <i class="material-icons" title="Reply All">reply_all</i>
            </a>
            <a href="#" class="mdc-card__action--icon mdc-card__action">
              <i class="material-icons" title="Forward">forward</i>
            </a>
            <div class="portal-email-card__action-delete">
              <a href="#" class="mdc-card__action--icon mdc-card__action">
                <i class="material-icons mdc-theme--secondary" title="Delete">delete</i>
              </a>
            </div>
          </section>
        </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}{% endblock %}