<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Report</title>

  <!-- Dependencies -->
  <link rel="stylesheet" href="../../assets/css/bootstrap.min.css">
  <link href="../../assets/css/font-awesome.min.css" rel="stylesheet">
  <link href="../../assets/css/dataTables.bootstrap.min.css" rel="stylesheet">
  <link href="../../assets/css/responsive.dataTables.min.css" rel="stylesheet">
  <link href="../../assets/css/scenario_index.css" rel="stylesheet">
</head>

<body>

  <div class="main_conainer">

    <div class="page-title">
      <div class="tags">

      </div>
      <h1>Feature:
        <small>
          <%= feature.name %>
        </small>
      </h1>
      <p></p>
    </div>

    <div class="clearfix"></div>

    <div class="row">
      <div class="col-md-12 col-xs-12">
        <div class="x_panel fixed_height_320">
          <div class="x_title">
            <h2>Scenarios</h2>
            <div class="clearfix"></div>
          </div>
          <div class="x_content">
            <table class="chart">
              <tr>
                <th>
                  <p>Chart</p>
                </th>
                <th>
                  <div class="col-lg-7 col-md-7 col-sm-7 col-xs-7">
                    <p class="">Status</p>
                  </div>
                  <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
                    <p class="">Progress</p>
                  </div>
                </th>
              </tr>
              <tr>
                <td class="chart">
                  <canvas id="scenario-chart"></canvas>
                  <div class="total">
                    <%= feature.elements.length %>
                  </div>
                </td>
                <td>
                  <table class="tile_info">
                    <tr>
                      <td>
                        <p data-toggle="tooltip" data-placement="left" title="Scenario passed">
                          <i class="fa fa-check-circle passed-color"></i>
                          Passed
                        </p>
                      </td>
                      <td class="percentage">
                        <%= featurePassedScenariosPercentage(feature).toFixed(2) %>%
                      </tr>
                    </td>
                    <tr>
                      <td>
                        <p data-toggle="tooltip" data-placement="left" title="Scenario failed">
                          <i class="fa fa-exclamation-circle failed-color"></i>
                          Failed
                        </p>
                      </td>
                      <td class="percentage">
                        <%= featureFailedScenariosPercentage(feature).toFixed(2) %>%
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
              <tr>
                <th> Total duration:</th>
              <tr>
                <td>
                  <%= format_duration(feature_duration(feature)) %>
                </td>
              </tr>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
    <% for(var i = 0; i < feature.elements.length; i++) { %>
      <div class="row">
        <div class="col-md-12 col-sm-12 col-xs-12">
          <div class="x_panel" style="height: auto;">
            <div class="x_title">
              <h2>Scenario: <small>
                  <%= feature.elements[i].name %>
                </small></h2>
              <div class="clearfix"></div>
            </div>
            <div class="x_content">
              <div class="scenario-step-container">
              </div>
              <% for(var j = 0; j < feature.elements[i].steps.length; j++) { %>
                <% let step = feature.elements[i].steps[j] %>
                <div class="scenario-step-container">
                  <% if(step.result.status == PASSED) { %>
                    <div class="label" title="Success">
                      <i class="fa fa-check-circle fa-2x passed-color" data-toggle="tooltip" data-placement="top"
                        title="Step passed"></i>
                    </div>
                  <% } else { %>
                    <div class="label" data-toggle="tooltip" data-placement="top" title="Step failed">
                      <i class="fa fa-exclamation-circle fa-2x failed-color"></i>
                    </div>
                  <% } %>
                  <div class="text">
                    <span class="keyword highlight">
                      <%= step.keyword %>
                    </span>
                    <%= step.name %>
                    <span class="duration">
                      <%= format_duration(step.result.duration) %>
                    </span>
                    <% if(step.result.error_message) { %>
                      <a href='#error<%= step.line %>-error' data-toggle="collapse">+ Show Error</a>
                      <div id='error<%= step.line %>-error' class="scenario-step-collapse collapse">
                      <pre class=info><%= step.result.error_message %></pre>
                      </div>
                    <% } %>
                  </div>
                </div>
              <% } %>
            </div>
          </div>
        </div>
      </div> <!-- Closes scenario row -->

      <div class="row">
        <div class="col-md-12 col-sm-12 col-xs-12">
          <div class="x_panel" style="height: auto;">
            <div class="x_title">
              <h2>Screenshots</h2>
              <div class="clearfix"></div>
            </div>
            <div class="x_content">
              <div class="container">
                <div class="row">
                  <% for(var j=0; j < feature.elements[i].steps.length; j++) { %>
                    <% let step = feature.elements[i].steps[j] %>
                    <div class="col-md-2">
                      <div class="step_title">
                        <i class="fa fa-arrow-right step_title_icon"></i>
                        <%= step.keyword %>
                          <%= step.name %>
                      </div>
                      <% if(step.embeddings && step.embeddings.length > 0) { %>
                        <% let step_image = step.embeddings[0].data %>
                        <img src='<%= `data:image/png;base64,${step_image}` %>' alt="" class="img-responsive step_image" onclick='<%= `openImageNewTab(\"${step_image}\")` %>'>
                      <% } else { %>
                        <div class="not_available">NO IMAGE AVAILABLE</div>
                      <% } %>
                    </div>
                  <% } %>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div> <!-- Closes screenshots row -->
    <% } %>
    <!-- Aca va lo otro -->
  </div>

  <script src="../../assets/js/jquery-3.2.1.min.js"></script>
  <script src="../../assets/js/bootstrap.min.js"></script>
  <script src="../../assets/js/jquery.dataTables.min.js"></script>
  <script src="../../assets/js/dataTables.bootstrap.min.js"></script>
  <script src="../../assets/js/dataTables.responsive.min.js"></script>
  <script src="../../assets/js/Chart.min.js"></script>
  <script>
    function openImageNewTab(imageData) {
      var im = new Image();
      im.src = "data:image/png;base64," + imageData
      var w = window.open("", '_blank');
      w.document.write(im.outerHTML);
      w.document.close();
    }

    $(document).ready(function () {
      passed_scenarios = parseInt("<%= passedScenarios(feature).length %>")
      failed_scenarios = parseInt("<%= failedScenarios(feature).length %>")

      scenarios_data = [passed_scenarios, failed_scenarios];
      var scenarioOptions = {
        legend: false,
        responsive: false
      };

      new Chart(document.getElementById("scenario-chart"), {
        type: 'doughnut',
        tooltipFillColor: "rgba(51, 51, 51, 0.55)",
        data: {
          labels: [
            "Passed",
            "Failed"
          ],
          datasets: [{
            data: scenarios_data,
            backgroundColor: [
              "#26B99A",
              "#E74C3C"
            ]
          }]
        },
        options: scenarioOptions
      });

      $('body').tooltip({
        selector: '[data-toggle="tooltip"]'
      });
    });
  </script>
</body>

</html>