{% extends "base.html" %}

{% block title %} annotation {% endblock %}

{% block content%}

    <div class="container" id="top-info">
        <table class="table top-info">
            <thead class="thead-dark">
                <tr>
                    <th>Email</th>
                    <th>Počet anotovaných jednotiek</th>
                </tr>
            </thead>    
            <tr>
                <td>{{ email }}</td>
                <td>{{ annotated_count }}</td>
            </tr>
        </table>
    </div>
    
    <div class="container">
        <div class="anot">
            <p class="anot-text">{{ text }}</p>
            <button id="post" class="btn btn-primary" onclick="postBcknd('offensive', {{ sample_id }})">Ofenzívny</button>
            <button id="post" class="btn btn-primary" onclick="postBcknd('not_offensive', {{ sample_id }})">Neofenzívny</button>
            <button id="post" class="btn btn-primary" onclick="postBcknd('dont_know', {{ sample_id }})">Neviem</button> 
        </div>

    <button id="get" class="btn btn-primary logout-btn" onclick="logout()"> Odhlásiť sa</button>

<script>
    function postBcknd(value, sample_id){
        var xhr = new XMLHttpRequest();
        xhr.open('POST', '/process_anot', true);
        xhr.setRequestHeader('Content-Type', 'application/json');

        xhr.onload = function () {
            if(xhr.status === 200) {
                console.log('request sent succesfully');
                window.location.href = '/anot';
            } else {
                console.log('request failed');
            }
        };
        xhr.send(JSON.stringify({value: value, sample_id: sample_id}));
    }

    function logout() {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', '/', true);

        xhr.onload = function () {
            if (xhr.status === 200) {
                console.log('Logout successful');
                window.location.href = '/';
            } else { 
                console.log('Logout request failed');
            }
        }

        xhr.send(); // Send the request
    }
</script>

{% endblock %}