{% extends "base.html" %}

{% block title %}Skinnerbox - Trial Settings{% endblock %}

{% block content %}
<div class="container">
    <h1>Trial Settings</h1>
    <form action="{{ url_for('update_trial_settings') }}" method="post">
        <div class="form-row">
            <label for="duration">Trial Duration (minutes)</label>
            <input type="number" id="duration" name="duration" value="{{ settings['duration'] }}" min="1" required>
        </div>
        <div class="form-row">
            <label for="goal">Goal For Trial (goal)</label>
            <input type="number" id="goal" name="goal" value="{{ settings['goal'] }}" min="1" required>
        </div>
        <div class="form-row">
            <label for="cooldown">Cooldown Between Interactions (seconds)</label>
            <input type="number" id="cooldown" name="cooldown" value="{{ settings['cooldown'] }}" min="1" required>
        </div>

        <div class="form-row">
            <label>Reward Type</label>
            <div class="radio-group">
                <label><input type="radio" name="rewardType" value="water" {% if settings['rewardType'] == 'water' %}checked{% endif %} required> Water</label>
                <label><input type="radio" name="rewardType" value="food" {% if settings['rewardType'] == 'food' %}checked{% endif %} required> Food</label>
            </div>
        </div>

        <div class="form-row">
            <label>Interaction Type</label>
            <div class="radio-group">
                <label><input type="radio" name="interactionType" value="lever" {% if settings['interactionType'] == 'lever' %}checked{% endif %} required> Lever</label>
                <label><input type="radio" name="interactionType" value="poke" {% if settings['interactionType'] == 'poke' %}checked{% endif %} required> Poke</label>
            </div>
        </div>

        <div class="form-row">
            <label>Stimulus Type</label>
            <div class="radio-group">
                <label><input type="radio" name="stimulusType" value="light" {% if settings['stimulusType'] == 'light' %}checked{% endif %} required> Light</label>
                <label><input type="radio" name="stimulusType" value="tone" {% if settings['stimulusType'] == 'tone' %}checked{% endif %} required> Tone</label>
            </div>
        </div>

        <div class="form-row">
            <label for="light-color">Light Color</label>
            <input type="color" id="light-color" name="light-color" value="{{ settings['light-color'] }}">
        </div>
    </form>

    <form action="/start" method="post">
        <button type="submit" class="button">Start Trial</button>
    </form>
</div>
{% endblock %}

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