<section class="sequence-edit">
  <section class="filters wip">
    <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 class="search">
        <input type="search" name="" id="" value="" placeholder="Search" />
      </li>
    </ul>
  </section>

  <div class="content">
    <section class="modules">
      <ol>
        <li>
          <ol id="sortable">
            % for child in module.get_children():
            <li class="${module.category}">
              <a href="#" class="module-edit"
                 data-id="${child.location.url()}"
                 data-type="${child.js_module_name}"
                 data-preview-type="${child.module_class.js_module_name}">${child.url_name}</a>
              <a href="#" class="draggable">handle</a>
            </li>
            %endfor
          </ol>
        </li>

      </ol>
    </section>

    <section class="scratch-pad wip">
      <ol>
        <li class="new-module">
          <%include file="new-module.html"/>
        </li>
        <li>
          <header>
            <h2>Section Scratch</h2>
          </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>
          </ul>
        </li>
        <li>
          <header>
            <h2>Course Scratch</h2>
          </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>
          </ul>
        </li>
      </ol>
    </section>
  </div>
</section>

