<h3>{{ 'Options du graphique' | trad }}</h3>
<fieldset class="scheduler-border">
    <legend class="scheduler-border">
        {{- 'Aspect général du graphique' | trad -}}
    </legend>
    <div class="bs-row gutter-x-base">
        <div class="bs-col-half">
            {{ formInput(input.listChild.G_TITRE, subject) }}
            {{ formInput(input.listChild.G_MULTITYPE, subject) }}
            {{ formInput(input.listChild.G_DATA, subject) }}
        </div>
        <div class="bs-col-half">
            {{ formInput(input.listChild.G_STITRE, subject) }}
            {{ formInput(input.listChild.G_TYPE_MONO, subject) }}
        </div>
    </div>
</fieldset>
<fieldset class="scheduler-border">
    <legend class="scheduler-border">
        {{- 'Axe horizontal (catégories)' | trad -}}
    </legend>
    <div class="bs-row gutter-x-base">
        <div class="bs-col-half">
            {{ formInput(input.listChild.X_TITRE, subject) }}
            {{ formInput(input.listChild.X_INCLINE, subject) }}
        </div>
        <div class="bs-col-half">
            {{ formInput(input.listChild.X_ALIAS, subject) }}
        </div>
    </div>
</fieldset>
<fieldset class="scheduler-border">
    <legend class="scheduler-border">
        {{- 'Axe vertical à gauche (valeurs)' | trad -}}
    </legend>
    <div class="bs-row gutter-x-base">
        <div class="bs-col-half">
            {{ formInput(input.listChild.Y1_TITRE, subject) }}
        </div>
        <div class="bs-col-half">
            {{ formInput(input.listChild.Y1_UNITE, subject) }}
        </div>
    </div>
</fieldset>
<fieldset class="scheduler-border">
    <legend class="scheduler-border">
        {{- 'Axe vertical à droite (valeurs)' | trad -}}
    </legend>
    <div class="bs-row gutter-x-base">
        <div class="bs-col-full">
            {{ formInput(input.listChild.Y2_AFF, subject) }}
        </div>
        <div class="bs-col-half">
            {{ formInput(input.listChild.Y2_TITRE, subject) }}
        </div>
        <div class="bs-col-half">
            {{ formInput(input.listChild.Y2_UNITE, subject) }}
        </div>
    </div>
</fieldset>
<script>
function updateTypeMono() {
    const inputTypeMulti = document.querySelector('[name*=G_MULTITYPE]');
    if (! inputTypeMulti) return;
    document.querySelector('[name*=G_TYPE_MONO]').disabled = inputTypeMulti.checked;
    Array.from(document.querySelectorAll('[name*=TYPE_GRAPH]'))
    .forEach((el) => {
        el.disabled = ! inputTypeMulti.checked;
    });
}
addGlobalEventListener('change', '[name*=G_MULTITYPE]', (event) => {
    updateTypeMono();
});
addGlobalEventListener('input-table-change', '[data-inputtable=ListSerie]', (event) => {
    updateTypeMono();
});

$(() => {
    updateTypeMono();
})

//__________________

function updateY2(inputY2) {
    document.querySelector('[name*=Y2_TITRE]')
    .disabled = ! inputY2.checked;
    document.querySelector('[name*=Y2_UNITE]')
    .disabled = ! inputY2.checked;
}
addGlobalEventListener('change', '[name*=Y2_AFF]', (event) => {
    updateY2(event.target);
});
updateY2(document.querySelector('[name*=Y2_AFF]'));
</script>