<div align="right">
    <button id="ccx_expand_all_btn" class="ccx-button-link">
      <i class="fa fa-expand" aria-hidden="true"></i> <%- gettext('Expand All') %>
    </button>
    <button id="ccx_collapse_all_btn" class="ccx-button-link">
      <i class="fa fa-compress" aria-hidden="true"></i> <%- gettext('Collapse All') %>
    </button>
  </div>
  <br/>
  <table class="ccx-schedule">
    <thead>
      <tr>
        <th><%- gettext('Unit') %></th>
        <th><%- gettext('Start Date') %></th>
        <th><%- gettext('Due Date') %></th>
        <td><button id="remove-all" class="ccx-button-link">
          <i class="fa fa-remove"></i> <%- gettext('remove all') %>
        </button></td>
      </tr>
    </thead>
    <tbody>
      <% _.each(chapters, function(chapter) { %>
        <tr class="chapter collapsed" data-location="<%= chapter.location %>" data-depth="1">
          <td class="unit">
            <button class="toggle-collapse ccx-button-link" aria-expanded="false">
              <i class="fa fa-caret-right"></i>
              <span class="sr"><%- gettext('toggle chapter') %>&nbsp;<%= chapter.display_name %></span>
            </button>
            <span class="sr"><%- gettext('Section') %>&nbsp;</span><%= chapter.display_name %>
          </td>
          <td class="date start-date">
            <button class="ccx-button-link">
              <%= chapter.start %>
              <span class="sr"><%- gettext('Click to change') %></span>
            </button>
          </td>
          <td class="date due-date">
            <button class="ccx-button-link">
              <%= chapter.due %>
              <span class="sr"><%- gettext('Click to change') %></span>
            </button>
          </td>
          <td><button class="remove-unit ccx-button-link" aria-label="Remove chapter <%= chapter.display_name %>">
            <i class="fa fa-remove" aria-hidden="true"></i> <%- gettext('remove') %>
          </button></td>
        </tr>
        <% _.each(chapter.children, function(child) { %>
          <tr class="sequential collapsed" data-depth="2"
              data-location="<%= chapter.location %> <%= child.location %>">
            <td class="unit">
              <button class="toggle-collapse ccx-button-link" aria-expanded="false">
                 <i class="fa fa-caret-right"></i>
                 <span class="sr"><%- gettext('toggle subsection') %>&nbsp;<%= child.display_name %></span>
              </button>
              <span class="sr"><%- gettext('Subsection') %>&nbsp;</span><%= child.display_name %>
            </td>
            <td class="date start-date">
              <button class="ccx-button-link">
                <%= child.start %>
                <span class="sr"><%- gettext('Click to change') %></span>
              </button>
            </td>
            <td class="date due-date">
              <button class="ccx-button-link">
                <%= child.due %>
                <span class="sr"><%- gettext('Click to change') %></span>
              </button>
            </td>
            <td><button class="remove-unit ccx-button-link" aria-label="Remove subsection <%= child.display_name %>">
              <i class="fa fa-remove" aria-hidden="true"></i> <%- gettext('remove') %>
            </button></td>
          </tr>
          <% _.each(child.children, function(subchild) { %>
            <tr class="vertical" data-dapth="3"
                data-location="<%= chapter.location %> <%= child.location %> <%= subchild.location %>">
              <td class="unit">&nbsp;
                 <span class="sr"><%- gettext('Unit') %>&nbsp;</span>
                 <%= subchild.display_name %>
              </td>
              <td class="date start-date">
                <button class="ccx-button-link">
                  <%= subchild.start %>
                  <span class="sr"><%- gettext('Click to change') %></span>
                </button>
              </td>
              <td class="date due-date">
                <button class="ccx-button-link">
                  <%= subchild.due %>
                  <span class="sr"><%- gettext('Click to change') %></span>
                </button>
              </td>
              <td><button class="remove-unit ccx-button-link" aria-label="Remove unit <%= subchild.display_name %>">
                <i class="fa fa-remove" aria-hidden="true"></i> <%- gettext('remove') %>
              </button></td>
          <% }); %>
        <% }); %>
      <% }); %>
    </tbody>
  </table>