<div id="sequence_${element_id}" class="sequence" data-id="${item_id}" data-position="${position}" data-course_modx_root="/course/modx" >
  <nav aria-label="Section Navigation" class="sequence-nav">
    <ul class="sequence-nav-buttons">
      <li class="prev"><a href="#">Previous</a></li>
    </ul>

    <div class="sequence-list-wrapper">
      <ol id="sequence-list">
        % for idx, item in enumerate(items):
        ## TODO (vshnayder): add item.progress_detail either to the title or somewhere else.
        ## Make sure it gets updated after ajax calls.
        ## implementation note: will need to figure out how to handle combining detail
        ## statuses of multiple modules in js.
        <li>
        <a class="seq_${item['type']} inactive progress-${item['progress_status']}"
           data-id="${item['id']}"
           data-element="${idx+1}"
           href="javascript:void(0);">
            <p>${item['title']}<span class="sr">, ${item['type']}</span></p>
          </a>
        </li>
        % endfor
      </ol>
    </div>

    <ul class="sequence-nav-buttons">
      <li class="next"><a href="#">Next</a></li>
    </ul>
  </nav>

  % for item in items:
  <div class="seq_contents tex2jax_ignore asciimath2jax_ignore">${item['content'] | h}</div>
  % endfor
  <div id="seq_content"></div>

  <nav class="sequence-bottom">
    <ul aria-label="Section Navigation" class="sequence-nav-buttons">
      <li class="prev"><a href="#">Previous</a></li>
      <li class="next"><a href="#">Next</a></li>
    </ul>
  </nav>
</div>



<script type="text/javascript">
  var sequenceNav;
  $(document).ready(function() {
    sequenceNav = new SequenceNav($('.sequence-nav'));
  });
</script>
