{% include 'header.html' %}
<!-- Begin Page Content -->
<div class="container-fluid">

    <!-- Content Row -->

    <!-- /Content Row -->

    <!-- Content Row -->
    <!-- Approach -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">TF-IDF</h6>
        </div>

        <div class="card-body">
            <h2>Proses TF-IDF</h2>
            <p>Silahkan klik tombol di bawah ini untuk melakukan proses TF-IDF dengan
                menggunakan data file sebelumnya yang sudah melalui proses preprocessing.</p>

            <form enctype="multipart/form-data" action="/tfidf" method="POST">
                <div class="mt-3">
                    <button type="submit" name="" value="tfidf" class="btn btn-primary">TF-IDF</button>
                </div>
                <br>
            </form>
        </div>
    </div>

    <!-- Approach -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">Hasil TF-IDF</h6>
        </div>

        <div class="card-body">
            <!-- <h1>TF-IDF Page</h1> -->
        
            <p>Total Documents: {{ total }}</p>
        
            <h2>TF-IDF Values</h2>
            <table class="table table-bordered" id="dataTable">
                <thead>
                    <tr>
                        <th>Document</th>
                        <th>TF-IDF Score</th>
                    </tr>
                </thead>
                <tbody>
                    {% for term, documents in tfidf_dict.items() %}
                        {% for document, score in documents.items() %}
                        <tr>
                            
                            <td>{{ document }}</td>
                            <td>{{ score }}</td>
                        </tr>
                        {% endfor %}
                    {% endfor %}
                </tbody>
            </table>
        </div>
        

        <!-- Sertakan jQuery dan library DataTables -->
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script src="https://cdn.datatables.net/1.11.6/js/jquery.dataTables.min.js"></script>

        <!-- Panggil fungsi DataTables pada tabel "dataTableTesting" -->
        <script>
            $(document).ready(function () {
                $('#dataTableTesting').DataTable();
            });
        </script>
    </div>
</div>
{% include 'footer.html' %}