accordion.html

<%!
    from django.core.urlresolvers import reverse
    from util.date_utils import get_time_display
    from django.utils.translation import ugettext as _
    from django.conf import settings
%>

<%def name="make_chapter(chapter)">
  <div class="chapter">
      <%
          if chapter.get('active'):
              aria_label = _('{chapter}, current chapter').format(chapter=chapter['display_name'])
              active_class = ' class="active"'
          else:
              aria_label = chapter['display_name']
              active_class = ''
      %>
      <h3 ${active_class} aria-label="${aria_label}">
        <a href="#">
          ${chapter['display_name']}
        </a>
      </h3>

    <ul>
      % for section in chapter['sections']:
          <li class="${'active' if 'active' in section and section['active'] else ''} ${'graded'  if 'graded' in section and section['graded'] else ''}">
            <a href="${reverse('courseware_section', args=[course_id, chapter['url_name'], section['url_name']])}">
              <p>${section['display_name']} ${'<span class="sr">, current section</span>' if 'active' in section and section['active'] else ''}</p>
              <%
                if section.get('due') is None:
                    due_date = ''
                else:
                    formatted_string = get_time_display(section['due'], due_date_display_format, coerce_tz=settings.TIME_ZONE_DISPLAYED_FOR_DEADLINES)
                    due_date = '' if len(formatted_string)==0 else _('due {date}').format(date=formatted_string)
              %>
              <p class="subtitle">${section['format']} ${due_date}</p>

              % if 'graded' in section and section['graded']:
                  <img src="/static/images/graded.png" alt="Graded Section">
              % endif
            </a>
          </li>
      % endfor
    </ul>
  </div>
</%def>

% for chapter in toc:
    ${make_chapter(chapter)}
% endfor