{% include "protocols/task.html" %}

<div class="row">
    <div class="col">
        <label for="iti">Inter-Trial Interval (ms)</label>
        <input id="iti" class="form-control mb-3"
               type="number" value="6000"
               min="0" step="100">
    </div>
    <div class="col">
        <label for="stimulus_duration">Stimulus Interval (ms)</label>
        <input id="stimulus_duration" class="form-control mb-3"
               type="number" value="4000"
               min="0" step="100">
    </div>
</div>

<div class="row">
    <div class="col">
        <label for="corrections_enabled">Correction Trials</label>
        <select id="corrections_enabled" class="form-control mb-3">
            <option value="true">Enabled</option>
            <option value="false">Disabled</option>
        </select>
    </div>
</div>

<div class="row">
    <div class="col">
        <label for="target">Target</label>
        <select id="target" class="form-control mb-3">
            {% for stimulus in stimuli %}
                <option value="{{ stimulus.get_identifier() }}">{{ stimulus.get_common_name() }}</option>
            {% endfor %}
        </select>
    </div>
    <div class="col"></div>
</div>
<div id="target-options" class="col"></div>
<div class="col"></div>

<div class="row">
    <div class="col">
        <label for="distractor">Distractor</label>
        <select id="distractor" class="form-control mb-3">
            {% for stimulus in stimuli %}
                <option value="{{ stimulus.get_identifier() }}">{{ stimulus.get_common_name() }}</option>
            {% endfor %}
        </select>
    </div>
    <div class="col"></div>
</div>
<div id="distractor-options" class="col"></div>
<div class="col"></div>

<script>
    target_selector = document.getElementById('target');

    target_selector.onchange = function () {
        $.get("/api/stimulus-form/" + target_selector.value + "?idx=t_").done(function (data) {
            $('#target-options').html(data);
        })
    }
    target_selector.onchange();

    distractor_selector = document.getElementById('distractor');

    distractor_selector.onchange = function () {
        $.get("/api/stimulus-form/" + distractor_selector.value + "?idx=d_").done(function (data) {
            $('#distractor-options').html(data);
        })
    }
    distractor_selector.onchange();
</script>
