{% set active_page = 'Calendar' -%}

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

{% block content %}
<div class="mdc-layout-grid mdc-layout-grid--calendar-container" style="background-image: url({{ base }}assets/images/calendar.jpg)">
  <div class="mdc-layout-grid__inner">
    <div class="portal-calendar">
      <div class="portal-calendar-content">
        <div class="mdc-layout-grid">
          <div class="portal-calendar-content__nav">
            <div class="portal-calendar-content__nav__date">
              <a href="calendar.html" class="material-icons portal-date-left-icon">
                chevron_left
              </a>
              <h1 class="mdc-typography--headline">Week 11, 2018</h1>
              <a href="calendar.html" class="material-icons portal-date-right-icon">
                chevron_right
              </a>
            </div>
            <div class="portal-calendar-content__nav__switch">
              <a href="calendar.html" class="material-icons">
                view_module
              </a>
              <a href="calendar-week.html" class="material-icons portal-calendar-content__nav__switch--active">
                view_week
              </a>
              <a href="calendar-day.html" class="material-icons">
                view_day
              </a>
            </div>
          </div>
          <div class="portal-calendar-content__table portal-calendar-content__table-week">
            <table class="mdc-elevation--z24">
              <thead>
                <tr>
                  <th></th>
                  <th>Sun 3/11</th>
                  <th>Mon 3/12</th>
                  <th class="portal-calendar-content__table-date-today">Tue 3/13</th>
                  <th>Wed 3/14</th>
                  <th>Thu 3/15</th>
                  <th>Fri 3/16</th>
                  <th>Sat 3/17</th>
                </tr>
              </thead>
                <tbody>
                  <tr>
                    <td class="portal-calendar-content__table-event-allday portal-text-bold">
                      <span>All day</span>
                    </td>
                    <td class="portal-calendar-content__table-event-allday"></td>
                    <td class="portal-calendar-content__table-event-allday">

                    </td>
                    <td class="portal-calendar-content__table-event-allday portal-calendar-content__table-date-today">
                      <span>
                        <a href="#">
                          <div>Dribbble meetup</div>
                        </a>
                      </span>
                    </td>
                    <td class="portal-calendar-content__table-event-allday"></td>
                    <td class="portal-calendar-content__table-event-allday"></td>
                    <td class="portal-calendar-content__table-event-allday"></td>
                    <td class="portal-calendar-content__table-event-allday"></td>

                  </tr>
                  <tr>
                    <td><span>07:00</span></td>
                    <td></td>
                    <td>
                      <span>
                        <a href="#">
                          <div>Fill up the jet</div>
                        </a>
                      </span>
                    </td>
                    <td class="portal-calendar-content__table-date-today"></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                  </tr>
                  <tr>
                    <td><span>08:00</span></td>
                    <td></td>
                    <td></td>
                    <td class="portal-calendar-content__table-date-today"></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                  </tr>
                  <tr>
                    <td><span>09:00</span></td>
                    <td></td>
                    <td></td>
                    <td class="portal-calendar-content__table-date-today"></td>
                    <td></td>
                    <td></td>
                    <td>
                      <span>
                        <a href="#">
                          <div>Go Shopping</div>
                        </a>
                      </span>
                    </td>
                    <td></td>
                  </tr>
                  <tr>
                    <td><span>10:00</span></td>
                    <td></td>
                    <td></td>
                    <td class="portal-calendar-content__table-date-today"></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                  </tr>
                  <tr>
                    <td><span>11:00</span></td>
                    <td></td>
                    <td></td>
                    <td class="portal-calendar-content__table-date-today"></td>
                    <td>
                      <span>
                        <a href="#">
                          <div>Catch up with Kim</div>
                        </a>
                      </span>
                    </td>
                    <td></td>
                    <td></td>
                    <td></td>
                  </tr>
                  <tr>
                    <td><span>12:00</span></td>
                    <td></td>
                    <td></td>
                    <td class="portal-calendar-content__table-date-today"></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                  </tr>
                  <tr>
                    <td><span>13:00</span></td>
                    <td></td>
                    <td></td>
                    <td class="portal-calendar-content__table-date-today"></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                  </tr>
                  <tr>
                    <td><span>14:00</span></td>
                    <td></td>
                    <td></td>
                    <td class="portal-calendar-content__table-date-today"></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                  </tr>
                  <tr>
                    <td><span>15:00</span></td>
                    <td></td>
                    <td></td>
                    <td class="portal-calendar-content__table-date-today"></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                  </tr>
                  <tr>
                    <td><span>16:00</span></td>
                    <td></td>
                    <td></td>
                    <td class="portal-calendar-content__table-date-today"></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                  </tr>
                  <tr>
                    <td><span>17:00</span></td>
                    <td></td>
                    <td></td>
                    <td class="portal-calendar-content__table-date-today"></td>
                    <td></td>
                    <td>
                      <span>
                        <a href="#">
                          <div>Lisa's Birthday</div>
                        </a>
                      </span>
                    </td>
                    <td></td>
                    <td></td>
                  </tr>
                  <tr>
                    <td><span>18:00</span></td>
                    <td></td>
                    <td></td>
                    <td class="portal-calendar-content__table-date-today"></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                  </tr>
                  <tr>
                    <td><span>19:00</span></td>
                    <td></td>
                    <td></td>
                    <td class="portal-calendar-content__table-date-today"></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                  </tr>
                  <tr>
                    <td><span>20:00</span></td>
                    <td></td>
                    <td></td>
                    <td class="portal-calendar-content__table-date-today"></td>
                    <td></td>
                    <td></td>
                    <td>
                      <span>
                        <a href="#">
                          <div>Feed the horses</div>
                        </a>
                      </span>
                    </td>
                    <td></td>
                  </tr>
                  <tr>
                    <td><span>21:00</span></td>
                    <td></td>
                    <td></td>
                    <td class="portal-calendar-content__table-date-today"></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                  </tr>
                  <tr>
                    <td><span>22:00</span></td>
                    <td></td>
                    <td></td>
                    <td class="portal-calendar-content__table-date-today"></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                  </tr>
                  <tr>
                    <td><span>23:00</span></td>
                    <td></td>
                    <td></td>
                    <td class="portal-calendar-content__table-date-today"></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                  </tr>
                  <tr>
                    <td><span>00:00</span></td>
                    <td></td>
                    <td></td>
                    <td class="portal-calendar-content__table-date-today"></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                  </tr>
                </tbody>
            </table>
          </div>
          <button class="mdc-fab material-icons portal-button__add-event" aria-label="Add">
            <span class="mdc-fab__icon">
              add
            </span>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}