{% extends 'base.html' %}
{% block head %}
<link rel="stylesheet" href="../css/plagiarism-checking-results.css" />
{% endblock %}
{% block content %}
<div class="header">
    <a class="grading-configuration-container" href="plagiarism-configuration1.html">
        <img src="../images/header-bg-long.png" />
        <div class="grading-configuration-text">
            <p>Plagiarism</p>
            <p>Configuration</p>
        </div>
    </a>

</div>

<div class="container">
    <div class="main-container">

        <div class="loading-text">
            <div class="spinner-border text-dark" role="status">
                <span class="sr-only">Loading...</span>
              </div>
            <h1 style="display: inline-block;">Loading...</h1>
        </div>
 
        <div class="table-scroll table table-hover">

            <table class="table-content">
      
            </table>

        </div>
    </div>
</div>

<div class="footer">

    <a class="grading-container" onclick="eel.export_plagiarism_results()" style="cursor: pointer;">
        <img src="../images/create_assignment_bg_export.png" />
        <p>Export</p>
    </a>
</div>


<script>
$(document).ready(async function () {
    $(".loading-text").show();
    let results = await eel.autograder_plagiarism()();
    $(".loading-text").hide();
    console.log(results);
    let output = "";

    output += `<thead>
                    <tr>
                        <th>Homework 1 Name</th>
                        <th>Homework 2 Name</th>
                        <th>Similarity Score</th>
                    </tr>
                </thead>`;


    for (let file of results.results) {
        output += `<tr>
                    <td>${file["student1"]} </td>
                    <td>${file["student2"]} </td>
                    <td>${(file["similarity_score"] * 100).toFixed(3)}%</td>
                </tr>
                `;
    }
    $(".table-content").html(output);
});




</script>
{% endblock %}