{% extends "base.html" %}

{% block title %}
InstructScore Visualizer
{% endblock %}

{% block content %}

<style>


    .search-bar {
        margin-bottom: 10px;
    }

    .search-bar input {
        width: 100%;
        padding: 8px;
        box-sizing: border-box;
        border: 1px solid #ccc;
        border-radius: 4px;
    }

    .table-container {
        overflow-x: auto;
        color: black;
    }

    table {
        width: 100%;
        border-collapse: collapse;
    }

    th, td {
        padding: 12px;
        border: 1px solid #ccc;
        text-align: left;
    }

    th {
        background-color: #f2f2f2;
    }

    tr.selected {
        background-color: #e6f7ff;
    }
</style>

<div class="container">
    <div class="top-container">
        <h2 style="color: black">My Runs</h2>
        <button id="addButton" class="circle-button" onclick="window.location.href='/input_form/step1'">+</button>
    </div>

    <div class="search-bar">
        <input type="text" id="searchInput" placeholder="Search in table...">
    </div>

    <div class="table-container">
        <table id="dataTable">
            <thead>
                <tr>
                    <th>Selected</th>
                    <th>Run</th>
                    <th>Source Lang</th>
                    <th>Target Lang</th>
                    <th>Status</th>
                    <th>SEScore</th>
                    <th>BLEU</th>
                    <th>Eval Type</th>
                    <th>Total Evals</th>
                </tr>
            </thead>
            <tbody>
                {% for run in table_data %}
                    <tr data-id="{{ run.id }}">
                        {% if run.status != 'Starting' %}
                            <td><input type="checkbox" class="select-row"></td>
                        {% else %}
                            <td></td>
                        {% endif %}
                        <td>{{ run.filename }}</td>
                        <td>{{ run.source_lang }}</td>
                        <td>{{ run.target_lang }}</td>
                        <td>{{ run.status }}</td>
                        <td>{{ run.se_score }}</td>
                        <td>{{ run.bleu_score }}</td>
                        <td>{{ run.run_type }}</td>
                        <td>{{ run.num_predictions }}</td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    <div class="submit-button-wrapper">
        <form id="dashboardForm" action="{{ url_for('dashboard') }}" method="POST">
            <input type="hidden" name="ids" id="selectedDashboardIds">
            <button type="submit" id="dashboardButton" class="submit-button" style="display:none;">Compare Systems</button>
        </form>
        <form id="compareForm" action="{{ url_for('visualize_instruct') }}" method="POST">
            <input type="hidden" name="ids" id="selectedIds">
            <button type="submit" id="compareButton" class="submit-button" style="display:none;">Compare Instances</button>
        </form>
        <button type="button" id="deleteButton" class="submit-button" style="background-color: #B53F51" onclick="deleteRuns()" >Delete</button>
    </div>
</div>

<script>
    document.getElementById('searchInput').addEventListener('input', function() {
        const filter = this.value.toLowerCase();
        const rows = document.querySelectorAll('#dataTable tbody tr');

        rows.forEach(row => {
            const text = row.innerText.toLowerCase();
            row.style.display = text.includes(filter) ? '' : 'none';
        });
    });

    document.querySelectorAll('.select-row').forEach(checkbox => {
        checkbox.addEventListener('change', function() {
            this.closest('tr').classList.toggle('selected', this.checked);
            toggleButton();
        });
    });

    document.getElementById('compareButton').addEventListener('click', function() {
        const selectedIds = Array.from(document.querySelectorAll('.select-row:checked'))
            .map(checkbox => checkbox.closest('tr').dataset.id);
        document.getElementById('selectedIds').value = JSON.stringify(selectedIds);
    });

    document.getElementById('dashboardButton').addEventListener('click', function() {
        const selectedIds = Array.from(document.querySelectorAll('.select-row:checked'))
            .map(checkbox => checkbox.closest('tr').dataset.id);
        document.getElementById('selectedDashboardIds').value = JSON.stringify(selectedIds);
    });

    function toggleButton() {
        const selectedRows = document.querySelectorAll('.select-row:checked');
        const compareButton = document.getElementById('compareButton');
        const deleteButton = document.getElementById('deleteButton');
        const dashboardButton = document.getElementById('dashboardButton');
        compareButton.style.display = selectedRows.length > 0 ? 'block' : 'none';
        deleteButton.style.display = selectedRows.length > 0 ? 'block' : 'none';
        dashboardButton.style.display = selectedRows.length > 0 ? 'block' : 'none';
    }

    function deleteRuns() {
        if (confirm("Are you sure you want to delete the selected runs?")) {
            // Continue with the deletion logic
            const selectedIds = Array.from(document.querySelectorAll('.select-row:checked'))
                .map(checkbox => checkbox.closest('tr').dataset.id);
            fetch('/delete_runs', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(selectedIds)
            }).then(() => {
                window.location.reload();
            });
        }
    }

    toggleButton();
</script>

{% endblock %}