extends layout

block head
  link(rel='stylesheet', href='/stylesheets/style.css')
  link(rel='stylesheet', href='/stylesheets/print.css', media='print')
  link(rel='stylesheet', href='https://fonts.googleapis.com/icon?family=Material+Icons')
  link(rel='stylesheet', href='https://code.getmdl.io/1.2.1/material.indigo-pink.min.css')
  script(defer='', src='https://code.getmdl.io/1.2.1/material.min.js')

block content
  form#search
    .top-bar
      .title
        .logo
        .text Rooster
      .input-wrapper
        input(type='search', placeholder='Zoeken', autocomplete='off')
        button.material-icons.fav(tabindex='0', type='button') 
      .tooltip
        span Voer hier een <strong>docentafkorting</strong>, <strong>klas</strong>, <strong>leerlingnummer</strong> of <strong>lokaalnummer</strong> in.
      button#overflow-button(type='button')
        i.material-icons &#xE5D4;

      .menu
        .item
          button.mdl-button.selected Dagrooster
          button.mdl-button Basisrooster
        button.item
          span Naar legacy rooster
          i.material-icons launch
        button.item(onclick='window.print()') Pagina printen
        button.item Over
    .autocomplete-wrapper
      ul.autocomplete
  #week-selector
    #search-space-filler
    .week-wrapper
      button(type='button').material-icons &#xE5C4;
      span.current
        span.no-print Loading...
        span.print
      button(type='button').material-icons &#xE5C8;

  #schedule

block scripts
  script.
    !{flagsStr}!{usersStr}
  script(src='/javascripts/bundle.js')