<!DOCTYPE html>
<html lang="en">

<head>
    <link href="https://img.icons8.com/cotton/64/000000/time-machine.png" rel="shortcut icon" type="image/x-icon" />
    <title>Pytest Historic - Compare Executions</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />
    <link href="https://cdn.datatables.net/buttons/1.5.2/css/buttons.dataTables.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <!-- Bootstrap core Datatable-->
    <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js" type="text/javascript"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js" type="text/javascript"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.html5.min.js" type="text/javascript"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.print.min.js" type="text/javascript"></script>
    <script src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.colVis.min.js" type="text/javascript"></script>
    <style>
        .tabcontent {
            padding: 60px 12px;
        }

        body {
            font-family: Arial, Helvetica, sans-serif;
        }

        * {
            box-sizing: border-box;
        }

        .form-inline {
            display: flex;
            flex-flow: row wrap;
            align-items: center;
        }

        .form-inline label {
            margin: 5px 10px 5px 0;
        }

        .form-inline input {
            vertical-align: middle;
            margin: 5px 10px 5px 0;
            padding: 10px;
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 30px
        }

        .form-inline button {
            padding: 10px 20px;
            background-color: black;
            border: 1px solid #ddd;
            color: white;
            cursor: pointer;
            border-radius: 30px;
        }

        /* .form-inline button:hover {
            background-color: silver;
        } */

        @media (max-width: 800px) {
            .form-inline input {
                margin: 10px 0;
            }

            .form-inline {
                flex-direction: column;
                align-items: stretch;
            }

            form.example::after {
                content: "";
                clear: both;
                display: table;
            }

            th,
            td {
                text-align: center;
            }
    </style>

</head>

<body>
    <script>
        window.onload = function () {
            executeDataTable();
        };
    </script>

    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/home">Pytest Historic</a>
            </div>
            <div class="collapse navbar-collapse" id="myNavbar">
                <ul class="nav navbar-nav">
                    <li class="tablinks"><a href="./dashboard"><i class="fa fa-dashboard"></i> Dashboard</a></li>
                    <li class="tablinks"><a href="./ehistoric"><i class="fa fa-history"></i> History</a></li>
                    <li class="tablinks"><a href="./tmetrics"><i class="fa fa-flask"></i> Metrics</a></li>
                    <li class="tablinks"><a href="./flaky"><i class="fa fa-bolt"></i> Flaky</a></li>
                    <li class="tablinks"><a href="./search"><i class="fa fa-search"></i> Search</a></li>
                    <li class="tablinks active" onclick="executeDataTable()"><a href="./compare"><i
                                class="fa fa-sliders"></i> Compare</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="tabcontent">
        <div class="d-flex flex-column flex-md-row align-items-center p-1 mb-3 bg-light border-bottom shadow-sm">
            <h3 class="my-0 mr-md-auto font-weight-normal" style="text-transform: capitalize;">{{db_name}} - Compare
                Executions</h3>
        </div>
        <hr>
        <form class="form-inline" method="post" action="">
            <label for="id1">Execution ID:</label>
            <input type="text" id="eid_one" placeholder="Enter EID" name="eid_one" onkeypress='validate(event)'>
            <label for="id2">Execution ID:</label>
            <input type="text" id="eid_two" placeholder="Enter EID" name="eid_two" onkeypress='validate(event)'>
            <button id="submit" type="submit" disabled="disabled">Submit</button>
        </form>
        <hr>
        <table class="table table-striped" id="search">
            <thead>
				<tr>
					<th rowspan="2" style="text-align:center">Test Case</th>
					<th colspan="3" style="text-align:center" title="Click to view {{fb}} execution info"><a href="./tmetrics/{{fb}}" target="_blank">EID {{fb}}</a></th>
					<th colspan="3" style="text-align:center" title="Click to view {{sb}} execution info"><a href="./tmetrics/{{sb}}" target="_blank">EID {{sb}}</a></th>
				</tr>
                <tr>
                    <th>Status</th>
                    <th>Time (s)</th>
                    <th>Error</th>
                    <th>Status</th>
                    <th>Time (s)</th>
                    <th>Error</th>
                </tr>
            </thead>
            <tbody>
                {% for item in data %}
                <tr>
                    <td style="text-align:left;word-wrap: break-word;max-width: 250px; white-space: normal;"> {{item[1]}}</td>

                    {% if item[2] %}
                        {% if (item[2] == "PASS") %}
                            <td style="color: green;"> {{item[2]}}</td>
                        {% elif (item[2] == "FAIL") %}
                            <td style="color: red;"> {{item[2]}}</td>
                        {% else %}
                            <td style="color: brown;"> {{item[2]}}</td>
                        {% endif %}
                    {% else %}
                        <td style="color: rgba(240, 188, 18, 0.664)">N/A</td>
                    {% endif %}

                    <td style="text-align:left;"> {{item[3]}}</td>
                    <td style="text-align:left;word-wrap: break-word;max-width: 250px; white-space: normal;"> {{item[4]}}</td>

                    {% if item[5] %}
                        {% if (item[5] == "PASS") %}
                            <td style="color: green;"> {{item[5]}}</td>
                        {% elif (item[5] == "FAIL") %}
                            <td style="color: red;"> {{item[5]}}</td>
                        {% else %}
                            <td style="color: brown;"> {{item[5]}}</td>
                        {% endif %}
                    {% else %}
                        <td style="color: rgba(240, 188, 18, 0.664)">N/A</td>
                    {% endif %}

                    <td style="text-align:left;"> {{item[6]}}</td>
                    <td style="text-align:left;word-wrap: break-word;max-width: 250px; white-space: normal;"> {{item[7]}}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    <script>
        function executeDataTable() {
            var fileTitle = "Search";
            $('#search').DataTable(
                {
                    retrieve: true,
                    dom: 'l<".margin" B>frtip',
                    buttons: [
                        {
                            extend: 'copyHtml5',
                            text: '<i class="fa fa-files-o"></i>',
                            titleAttr: 'Copy',
                            exportOptions: {
                                columns: ':visible'
                            }
                        },
                        {
                            extend: 'csvHtml5',
                            text: '<i class="fa fa-file-text-o"></i>',
                            titleAttr: 'CSV',
                            filename: function () {
                                return fileTitle + '-' + new Date().toLocaleString();
                            },
                            exportOptions: {
                                columns: ':visible'
                            }
                        },
                        {
                            extend: 'excelHtml5',
                            text: '<i class="fa fa-file-excel-o"></i>',
                            titleAttr: 'Excel',
                            filename: function () {
                                return fileTitle + '-' + new Date().toLocaleString();
                            },
                            exportOptions: {
                                columns: ':visible'
                            }
                        },
                        {
                            extend: 'print',
                            text: '<i class="fa fa-print"></i>',
                            titleAttr: 'Print',
                            exportOptions: {
                                columns: ':visible',
                                alignment: 'left',
                            }
                        },
                        {
                            extend: 'colvis',
                            collectionLayout: 'fixed two-column',
                            text: '<i class="fa fa-low-vision"></i>',
                            titleAttr: 'Hide Column',
                            exportOptions: {
                                columns: ':visible'
                            },
                            postfixButtons: ['colvisRestore']
                        },
                    ],
                    columnDefs: [{
                        visible: false,
                    }]
                }
            );
        }
    </script>
    <script>
        var submitButton = document.getElementById("submit");
        var textField = document.getElementById("eid_one");
        var textField_two = document.getElementById("eid_two");

        textField.onkeyup = function () {
            if (textField.value == "" & textField_two.value == "") {
                submitButton.disabled = true;
            } else {
                submitButton.disabled = false;
            }
        }
    </script>
    <script>
        function validate(evt) {
            var theEvent = evt || window.event;

            // Handle paste
            if (theEvent.type === 'paste') {
                key = event.clipboardData.getData('text/plain');
            } else {
            // Handle key press
                var key = theEvent.keyCode || theEvent.which;
                key = String.fromCharCode(key);
            }
            var regex = /[0-9]|\./;
            if( !regex.test(key) ) {
                theEvent.returnValue = false;
                if(theEvent.preventDefault) theEvent.preventDefault();
            }
        }
    </script>
</body>

</html>