group-configuration-details.underscore

<div class="collection-details wrapper-group-configuration">
    <header class="collection-header group-configuration-header">
        <h3 class="title group-configuration-title">
            <a href="#" class="toggle group-toggle <% if(showGroups){ print('hide'); } else { print('show'); } %>-groups">
                <span class="ui-toggle-expansion icon fa fa-caret-<% if(showGroups){ print('down'); } else { print('right'); } %>"></span>
                <%- name %>
            </a>
        </h3>
    </header>

    <ol class="collection-info group-configuration-info group-configuration-info-<% if(showGroups){ print('block'); } else { print('inline'); } %>">
      <% if (!_.isUndefined(id)) { %>
        <li class="group-configuration-id"
            ><span class="group-configuration-label"><%- gettext('ID') %>: </span
            ><span class="group-configuration-value"><%- id %></span
        ></li>
      <% } %>
      <% if (showGroups) { %>
        <li class="collection-description group-configuration-description">
            <%- description %>
        </li>
      <% } else { %>
        <li class="group-configuration-groups-count">
            <%- groupsCountMessage %>
        </li>
        <li class="group-configuration-usage-count">
            <%- usageCountMessage %>
        </li>
      <% } %>
    </ol>

    <% if(showGroups) { %>
      <% allocation = Math.floor(100 / groups.length) %>
      <ol class="collection-items groups groups-<%= index %>">
        <% groups.each(function(group, groupIndex) { %>
          <li class="item group group-<%= groupIndex %>">
            <span class="name group-name"><%- group.get('name') %></span>
            <span class="meta group-allocation"><%- allocation %>%</span>
          </li>
        <% }) %>
      </ol>
    <% } %>
    <ul class="actions group-configuration-actions">
        <li class="action action-edit">
            <button class="edit"><span class="icon fa fa-pencil" aria-hidden="true"></span> <%- gettext("Edit") %></button>
        </li>
        <% if (_.isEmpty(usage)) { %>
            <li class="action action-delete wrapper-delete-button">
                <button class="delete action-icon" title="<%- gettext('Delete') %>"><span class="icon fa fa-trash-o" aria-hidden="true"></span></button>
            </li>
        <% } else { %>
            <li class="action action-delete wrapper-delete-button" data-tooltip="<%- gettext('Cannot delete when in use by an experiment') %>">
                <button class="delete action-icon is-disabled" disabled="disabled" title="<%- gettext('Delete') %>"><span class="icon fa fa-trash-o" aria-hidden="true"></span></button>
            </li>
        <% } %>
    </ul>
</div>
<% if(showGroups) { %>
  <div class="collection-references wrapper-group-configuration-usages">
    <% if (!_.isEmpty(usage)) { %>
      <h4 class="intro group-configuration-usage-text"><%- gettext('This Group Configuration is used in:') %></h4>
      <ol class="usage group-configuration-usage">
        <% _.each(usage, function(unit) { %>
          <li class="usage-unit group-configuration-usage-unit">
            <p><a href=<%- unit.url %> ><%- unit.label %></a></p>
            <% if (unit.validation) { %>
              <p>
                <% if (unit.validation.type === 'warning') { %>
                  <span class="icon fa fa-warning" aria-hidden="true"></span>
                <% } else if (unit.validation.type === 'error') { %>
                  <span class="icon fa fa-exclamation-circle" aria-hidden="true"></span>
                <% } %>
                <span class="usage-validation-message group-configuration-validation-message">
                  <%- unit.validation.text %>
                </span>
              </p>
            <% } %>
          </li>
        <% }) %>
      </ol>
    <% } else { %>
      <p class="group-configuration-usage-text">
          <%= HtmlUtils.interpolateHtml(
              gettext('This Group Configuration is not in use. Start by adding a content experiment to any Unit via the {linkStart}Course Outline{linkEnd}.'),
              {
                  linkStart: HtmlUtils.interpolateHtml(
                      HtmlUtils.HTML('<a href="{courseOutlineUrl}" title="{courseOutlineTitle}">'),
                      { courseOutlineUrl: courseOutlineUrl, courseOutlineTitle: gettext('Course Outline')}),
                  linkEnd: HtmlUtils.HTML('</a>')
              })
          %>
      </p>
    <% } %>
  </div>
<% } %>