<!DOCTYPE html>

<html lang="cs">
<head>
    <title>Sentiment Tweetů</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous"></script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container p-3" style="max-width: 720px">
    <h1>Sentiment Tweetů</h1>
    <hr>
    <h2>Instrukce</h2>
    <p>
        Aplikace vám postupně bude ukazovat tweety, které publikovali uživatelé Twitteru z Ostravy. U každého tweetu
        na posuvníku naznačte, jaké množství pozitivního a negativního názoru podle vás obsahuje a klikněte
        na tlačítko "Uložit a ukázat další tweet". <strong>Zkuste se přitom na tweet dívat očima jeho autora a oprostit
            se od vašich vlastních názorů a postojů.</strong>
    </p>

    <p>
        Je možné, že jeden tweet obsahuje nějaké množství pozitivního i negativního názoru zároveň. Může se ale naopak
        stát, že tweet bude podle vás úplně neutrální. V takovém případě nastavte oba posuvníky na hodnotu "Žádný".
        Pokud některý tweet neumíte ohodnotit (neposkytuje dostatečný kontext nebo je v pro vás neznámem jazyku),
        klikněte na tlačítko "Přeskočit" a ukáže se vám jiný.
    </p>

    <p class="text-danger">
        <strong>Tweety se vybírají náhodně a můžou obsahovat vulgární výrazy, projevy nesnášenlivosti vůči různým
            skupinám, nepravdivé informace nebo sexuální tématiku.</strong>
    </p>
    <hr>

    <div class="clearfix">
        <h2 class="float-start">Hodnocení Tweetu</h2>
        <div class="float-end"><strong><%= counter <= 15 ? counter : 15 %>/15</strong></div>
    </div>

    <% if(done) { %>
        <div class="mt-3 alert alert-success">
            <p><strong>Děkujeme!</strong></p>
            <p>Vaše odpovědi nám pomůžou při výzkumu sentimentu na sociálních sítích a jeho využití jako
                nástroje pro podporu rozhodování ve městech.</p>
        </div>
    <% } else { %>
        <div class="mt-3 alert alert-info">
            <%= tweet.text %>
        </div>

        <form action="/" method="post">
            <input type="hidden" name="hash" value="<%= tweet.hash %>">
            <input type="hidden" name="counter" value="<%= counter %>">
            <input type="hidden" name="starttime" value="<%= startTime %>">

            <p class="form-label text-success text-center">Množství <strong>pozitivního</strong> názoru</p>
            <div class="row text-center">
                <div class="col"><input type="radio" value="0" name="positive" id="positive_0" required></div>
                <div class="col"><input type="radio" value="1" name="positive" id="positive_1"></div>
                <div class="col"><input type="radio" value="2" name="positive" id="positive_2"></div>
                <div class="col"><input type="radio" value="3" name="positive" id="positive_3"></div>
            </div>

            <div class="row text-center">
                <div class="col"><label for="positive_0">Žádný</label></div>
                <div class="col"><label for="positive_1">Trochu pozitivní</label></div>
                <div class="col"><label for="positive_2">Středně pozitivní</label></div>
                <div class="col"><label for="positive_3">Hodně pozitivní</label></div>
            </div>

            <p class="form-label text-danger text-center mt-4">Množství <strong>negativního</strong> názoru</p>
            <div class="row text-center">
                <div class="col"><input type="radio" value="0" name="negative" id="negative_0" required></div>
                <div class="col"><input type="radio" value="1" name="negative" id="negative_1"></div>
                <div class="col"><input type="radio" value="2" name="negative" id="negative_2"></div>
                <div class="col"><input type="radio" value="3" name="negative" id="negative_3"></div>
            </div>

            <div class="row text-center">
                <div class="col"><label for="negative_0">Žádný</label></div>
                <div class="col"><label for="negative_1">Trochu negativní</label></div>
                <div class="col"><label for="negative_2">Středně negativní</label></div>
                <div class="col"><label for="negative_3">Hodně negativní</label></div>
            </div>

            <div class="mt-4 text-end">
                <a href="/skip?counter=<%= counter %>" class="btn btn-secondary">Přeskočit</a>
                <input type="submit" class="btn btn-primary" value="Uložit a ukázat další tweet">
            </div>
        </form>
    <% } %>
</div>
</body>
</html>
