<!DOCTYPE html>
<html>
<head>
    <title>Enter Usernames and Servers</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        .data {
            border-collapse: collapse;
            width: 100%;
        }
        .data th, .data td {
            border: 1px solid #ddd;
            padding: 8px;
        }
    </style>
    <script>
        $(document).ready(function() {
            $("#add").click(function() {
                $("#entries").append('<div><input type="text" name="usernames" placeholder="Username" > @ <input type="text" name="servers" placeholder="Server" ></div>');
            });
            $("form").submit(function() {
                // find length of entries
                var count = $("#entries").children().length - 1;
                count++
                var accountText = count == 1 ? "account" : "accounts"; // decides whether to use "account" or "accounts" based on the value of count
                $("#loading").show().text(`Gathering data for ${count} ${accountText}...`);
                $("#table").hide();
                $("#download").hide();
            });
        });

    </script>
</head>
<body>
<h1 style="color:mediumvioletred;">lol-stats</h1>
<p>Enter all of your accounts<br>
    Example: <b>hide on bush @ kr</b>  <br>
    You can press submit without entering an account to see an example data (Faker's account) </p>

<form method="POST">
    <div id="entries">

        <div>
            <input type="text" name="usernames" placeholder="Username" > @ <input type="text" name="servers" placeholder="Server" >
        </div>
    </div>

    <button type="button" id="add">Add another account</button><br>
    <input type="submit" value="Submit">
</form>

<p id="loading" style="display: none;"></p>

<!-- Here is where the table will be displayed -->
{% if sample %}
<p>-- Displaying a sample data (Faker's account)--</p>
{% endif %}


<div id="table" style="{{ 'display: none;' if not table_ready }}">
    <p>Execution time: {{ execution_time }} seconds</p>
</div>

{% if not sample %}
<div id="table" style="{{ 'display: none;' if not table_ready }}">
    <p> {{ text | replace("\n", "<br>") | safe}} </p>
</div>
{% endif %}


<form id="download" method="get" action="/download" style="{{ 'display: none;' if not table_ready }}">
    <button type="submit">Download CSV</button>
</form>

<div id="table" style="{{ 'display: none;' if not table_ready }}">
    {{ table|safe }}
</div>

<h5>by Atahan Uz<br>
    <a href=https://github.com/atahanuz/lol-stats>Github</a>
</h5>
</body>
</html>
