<section class="tab {{tabs.variants.id}} {{tabs.variants.cssClass}}"
         data-tab="{{tabs.variants.id}}"
         data-group="{{tabs.variants.group}}">

    <fieldset>
        <legend class="variant-operator"><select name="variant">
            {{selectOptions variantChoices selected=currentSelectedVariantName inverted=true}}
        </select>
            <button type="button" {{#if currentSelectedVariant}}data-action="addVariant" {{else}}disabled="disabled"{{/if}}><i
                    class="fa-solid fa-plus"></i></button>
            <button type="button" {{#if currentSelectedVariant}}data-action="removeVariant" {{else}}disabled="disabled"{{/if}}><i
                    class="fa-solid fa-minus"></i></button>
        </legend>


        {{#if currentSelectedVariant}}
            <div>
                <label>Name
                    <input type="text" name="vName" value="{{currentSelectedVariant.name}}"/>
                </label>
            </div>
            <div class="selection">
                <label>Voraussetzungen</label>
                <table>
                    <tbody>
                    {{#each currentSelectedVariant.requirements}}
                        <tr>
                            {{#if this.compare}}
                                <td>
                                    <input type="text" value="{{this.compare.ownAttribute}}"
                                           name="requirements.{{@key}}.compare.ownAttribute"/>
                                </td>
                                <td>
                                    <select name="requirements.{{@key}}.compare.operation">
                                        <option value="lt"
                                                {{#if (eq this.compare.operation 'lt') }}selected="selected"{{/if}}>
                                            Kleiner als
                                        </option>
                                        <option value="lte"
                                                {{#if (eq this.compare.operation 'lte')}}selected="selected"{{/if}}>
                                            Kleiner gleich als
                                        </option>
                                        <option value="eq"
                                                {{#if (eq this.compare.operation 'eq') }}selected="selected"{{/if}}>
                                            Gleich
                                        </option>
                                        <option value="neq"
                                                {{#if (eq this.compare.operation 'neq')}}selected="selected"{{/if}}>
                                            Nicht gleich
                                        </option>
                                        <option value="gte"
                                                {{#if (eq this.compare.operation 'gte')}}selected="selected"{{/if}}>
                                            Größer gleich als
                                        </option>
                                        <option value="gt"
                                                {{#if (eq this.compare.operation 'gt') }}selected="selected"{{/if}}>
                                            Größer als
                                        </option>

                                    </select>
                                </td>
                                <td>
                                    <input type="text" value="{{this.compare.targetAttribute}}"
                                           name="requirements.{{@key}}.compare.targetAttribute"/>
                                </td>

                            {{else}}
                                <td>
                                    {{#if this.attribute}}
                                        <input type="text" value="{{this.attribute}}"
                                               name="requirements.{{@key}}.attribute"/>
                                    {{/if}}
                                    {{#if this.talent}}
                                        <input type="text" value="{{this.talent}}" name="requirements.{{@key}}.talent"/>
                                    {{/if}}
                                </td>
                                {{#if this.minValue}}
                                    <td>Mindestens</td>
                                {{/if}}
                                {{#if this.maxValue}}
                                    <td>Maximal</td>
                                {{/if}}

                                {{#if this.minValue}}
                                    <td><input type="number" value="{{this.minValue}}"
                                               name="requirements.{{@key}}.minValue"/></td>
                                {{/if}}
                                {{#if this.maxValue}}
                                    <td><input type="number" value="{{this.maxValue}}"
                                               name="requirements.{{@key}}.maxValue"/></td>
                                {{/if}}
                            {{/if}}
                            <td>
                                <button type="button" data-action="removeRequirement" data-index="{{@key}}"><i
                                        class="fa-solid fa-trash"></i></button>
                            </td>
                        </tr>
                    {{/each}}
                    </tbody>
                    <tfoot>
                    <tr>
                        <td colspan="4">
                            <button type="button" {{#if currentSelectedVariant}}data-action="addRequirement"
                                        {{else}}disabled="disabled"{{/if}}><i class="fa-solid fa-plus"></i></button>
                        </td>
                    </tr>
                    </tfoot>
                </table>
            </div>
            <div class="selection">
                <label>Auswirkung</label>
                <table>
                    <tbody>
                    {{#each currentSelectedVariant.mod}}
                        <tr>
                            <td><input type="text" value="{{this.name}}" name="mod.{{@key}}.name"/></td>
                            <td><input type="number" value="{{this.value}}" name="mod.{{@key}}.value"/></td>
                            <td>
                                <button type="button" data-action="removeMod" data-index="{{@key}}"><i class="fa-solid fa-trash"></i>
                                </button>
                            </td>
                        </tr>
                    {{/each}}
                    </tbody>
                    <tfoot>
                    <tr>
                        <td colspan="3">
                            <button type="button" {{#if currentSelectedVariant}}data-action="addMod"
                                        {{else}}disabled="disabled"{{/if}}><i class="fa-solid fa-plus"></i></button>
                        </td>
                    </tr>
                    </tfoot>
                </table>
            </div>
        {{/if}}

        <button type="button" {{#if currentSelectedVariant}}data-action="saveVariant" {{else}}disabled="disabled"{{/if}}><i
                class="fa-solid fa-save"></i> Speichern
        </button>


    </fieldset>

</section>