{% extends "base.html" %}

{% block title %}Seek Table{% endblock %}


{% block content %}


<!doctype html>
<html>
    <head>
        <title>Seek table</title>
    </head>
    <body>

        <br>
        <h3 id="given_code">Unidentified Individual's SEEK Code:</h3>
        <br>

        <table id="seekTable" style="font-family: monospace;" border="2" class="table">
            <tr>
                <th>Individual Name</th>
                <th>Individual ID</th>
                <th>Score</th>
                <th>SEEK Code</th>
            </tr>

        <script type="text/javascript">
            function seekCodeDifferences(seekCode, matchSeekCode){
                //displays differences in seek code as red
                let newMatchCode = "";
                for(let i = 0; i < seekCode.length; i++){
                    if(seekCode[i] !== matchSeekCode[i]){
                        newMatchCode += '<span style="color: red;">'+matchSeekCode[i]+'</span>';
                    }
                    else{
                        newMatchCode += seekCode[i]; 
                    }
                }
                return newMatchCode;
            }


            document.getElementById("given_code").innerHTML = "Unidentified Individual's SEEK Code: " + "{{ given_code }}";

            var array = {{table_data|safe}}
            seekTable = document.getElementById('seekTable');
            for(var i = 0; i < array.length; i++){
                var newRow = seekTable.insertRow(seekTable.length);
                for(var j = 0; j < array[i].length; j++){
                    var cell = newRow.insertCell(j);
                    if(j === array[i].length-1){ // SEEK code column
                        cell.innerHTML = seekCodeDifferences("{{ given_code }}",array[i][j]);
                    }
                    else{
                        cell.innerHTML = array[i][j];
                    }
                }
            }

        </script>
    </body>
</html>

{% endblock %}
