{% import '@ui/tooltip.twig' as tooltip %}

<div id="conditionalFormattingDialog"
     data-id="{{ table.id }}"
     data-types="{{ table.conditionsData.types | json_encode | e }}"
     data-operators="{{ table.conditionsData.operators | json_encode | e }}"
     data-conditions="{{ table.conditionsData.conditions | json_encode | e }}"
     class="supsystic-plugin"
     style="display: none;"
     title="Conditional Formatting"
>
    <div class="supRow">
        <div class="supMd12 supXs12">
            <p style="margin: 0;">{{ environment.translate('To save conditional styles you should save the table.') }}</p>
            <h3>{{ environment.translate('Current Range') }}</h3>
        </div>
        <div class="fieldShell supMd10 supXs8">
            <input type="text" name="range" data-def="" />
        </div>
        <div class="fieldShell supMd2 supXs4">
            <button class="conditionRuleApply button" data-ruleid="">{{ environment.translate('Apply') }}</button>
        </div>
    </div>
    <div class="supRow">
        <div class="noRangeError conditionRulesError supMd12 supXs12">{{ environment.translate('Please, type the correct range!') }}</div>
    </div>
    <div class="supRow">
        <div class="supMd12 supXs12">
            <h3>{{ environment.translate('Condition') }}</h3>
        </div>
        <div class="fieldShell supMd4 supXs12">
            <label for="conditionPartType">{{ environment.translate('Type') }}</label><br />
            <select name="conditionType" id="conditionPartType" class="conditionPart" data-def="cellIs">
                {% for name, value in table.conditionsData.types %}
                    <option value="{{ name }}" data-type="{{ value.type }}">{{ value.label }}</option>
                {% endfor %}
            </select>
        </div>
        <div class="fieldShell supMd4 supXs12">
            <label for="conditionPartOperator">{{ environment.translate('Operator') }}</label><br />
            <select name="operatorType" id="conditionPartOperator" class="conditionPart" data-def="equal">
                {% for name, value in table.conditionsData.operators %}
                    <option value="{{ name }}" class="{{ value.type }}">{{ value.label }}</option>
                {% endfor %}
            </select>
        </div>
        <div class="fieldShell supMd4 supXs12">
            <label for="conditionValueCondition">{{ environment.translate('Value') }}</label><br />
            <input type="text" name="condition[]" id="conditionValueCondition" class="conditionValue" data-def="" />
            <input type="text" name="condition[]" class="conditionValue" data-def="" />
        </div>
    </div>
    <div class="supRow">
        <div class="h2 supMd12 supXs12">
            <h3>{{ environment.translate('Styles') }}</h3>
        </div>
        <div class="fieldShell supMd4 supXs12">
            <div class="supRow">
                <div class="fieldSubShell supMd12 supXs12">
                    <input type="checkbox" name="bold" id="conditionStyleBold" class="conditionStyle" data-def="" />
                    <label for="conditionStyleBold">{{ environment.translate('Bold') }}</label>
                </div>
                <div class="fieldSubShell supMd12 supXs12">
                    <input type="checkbox" name="italic" id="conditionStyleItalic" class="conditionStyle" data-def="" />
                    <label for="conditionStyleItalic">{{ environment.translate('Italic') }}</label>
                </div>
                <div class="fieldSubShell supMd12 supXs12">
                    <input type="checkbox" name="underline" id="conditionStyleUnderline" class="conditionStyle" data-def="" />
                    <label for="conditionStyleUnderline">{{ environment.translate('Underline') }}</label>
                </div>
            </div>
        </div>
        <div class="fieldShell supMd4 supXs12">
            {% set defBackground = '000000' %}
            <label>{{ environment.translate('Background') }}</label><br />
            <div class="conditionColorPicker colorPickerShell">
                <div class="conditionColorArea colorPickerArea" style="background-color: #{{ defBackground }};"></div>
                <input type="text" name="bg_color" value="{{ defBackground }}" class="conditionStyle" data-def="{{ defBackground }}" style="display: none;" />
            </div>
        </div>
        <div class="fieldShell supMd4 supXs12">
            {% set defColor = 'ffffff' %}
            <label>{{ environment.translate('Color') }}</label><br />
            <div class="conditionColorPicker colorPickerShell">
                <div class="conditionColorArea colorPickerArea" style="background-color: #{{ defColor }};"></div>
                <input type="text" name="color" value="{{ defColor }}" class="conditionStyle" data-def="{{ defColor }}" style="display: none;" />
            </div>
        </div>
    </div>
    <div class="supRow">
        <div class="h2 supMd12 supXs12">
            <h3>{{ environment.translate('Rules') }}</h3>
        </div>
        <div class="supMd12 supXs12">
            <div id="conditionRuleRowExample" class="conditionRuleRow" style="display: none;">
                <div class="ruleRange supMd3 supXs3"></div>
                <div class="ruleCondition supMd6 supXs6"></div>
                <div class="ruleActions supMd3 supXs3">
                    <button class="conditionRuleDelete button"><i class="fa fa-trash-o"></i></button>
                    <button class="conditionRuleEdit button"><i class="fa fa-pencil"></i></button>
                </div>
            </div>
            <div class="conditionRulesShell" data-def="{{ environment.translate('No rules for now') }}"></div>
        </div>
    </div>
</div>