cucumber-html-reporter/templates/foundation/features.html

Generates Cucumber HTML reports in three different themes

<% _.each(suite.features, function(feature, featureIndex) { %>
<div class="row">
  <div class="large-12 columns">

    <h3 class="subheader"><span class="highlight"><%= feature.keyword %>: </span><%= feature.name %></h3>
    <% if (feature.description) { %><p class="subheader"><%= feature.description.replace(/\n/g, '<br />') %></p><% } %>
    <br />
    <% _.each(feature.elements, function(element, scenarioIndex) { %>
      <div class="section-container accordion" data-section="accordion">
        <section>
          <p class="title accordion-title" data-section-title><a href="#"><span><%= element.keyword %>: </span><%= element.name %>
          <a>
            <% if(_.some(element.steps, function(step){ return step.result && step.result.status === 'failed'; })) {  %>
              <span class="alert label right">Failed</span>
            <% } else if(_.some(element.steps, function(step){ return step.result && step.result.status === 'ambiguous' })) { %>
              <span class="label right">Ambiguous</span>
            <% } else if(_.some(element.steps, function(step){ return step.result && step.result.status === 'undefined'; })) {  %>
              <span class="label right">Undefined</span>
            <% } else if(_.some(element.steps, function(step){ return step.result && step.result.status === 'pending'; })) {  %>
               <span class="label right">Pending</span>
            <% } else if(_.every(element.steps, function(step){ return step.result && step.result.status === 'passed'; })) { %>
              <span class="success label right">Passed</span>
            <% } %>
          </a>
          </p>

          <div class="content" data-section-content>
            <% _.each(element.steps, function(step, stepIndex) { %>

              <p class="subheader">
                <span class="text"><span class="keyword highlight"><%= step.keyword %></span> <%- step.name %></span>
		<% if(step.result) { %>
                <small>
                <% if(step.result.status === 'failed') { %>
                  <span class="alert label right">Failed</span>
                <% } else if(step.result.status === 'ambiguous') { %>
                  <span class="label right">Ambiguous</span>
                <% } else if(step.result.status === 'skipped') { %>
                  <span class="label right">Skipped</span>
                <% } else if(step.result.status === 'undefined') { %>
                  <span class="label right">Undefined</span>
                <% } else if(step.result.status === 'pending') { %>
                  <span class="label right">Pending</span>
                <% } else { %>
                  <span class="success label right">Passed</span>
                <% } %>
                </small>
		<% } %>

        <% if (step.text) { %>
             <a href="#info<%= featureIndex %>_<%= scenarioIndex %><%= stepIndex %>" data-toggle="collapse">+ Show Info</a>
             <div id="info<%= featureIndex %>_<%= scenarioIndex %><%= stepIndex %>" class="collapse">
               <%= step.text %>
             </div>
        <% } %>

		 <% if (step.image) { %>
                 <a class="toggle" href="#">Screenshot -</a>
                  <a class="screenshot" href="<%= step.image %>">
                      <img class="screenshot" style="height:100%;width:100%" id="my_images" src="<%= step.image %>"/>
                   </a>
          <% } %>
              </p>

              <% if (step.result && step.result.error_message) { %>
                <span class="text"><%= step.result.error_message %></span>
              <% } %>

            <% }); %>
          </div>
        </section>
      </div>
    <% }); %>
    <br />
    <hr />
  </div>
</div>
<% }); %>