schedule.underscore

  <div align="right">
    <button id="ccx_expand_all_btn" class="ccx-button-link">
      <span class="fa fa-expand" aria-hidden="true"></span> <%- gettext('Expand All') %>
    </button>
    <button id="ccx_collapse_all_btn" class="ccx-button-link">
      <span class="fa fa-compress" aria-hidden="true"></span> <%- 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">
          <span class="fa fa-remove" aria-hidden="true"></span> <%- 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">
              <span class="fa fa-caret-right" aria-hidden="true"></span>
              <span class="sr">
                <%- interpolate(gettext('toggle chapter %(displayName)s'),
                  {displayName: chapter.display_name}, true) %>
              </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 no-link">
            <%- gettext('N/A') %>
          </td>
          <td><button class="remove-unit ccx-button-link" aria-label="<%- interpolate(
                gettext('Remove chapter %(chapterDisplayName)s'), {chapterDisplayName: chapter.display_name}, true) %>">
            <span class="fa fa-remove" aria-hidden="true"></span> <%- 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">
                 <span class="fa fa-caret-right" aria-hidden="true"></span>
                 <span class="sr">
                     <%- interpolate(gettext('toggle subsection %(displayName)s'),
                      {displayName: child.display_name}, true) %>
                 </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="<%- interpolate(
                gettext('Remove subsection %(subsectionDisplayName)s'), {subsectionDisplayName: child.display_name}, true) %>">
              <span class="fa fa-remove" aria-hidden="true"></span> <%- gettext('remove') %>
            </button></td>
          </tr>
          <% _.each(child.children, function(subchild) { %>
            <tr class="vertical" data-depth="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 no-link">
                <% if (subchild.start) { %>
                  <%- subchild.start %>
                <% } else { %>
                  <%
                  // Translators: Unit's aka vertical start date is set to Unscheduled when user has not set start date on corresponding subsection aka sequential.
                  %>
                  <%- gettext('Unscheduled') %>
                <% } %>
              </td>
              <td class="date due-date no-link">
                <% if (subchild.due) { %>
                  <%- subchild.due %>
                <% } else { %>
                  <%
                  // Translators: Unit's aka vertical due date is set to Unscheduled when user has not set due date on corresponding subsection aka sequential.
                  %>
                  <%- gettext('Unscheduled') %>
                <% } %>
              </td>
              <td>
                <button class="remove-unit ccx-button-link" aria-label="<%- interpolate(
                    gettext('Remove unit %(unitName)s'), {unitName: subchild.display_name}, true) %>">
                  <span class="fa fa-remove" aria-hidden="true"></span> <%- gettext('remove') %>
                </button>
              </td>
          </tr>
          <% }); %>
        <% }); %>
      <% }); %>
    </tbody>
  </table>