{% extends 'index.html' %}
{% block content %}
<div class="card">
    <div id="main-div" class="card-body">
        <form action="/participant/create/submit" method="POST">
            <div class="form-group">
                <label for="number">Number:</label>
                <br>
                {% if num %}
                <input id="number" name="number" type="number" value={{ num }} max="99" min="1" class="form-control">
                {% else %}
                <input id="number" name="number" type="number" value="1" max="99" min="1" class="form-control">
                {% endif %}
            </div>
            <div class="form-group">
                <label for="age">Age:</label>
                <br>
                <input id="age" name="age" type="number" value="18" max="99" min="18" class="form-control">
            </div>
            <div class="form-group">
                <label>Gender:</label>
                <br>
                <select class="form-control" name="gender" id="gender">
                    <option>Male</option>
                    <option>Female</option>
                    <option>Other</option>
                    <option>Prefer not to say</option>
                </select>
            </div>
            <div class="form-group">
                <label>Handedness:</label>
                <br>
                <select class="form-control" name="handedness" id="handedness">
                    <option>Right handed</option>
                    <option>Left handed</option>
                </select>
            </div>
            <div class="form-group">
                <label for="comment">Notes:</label>
                <textarea class="form-control" rows="6" id="notes" name="general_notes"></textarea>
            </div> 
            <div class="form-group d-flex justify-content-center">
                <button id="submit" class="btn btn-primary mx-3">Submit</button>
            </div>
        </form>
    </div>
</div>
{% endblock %}