<!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 - Test Metrics</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;
        }
        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>
    </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}} - Test Metrics</h3>
        </div>
        <hr>
        <table class="table table-striped" id="eidtmetrics">
            <thead>
                <tr>
                    <th>Execution ID</th>
                    <th>Test Case</th>
                    <th>Status</th>
                    <th>Time (s)</th>
                    <th>Error</th>
                    <th>Comment</th>
                    <th></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>
                        <td>
                            {% if (item[3] != "PASS" ) %}
                                <a href="#" data-toggle="modal" data-target="#updateComment{{item[0]}}" class="btn" title="Update Comment"><i class="fa fa-pencil"></i></a>
                                <div id="updateComment{{item[0]}}" class="modal fade" role="dialog" style="color:black;">
                                    <div class="modal-dialog">
                                        <!-- Modal content-->
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <button type="button" class="close" data-dismiss="modal">&times;</button>
                                                <h4 class="modal-title" style="text-align-last: center">{{item[2]}}</h4>
                                            </div>
                                            <div class="modal-body">
                                                <form class="example" method="post" action="">
                                                    <div class="form-group">
                                                        <div style="text-align:left !important;"><b>Comment:</b></div>
                                                        <textarea id="textField" rows="5" type="text" name="textField" style="min-width: 100%">{{item[6]}}</textarea>
                                                    </div>
                                                    <div class="form-group">
                                                        <input readonly id="rowField" type="hidden" value="{{item[0]}}" name="rowField" style="min-width: 50%"></input>
                                                        <button id="submit" type="submit" class="btn btn-primary">Update</button>
                                                    </div>
                                                </form>
                                            </div>
                                            <div class="modal-footer d-flex justify-content-center">
                                                <a href="#" type="button" class="btn btn-danger" data-dismiss="modal">Cancel</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            {% endif %}
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    <script>
        function executeDataTable() {
            var fileTitle = "TestMetrics";
            $('#eidtmetrics').DataTable(
                {
                    retrieve: true,
                    "order": [[ 2, "asc" ]],
                    dom: 'l<".margin" B>frtip',
                    buttons: [
                         {
							extend:    'copyHtml5',
							text:      '<i class="fa fa-files-o"></i>',
							titleAttr: 'Copy',
							exportOptions: {
								columns: ':visible:not(:last-child)'
							}
						},
                        {
                            extend:    'csvHtml5',
							text:      '<i class="fa fa-file-text-o"></i>',
							titleAttr: 'CSV',
                            filename: function() {
                                return fileTitle + '-' + new Date().toLocaleString();
                            },
							exportOptions: {
								columns: ':visible:not(:last-child)'
							}
                        },
                        {
                            extend:    'excelHtml5',
							text:      '<i class="fa fa-file-excel-o"></i>',
							titleAttr: 'Excel',
                            filename: function() {
                                return fileTitle + '-' + new Date().toLocaleString();
                            },
							exportOptions: {
								columns: ':visible:not(:last-child)'
							}
                        },
                        {
							extend:    'print',
							text:      '<i class="fa fa-print"></i>',
							titleAttr: 'Print',
							exportOptions: {
								columns: ':visible:not(:last-child)',
                                alignment: 'left',
							}
                        },
						{
							extend:    'colvis',
							collectionLayout: 'fixed two-column',
							text:      '<i class="fa fa-low-vision"></i>',
							titleAttr: 'Hide Column',
							exportOptions: {
								columns: ':visible:not(:last-child)'
							},
							postfixButtons: [ 'colvisRestore' ]
                        },
                    ],
					columnDefs: [ {
						visible: false,
					} ]
			   }
            );
          }
    </script>
</body>

</html>