{% set active_page = 'Notes' -%}

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

{% block content %}
<div class="mdc-layout-grid mdc-layout-grid--notes-container">
  <div class="mdc-layout-grid__inner">
    <div class="mdc-layout-grid__cell--span-4-desktop portal-hide-scrollbars mdc-layout-grid--notes-list">
      <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">
          <span class="mdc-list-item__text">
            <span class="mdc-list-item__secondary-text">Thoughts on Material Design</span>
            <span class="mdc-list-item__secondary-text">1/17/18, 6:22 PM</span>
          </span>
          <i class="mdc-list-item__meta fa fa-trash mdc-theme--secondary"></i>
        </div>
        <div class="mdc-list-item mdc-list--avatar-list--item">
          <span class="mdc-list-item__text">
            <span class="mdc-list-item__secondary-text">Design Trends for 2019</span>
            <span class="mdc-list-item__secondary-text">1/23/18, 9:22 AM</span>
          </span>
          <i class="mdc-list-item__meta fa fa-trash"></i>
        </div>
        <div class="mdc-list-item mdc-list--avatar-list--item">
          <span class="mdc-list-item__text">
            <span class="mdc-list-item__secondary-text">Introducing the new Web components</span>
            <span class="mdc-list-item__secondary-text">1/26/18, 12:35 PM</span>
          </span>
          <i class="mdc-list-item__meta fa fa-trash"></i>
        </div>
      </div>
      <button class="mdc-fab material-icons portal-button__add-note" aria-label="Note Add">
        <span class="mdc-fab__icon">
          note_add
        </span>
      </button>
    </div>
    <div class="mdc-layout-grid__cell--span-8-desktop">
      <div class="mdc-layout-grid__inner portal-notes-container">
        <div class="portal-note mdc-typography--body1">
          <textarea name="note" id="note" cols="30" rows="10" autofocus>We challenged ourselves to create a visual language for our users that synthesize the classic principles of good design with the innovation and possibility of technology and science. This is material design. This spec is a living document that will be updated as we continue to develop the tenets and specifics of material design.</textarea>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}