{{ form_start(form, {'attr': {'id': form.vars.id} }) }}
    {{ form_widget(form._token) }}
    <div class="row">
        <div class="col-xxl-6 col-lg-12">
            {{ form_row(form.name) }}
        </div>
        <div class="col-xxl-3 col-lg-12">
            <div class="mb-3">
                {{ form_label(form.sex) }}
                <div id="{{ form.sex.vars.id }}">
                    {% for child in form.sex %}
                        <div class="form-check form-check-inline">
                            {{ form_widget(child) }}
                            {{ form_label(child) }}
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
        <div class="col-xxl-3 col-lg-12">
            <div class="mb-3">
                {{ form_label(form.category) }}
                <div id="{{ form.category.vars.id }}">
                    {% for child in form.category %}
                        <div class="form-check form-check-inline">
                            {{ form_widget(child) }}
                            {{ form_label(child) }}
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xxl-3 col-lg-12">
            {{ form_row(form.startAge) }}
        </div>
        <div class="col-xxl-3 col-lg-12">
            {{ form_row(form.endAge) }}
        </div>
    </div>
    <div class="row">
        <div class="col-xxl-3 col-lg-12">
            {{ form_row(form.startDegree) }}
        </div>
        <div class="col-xxl-3 col-lg-12">
            {{ form_row(form.endDegree) }}
        </div>
    </div>
    <div class="row">
        <div class="col-xxl-3 col-lg-12">
            {{ form_row(form.startWeight) }}
        </div>
        <div class="col-xxl-3 col-lg-12">
            {{ form_row(form.endWeight) }}
        </div>
    </div>
    <div class="row">
    </div>
    <div class="row mt-2">
        <div class="col-12 d-flex justify-content-end">
            <button type="button" class="btn btn-sm btn-secondary me-2" id="closeManegeForm">
                <i class="fa fa-times"></i>
                Cerrar
            </button>
            {{ form_widget(form.save, {'label': 'Guardar'}) }}
        </div>
    </div>
</form>
<script>
    $(function() {
        $('#{{ form.category.vars.id }}_0, #{{ form.category.vars.id }}_1').on('change', function() {
            if ($('#{{ form.category.vars.id }}_1').is(':checked')) {
                $('#{{ form.startWeight.vars.id }}, #{{ form.endWeight.vars.id }}').prop({
                    'disabled': false,
                    'required': true
                });
            } else {
                $('#{{ form.startWeight.vars.id }}, #{{ form.endWeight.vars.id }}').prop({
                    'disabled': true,
                    'required': false
                }).val('');
            }
        });
        $('#closeManegeForm').on('click', function() {
            closeManageForm();
        });
        $('#{{form.startDegree.vars.id }}').on('change', function() {
            let startValue = $(this).val()*1;
            $.each($('#{{form.endDegree.vars.id }} option'), function(key, option) {
                if (key > 0 && $(option).val()*1 <= startValue) {
                    $(option).prop('disabled', true);
                } else {
                    $(option).prop('disabled', false);
                }
            });
        });
    });
</script>