<div class="mt-5">
    <h4 class="mt-5">Nuevo Fichaje</h4>
    <div class="row g-3">
        <div class="col-4">
            <div class="form-group">
                <label class="form-label" for="operario">Operario</label>
                <select id="operario-select" class="form-control" name="operario" required>
                    {% for operario in tarea.operarios %}
                        <option value="{{operario.nick}}">{{operario.nick}}</option>
                    {% endfor %}
                </select>
            </div>
        </div>
        <div class="col-4">
            <div class="form-group">
                <label class="form-label" for="startTime">Inicio</label>
                <input type="datetime-local" id="fichajeinicio" class="form-control" required>
            </div>
        </div>
        <div class="col-4">
            <div class="form-group">
                <label class="form-label" for="endTime">Fin</label>
                <input type="datetime-local" id="fichajefin" class="form-control" required>
            </div>
        </div>
    </div>
</div>

<script>
document.getElementById('operario-select').addEventListener('change', function() {
    var selectedOperario = this.value;
    document.getElementById('fichajeinicio').name = 'fichajeinicio_' + selectedOperario;
    document.getElementById('fichajefin').name = 'fichajefin_' + selectedOperario;
});

window.onload = function() {
    var selectedOperario = document.getElementById('operario-select').value;
    document.getElementById('fichajeinicio').name = 'fichajeinicio_' + selectedOperario;
    document.getElementById('fichajefin').name = 'fichajefin_' + selectedOperario;
}
</script>
