<!DOCTYPE html>
<html>
<head>
  <%- include('/headers') %>
  <%- include('/macros/page/title', {
    reportName: 'Failures Overview'
  }) %>
</head>

<body>
<%- include('/macros/page/navigation', {
  active_tab: 'failures'
}) %>
<%- include('/macros/page/reportInfo') %>
<%- include('/macros/page/lead', {
  page_title: 'Failures Overview',
  page_description: 'The following summary displays scenarios that failed.'
}) %>

<% if (Array.isArray(failures) && failures.length > 0) { %>
  <%- include('/macros/report/expandAllButtons') %>
<% } %>

<div class="container-fluid" id="report">
  <div class="row">
    <div class="col-md-10 col-md-offset-1">

      <% if (!Array.isArray(failures) || failures.length === 0) { %>
        <p>You have no failed scenarios in your Cucumber report</p>
      <% } else { %>
        <div class="elements">
          <%
          let index = 0;
          for (const element of failures) {
          %>
            <%- include('/macros/json/element', {
              element,
              linkToFeature: true,
              index
            }) %>
          <%
          index++;
        }
        %>
        </div>
      <% } %>

    </div>
  </div>
</div>

<% if (Array.isArray(failures)) { %>
  <%- include('/macros/report/expandAllButtons') %>
<% } %>
<br/>
<%- include('/footer') %>
</body>
</html>
