{% extends "base.html" %}

{% block title %}Skinnerbox - Homepage{% endblock %}

{% block content %}
<div class="container" style="display: block; text-align: center;">
    <section class="get-started" style="display: block;">
        <h2>Get Started</h2>
        <p>To run a trial click here: </p>
        <form action="/trial" method="post">
            <input type="submit" value="Go To Trial">
        </form>
        <p>To view logs click here: </p>
        <form action="/log-viewer" method="get">
            <input type="submit" value="View Logs">
        </form>
        <p>To test the I/O of your skinner box click here: </p>
        <form action="/testingpage">
            <input type="submit" value="Test I/O">
        </form>
    </section>

    <br><br><hr style="width: 50%;"><br>

    <div class="LoginLogout" style="display: block;">
        <button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Login</button>
        <button onclick="logoutUser()" style="width:auto;">Logout</button>
        <div id="id02" style="display:none;">
            <h3>Logged in as: {{ current_user }}</h3>
        </div>
        <div id="id03" style="display:none;">
            <h3 style="color: red;">Not logged in</h3>
        </div>
        <div class="Login">
            <div id="id01" class="modal">
                <form class="modal-content animate" onsubmit="loginUser(event)">
                    <div class="imgcontainer">
                        <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">&times;</span>
                    </div>
                    <div class="container">
                        <label for="uname"><b>Username</b></label>
                        <input type="text" placeholder="Enter Username" name="uname" required>
                        <br><br>
                        <label for="psw"><b>Password</b></label>
                        <input type="password" placeholder="Enter Password" name="psw" required>
                        <br><br>
                        <button id="login-btn" type="submit">
                            <div id="spinner" class="loader_btn_spinner" style="display: none;"></div>
                            <div id="login_btn_txt">Login</div>
                        </button>
                    </div>
                    <div class="container">
                        <button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Toast Notification Container -->
<div id="toast-container"></div>

{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/home.js') }}"></script>
{% endblock %}