{% set active_page = 'Todo' -%}

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

{% block content %}
<section class="portal-todo-container">
  <div class="mdc-layout-grid">
    <div class="mdc-layout-grid__inner">
      <div class="mdc-layout-grid__cell--span-2-desktop mdc-layout-grid__cell--span-1-tablet"></div>
      <div class="mdc-layout-grid__cell--span-8-desktop mdc-layout-grid__cell--span-6-tablet mdc-layout-grid__cell--span-4-phone">
        <div class="mdc-card portal-card-todo">
          <section class="mdc-card__media portal-card-todo__header">
            <div class="portal-card-todo__header-mountain"></div>
            <div class="portal-card-todo__header-mountain"></div>
            <div class="portal-card-todo__header-cloud"></div>
            <div class="portal-card-todo__header-sun"></div>
            <h1>My daily list</h1>
          </section>
          <section>
            <ul class="mdc-list" id="trailing-checkbox-list">
              <li class="mdc-list-item checkbox-list-ripple-surface">
                <label for="trailing-checkbox-meeting">Standup Meeting</label>
                <div class="mdc-list-item__meta">
                  <div class="mdc-checkbox">
                    <input type="checkbox"
                            class="mdc-checkbox__native-control"
                            id="trailing-checkbox-meeting"/>
                    <div class="mdc-checkbox__background">
                      <svg class="mdc-checkbox__checkmark"
                            viewBox="0 0 24 24">
                        <path class="mdc-checkbox__checkmark-path"
                              fill="none"
                              stroke="white" d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
                      </svg>
                      <div class="mdc-checkbox__mixedmark"></div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="mdc-list-item checkbox-list-ripple-surface">
                <label for="trailing-checkbox-code-review">Code Review</label>
                <div class="mdc-list-item__meta">
                  <div class="mdc-checkbox">
                    <input type="checkbox"
                            class="mdc-checkbox__native-control"
                            id="trailing-checkbox-code-review"/>
                    <div class="mdc-checkbox__background">
                      <svg class="mdc-checkbox__checkmark"
                            viewBox="0 0 24 24">
                        <path class="mdc-checkbox__checkmark-path"
                              fill="none"
                              stroke="white"
                              d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
                      </svg>
                      <div class="mdc-checkbox__mixedmark"></div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="mdc-list-item checkbox-list-ripple-surface">
                <label for="trailing-checkbox-live-updates">Live Updates</label>
                <div class="mdc-list-item__meta">
                  <div class="mdc-checkbox">
                    <input type="checkbox"
                            class="mdc-checkbox__native-control"
                            id="trailing-checkbox-live-updates"/>
                    <div class="mdc-checkbox__background">
                      <svg class="mdc-checkbox__checkmark"
                            viewBox="0 0 24 24">
                        <path class="mdc-checkbox__checkmark-path"
                              fill="none"
                              stroke="white"
                              d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
                      </svg>
                      <div class="mdc-checkbox__mixedmark"></div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="mdc-list-item checkbox-list-ripple-surface">
                <label for="trailing-checkbox-fallout">Play some Fallout 4</label>
                <div class="mdc-list-item__meta">
                  <div class="mdc-checkbox">
                    <input type="checkbox"
                            class="mdc-checkbox__native-control"
                            id="trailing-checkbox-fallout"/>
                    <div class="mdc-checkbox__background">
                      <svg class="mdc-checkbox__checkmark"
                            viewBox="0 0 24 24">
                        <path class="mdc-checkbox__checkmark-path"
                              fill="none"
                              stroke="white"
                              d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
                      </svg>
                      <div class="mdc-checkbox__mixedmark"></div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="mdc-list-item checkbox-list-ripple-surface">
                <label for="trailing-checkbox-walk-the-dog">Walk the dog</label>
                <div class="mdc-list-item__meta">
                  <div class="mdc-checkbox">
                    <input type="checkbox"
                            class="mdc-checkbox__native-control"
                            id="trailing-checkbox-walk-the-dog"/>
                    <div class="mdc-checkbox__background">
                      <svg class="mdc-checkbox__checkmark"
                            viewBox="0 0 24 24">
                        <path class="mdc-checkbox__checkmark-path"
                              fill="none"
                              stroke="white"
                              d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
                      </svg>
                      <div class="mdc-checkbox__mixedmark"></div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="mdc-list-item checkbox-list-ripple-surface">
                <label for="trailing-checkbox-css-grid">Read about CSS grid</label>
                <div class="mdc-list-item__meta">
                  <div class="mdc-checkbox">
                    <input type="checkbox"
                            class="mdc-checkbox__native-control"
                            id="trailing-checkbox-css-grid"/>
                    <div class="mdc-checkbox__background">
                      <svg class="mdc-checkbox__checkmark"
                            viewBox="0 0 24 24">
                        <path class="mdc-checkbox__checkmark-path"
                              fill="none"
                              stroke="white"
                              d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
                      </svg>
                      <div class="mdc-checkbox__mixedmark"></div>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </section>
        </div>
        <!-- Actions below the Todo card -->
        <button class="mdc-button">
          Select All
        </button>
        <button class="mdc-button">
          Deselect All
        </button>
        <div class="mdc-text-field">
          <input type="text" class="mdc-text-field__input" id="full-func-text-field">
          <label for="full-func-text-field" class="mdc-floating-label">Add a task</label>
          <div class="mdc-line-ripple"></div>
        </div>
        <button class="mdc-fab mdc-fab--mini material-icons" aria-label="Add">
          <span class="mdc-fab__icon">add</span>
        </button>
      </div>
      <div class="mdc-layout-grid__cell--span-2-desktop mdc-layout-grid__cell--span-1-tablet"></div>
    </div>
  </div>
</section>

{% endblock %}

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