<section class="cal">
  <header class="wip">
    <ul class="actions">
      <li><a href="#">Timeline view</a></li>
      <li><a href="#">Multi-Module edit</a></li>
    </ul>

    <ul>
      <li>
        <h2>Sort:</h2>
        <select>
          <option value="">Linear Order</option>
          <option value="">Recently Modified</option>
          <option value="">Type</option>
          <option value="">Alphabetically</option>
        </select>
      </li>

      <li>
        <h2>Filter:</h2>
        <select>
          <option value="">All content</option>
          <option value="">Videos</option>
          <option value="">Problems</option>
          <option value="">Labs</option>
          <option value="">Tutorials</option>
          <option value="">HTML</option>
        </select>
        <a href="#" class="more">More</a>
      </li>
      <li>
        <a href="#">Hide goals</a>
      </li>
      <li class="search">
        <input type="search" name="" id="" value="" placeholder="Search" />
      </li>
    </ul>
  </header>

  <ol id="weeks">
    % for week in weeks:
    <li class="week" data-id="${week.location.url()}">
      <header>
        <h1><a href="#" class="week-edit">${week.name}</a></h1>
        <ul>
          % if 'goals' in week.metadata:
            % for goal in week.metadata['goals']:
            <li class="goal editable">${goal}</li>
            % endfor
          % else:
            <li class="goal editable">Please create a learning goal for this week</li>
          % endif
        </ul>
      </header>

      <ul class="modules">
        % for module in week.get_children():
        <li class="module"
            data-id="${module.location.url()}"
            data-type="${module.js_module_name}"
            data-preview-type="${module.module_class.js_module_name}">

            <a href="#" class="module-edit">${module.name}</a>
            <a href="#" class="draggable">handle</a>
        </li>
        % endfor
        <%include file="module-dropdown.html"/>
      </ul>
    </li>
    %endfor
    <li class="wip">
      <header>
        <h1>Course Scratch Pad</h1>
      </header>

      <ul>
        <li>
          <a href="#" class="problem-edit">Problem title 11</a>
          <a href="#" class="draggable">handle</a>
        </li>
        <li>
          <a href="#" class="problem-edit">Problem title 13 </a>
          <a href="#" class="draggable">handle</a>
        </li>
        <li>
          <a href="#" class="problem-edit"> Problem title 14</a>
          <a href="#" class="draggable">handle</a>
        </li>
        <li>
          <a href="" class="video-edit">Video 3</a>
          <a href="#" class="draggable">handle</a>
        </li>
        <%include file="module-dropdown.html"/>
      </ul>
    </li>
  </ol>

  <section class="new-section">
    <a href="#" class="wip" >+ Add New Section</a>

    <section class="hidden">
      <form>
        <ul>
          <li>
            <input type="text" name="" id="" placeholder="Section title" />
          </li>
          <li>
            <select>
              <option>Blank</option>
              <option>6.002x</option>
              <option>6.00x</option>
            </select>
          </li>
          <li>
            <input type="submit" value="Save and edit week" class="edit-week" />

            <div>
              <a href="#" class="close">Save without edit</a>
              <a href="#" class="close">cancel</a>
            </div>
          </li>
        </ul>
      </form>
    </section>
  </section>
</section>

