<% var allChecked = itemsChecked == items.length; %>
<section
    <% if (allChecked) { %>
    class="course-checklist is-completed"
    <% } else { %>
    class="course-checklist"
    <% } %>
    id="<%= 'course-checklist' + checklistIndex %>">
    <span class="viz viz-checklist-status"><span class="viz value viz-checklist-status-value" style="width: <%= percentChecked %>%;">
        <%= _.template(
                // Translators: The {pct_sign} here represents the percent sign, i.e., '%'
                // in many languages. This is used to avoid Transifex's misinterpreting of
                // '% o'. The percent sign is also translatable as a standalone string.
                gettext("{number}{pct_sign} of checklists completed"),
                // Translators: This is the percent sign. It will be used to represent a
				// percent value out of 100, e.g. "58%" means "58/100".
                {number: '<span class="int">' + percentChecked + '</span>', pct_sign: gettext('%')},
                {interpolate: /\{(.+?)\}/g}
            )
        %>
    </span></span>
    <header>
        <h3 class="checklist-title title-2 is-selectable" title="Collapse/Expand this Checklist">
            <i class="icon fa fa-caret-down ui-toggle-expansion"></i>
            <%= checklistShortDescription %></h3>
              <span class="checklist-status status">
                <%= gettext("Tasks Completed:") %> <span class="status-count"><%= itemsChecked %></span>/<span class="status-amount"><%= items.length %></span>
                <i class="icon fa fa-check-square-o"></i>
              </span>
    </header>

    <ul class="list list-tasks">
        <% var taskIndex = 0; %>
        <% _.each(items, function(item) { %>
            <% var checked = item['is_checked']; %>
            <li
            <% if (checked) { %>
            class="task is-completed"
            <% } else { %>
            class="task"
            <% } %>
            >
                <% var taskId = 'course-checklist' + checklistIndex + '-task' + taskIndex; %>
                <input type="checkbox" class="task-input" data-checklist="<%= checklistIndex %>" data-task="<%= taskIndex %>"
                name="<%= taskId %>" id="<%= taskId %>"
                <% if (checked) { %>
                checked="checked"
                <% } %>
                >
                <label class="task-details" for="<%= taskId %>">
                    <h4 class="task-name title title-3"><%= item['short_description'] %></h4>
                    <p class="task-description"><%= item['long_description'] %></p>
                </label>

                <% if (item['action_text'] !== '' && item['action_url'] !== '') { %>
                <ul class="list-actions task-actions">
                    <li class="action-item">
                        <a href="<%= item['action_url'] %>" class="action action-primary"
                        <% if (item['action_external']) { %>
                        rel="external" title="<%= gettext("This link will open in a new browser window/tab") %>"
                        <% } %>
                        ><%= item['action_text'] %></a>
                    </li>
                </ul>
                <% } %>
            </li>

        <% taskIndex+=1; }) %>

    </ul>
</section>