<!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 - Search</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;
        }

        .dt-buttons {
            margin-left: 5px;
        }

        .tablinks .active {
            background-color: #666;
            color: white;
        }

        form.example input[type=text] {
            padding: 8px;
            font-size: 14px;
            border: 1px solid grey;
            float: left;
            width: 80%;
            background: #f1f1f1;
            border-radius: 30px 0px 0px 30px;
        }

        form.example button {
            float: left;
            width: 10%;
            padding: 8px;
            background: #101010;
            color: white;
            font-size: 14px;
            border: 1px solid grey;
            border-left: none;
            cursor: pointer;
            border-radius: 0px 30px 30px 0px;
        }

        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 active" onclick="executeDataTable()"><a href="./search"><i class="fa fa-search"></i> Search</a></li>
                    <li class="tablinks"><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}} - Search</h3>
        </div>
        <hr>
        <form class="example" method="post" action="" style="margin:auto;max-width:600px">
            <input id="textField" type="text" placeholder="Search by Testcase Name / Execution ID / Status" name="search">
            <button id="submit" type="submit" disabled="disabled"><i class="fa fa-search"></i></button>
        </form>
        <hr>
        <table class="table table-striped" id="search">
            <thead>
                <tr>
                    <th>Execution ID</th>
                    <th>Suite - Test Case</th>
                    <th>Status</th>
                    <th>Time (s)</th>
                    <th>Error</th>
                    <th>Comment</th>
                </tr>
            </thead>
            <tbody>
                {% for item in data %}
                    <tr>
                        <td> {{item[1]}}</td>
                        <td style="text-align:left;"> {{item[2]}}</td>
                        {% if (item[3] == "PASS") %}
                            <td style="color: green;"> {{item[3]}}</td>
                        {% elif (item[3] == "FAIL") %}
                            <td style="color: red;"> {{item[3]}}</td>
                        {% else %}
                            <td style="color: brown;"> {{item[3]}}</td>
                        {% endif %}
                        <td> {{item[4]}}</td>
                        <td style="word-wrap: break-word;max-width: 250px; white-space: normal;text-align:left;"> {{item[5]}}</td>
                        <td style="word-wrap: break-word;max-width: 250px; white-space: normal; text-align: left;">
                            {% if (item[3] != "PASS" and item[6] != None) %}
                                {{item[6]}}
                            {% endif %}
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    <script>
        function executeDataTable() {
            var fileTitle = "Search";
            $('#search').DataTable(
                {
                    retrieve: true,
                    "order": [[ 0, "desc" ]],
                    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("textField");

        textField.onkeyup = function(){
            if (textField.value == "") {
                submitButton.disabled = true;
            } else {
                submitButton.disabled = false;
            }
        }
    </script>
</body>

</html>