{% extends "base.html" %}

{% block head %}
    <title>Skinnerbox - I/O Testing</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
{% endblock %}

{% block content %}
    <div class="container" style="display: block; text-align: center;">
        <h2>I/O Testing</h2>

        <div class="mock-banner" id="mockBanner">
            <p>⚠️ WARNING: Running in **MOCK MODE** - No real GPIO changes will be made.</p>
            <button class="close-btn" onclick="document.getElementById('mockBanner').style.display='none'">X</button>
        </div>
        

        <div class="buttons">
            <button class="button" value="feeder">Feed</button>
            <button class="button" value="water">Water</button>
            <button class="button" value="buzzer">Sound Buzzer</button>
            <button class="button" value="light">Light Stimulus</button>
            <button class="button" value="lever">Lever Press</button>
            <button class="button" value="poke">Nose Poke</button>
        </div>
    </div>

    <!-- Toast Notification Container -->
    <div id="toast-container"></div>
{% endblock %}

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