<section class="sequence-edit">
  <section class="filters">
    <ul>
      <li>
        <label for="">Sort by</label>
        <select>
          <option value="">Recently Modified</option>
        </select>
      </li>

      <li>
        <label for="">Display</label>
        <select>
          <option value="">All content</option>
        </select>
      </li>
      <li>
        <select>
          <option value="">Internal Only</option>
        </select>
      </li>

      <li class="advanced">
        <a href="#">Advanced filters</a>
      </li>

      <li>
        <input type="search" name="" id="" value="" />
      </li>
    </ul>
  </section>

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

      </ol>
    </section>

    <section class="scratch-pad">
      <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>

