<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><%= pageTitle %></title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
          integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

    <!-- Custom Theme Style -->
    <style type="text/css">
        <%= styles %>
        <%= customStyle %>
    </style>
</head>
<body>

    <nav class="navbar">
        <div class="container-fluid">
            <p class="navbar-text"><%= reportName %></p>
            <div class="navbar-header">
                <a class="navbar-brand" href="#" onclick="history.back(-1)">
                    <i class="fa fa-arrow-left"><span>Back</span></i>
                </a>
            </div>
            <p class="navbar-text">Feature:
                <small><%= feature.name %></small>
            </p>
        </div>
    </nav>

    <div class="main_conainer">

        <div class="page-title">
            <div class="tags">
                <% if (feature.tags) { %>
                <% var amount = feature.tags.length; %>
                <% if (amount > 0 ){ %>
                <i class="fa fa-tag<% if(amount > 1 ) {%>s<% } %> fa-lg"></i>
                <% _.each(feature.tags, (tag) => {%><span class="tag"><%= tag.name %></span><%});%>
                <% } %>
                <% } %>
            </div>
            <h1>Feature:
                <small><%= feature.name %></small>
            </h1>
            <p><%= feature.description %></p>
        </div>

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

        <div class="row">
            <div class="col-md-8 col-xs-12">
                <div class="x_panel fixed_height_320">
                    <%= featureScenariosOverviewChart %>
                </div>
            </div>
            <div class="col-md-4 col-xs-12">
                <div class="x_panel fixed_height_320">
                    <%= featureMetadataOverview %>
                </div>
            </div>
        </div>

        <div class="row">
            <%= scenarioTemplate %>
        </div>
    </div>

    <% if (!pageFooter) { %>
        <div class="created-by">
            <p>Created by wswebcreation. Find me on:</p>
            <a href="http://www.wswebcreation.nl/" target="_blank"><i class="fa fa-rss-square fa-2x"></i></a>
            <a href="https://github.com/wswebcreation/" target="_blank"><i class="fa fa-github-square fa-2x"></i></a>
            <a href="http://nl.linkedin.com/in/wimselles" target="_blank"><i class="fa fa-linkedin-square fa-2x"></i></a>
            <a href="http://stackoverflow.com/users/5911978/wswebcreation" target="_blank"><i class="fa fa-stack-overflow fa-2x"></i></a>
        </div>
    <% } else { %>
        <%= pageFooter %>
    <% } %>

    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
            crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <!-- Chart.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>

    <!-- Custom -->
    <script>
        $(document).ready(function () {

            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",
                        "Pending",
                        "Skipped",
                        "Ambiguous",
                        "Not defined"
                    ],
                    datasets: [{
                        data: [
                            <%= feature.scenarios.passed %>,
                            <%= feature.scenarios.failed %>,
                            <%= feature.scenarios.pending %>,
                            <%= feature.scenarios.skipped %>,
                            <%= feature.scenarios.ambiguous %>,
                            <%= feature.scenarios.notdefined %>
                        ],
                        backgroundColor: [
                            "#26B99A",
                            "#E74C3C",
                            "#FFD119",
                            "#3498DB",
                            "#b73122",
                            "#F39C12"
                        ]
                    }]
                },
                options: scenarioOptions
            });

            <%= genericScript %>
        });
    </script>
</body>
</html>
