{% 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">March 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 portal-calendar-content__nav__switch--active">
                view_module
              </a>
              <a href="calendar-week.html" class="material-icons">
                view_week
              </a>
              <a href="calendar-day.html" class="material-icons">
                view_day
              </a>
            </div>
          </div>
          <div class="portal-calendar-content__table ">
            <table class="mdc-elevation--z24">
              <thead>
                <tr>
                  <th>Sun</th>
                  <th>Mon</th>
                  <th>Tue</th>
                  <th>Wed</th>
                  <th>Thu</th>
                  <th>Fri</th>
                  <th>Sat</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td class="portal-calendar-content__table-date-past">
                    <span>25</span>
                    <a>
                      <div>
                        <span>11:15p</span> <span>Go fishing</span>
                      </div>
                    </a>
                  </td>
                  <td class="portal-calendar-content__table-date-past"><span>26</span></td>
                  <td class="portal-calendar-content__table-date-past"><span>27</span></td>
                  <td class="portal-calendar-content__table-date-past"><span>28</span></td>
                  <td class="portal-calendar-content__table-date-past"><span>1</span></td>
                  <td class="portal-calendar-content__table-date-past"><span>2</span></td>
                  <td class="portal-calendar-content__table-date-past">
                    <span>3</span>
                    <a>
                      <div>
                        <span>5a</span> <span>Walk the dog</span>
                      </div>
                      <div>
                        <span>9:44a</span> <span>Dentist :)</span>
                      </div>
                    </a>
                  </td>
                </tr>
                <tr>
                  <td class="portal-calendar-content__table-date-past">
                    <span>4</span>
                  </td>
                  <td class="portal-calendar-content__table-date-past"><span>5</span></td>
                  <td class="portal-calendar-content__table-date-past">
                    <span>6</span>
                    <a>
                      <div>
                        <span>8am</span> <span>Visit John in office</span>
                      </div>
                    </a>
                  </td>
                  <td class="portal-calendar-content__table-date-today"><span>7</span></td>
                  <td><span>8</span></td>
                  <td><span>9</span></td>
                  <td><span>10</span></td>
                </tr>
                <tr>
                  <td>
                    <span>11</span>
                    <a>
                      <div>
                        <span>7am</span> <span>Call Jane</span>
                      </div>
                      <div>
                        <span>8am</span> <span>Visit John in office</span>
                      </div>
                    </a>
                  </td>
                  <td><span>12</span></td>
                  <td><span>13</span></td>
                  <td><span>14</span></td>
                  <td>
                    <span>15</span>
                    <a>
                      <div>
                        <span>8pm</span> <span>Call Mike on Skype</span>
                      </div>
                    </a>
                  </td>
                  <td><span>16</span></td>
                  <td><span>17</span></td>
                </tr>
                <tr>
                  <td><span>18</span></td>
                  <td><span>19</span></td>
                  <td>
                    <span>20</span>
                    <a>
                      <div>
                        <span>11am</span> <span>Renew domain name</span>
                      </div>
                    </a>
                  </td>
                  <td><span>21</span></td>
                  <td><span>22</span></td>
                  <td><span>23</span></td>
                  <td><span>24</span></td>
                </tr>
                <tr>
                  <td><span>25</span></td>
                  <td><span>26</span></td>
                  <td><span>27</span></td>
                  <td><span>28</span></td>
                  <td><span>29</span></td>
                  <td>
                    <span>30</span>
                    <a>
                      <div>
                        <span>11am</span> <span>Meeting with John</span>
                      </div>
                    </a>
                  </td>
                  <td><span>31</span></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 %}