{% macro startCard(col, zone = "default", card ='primary', fullWidth = false ) %}
    {% if col > 0 %}
<div class="col-{{ col }}">{% endif %}
    <div class="card card-{{ card }}">
        <div class="card-header">
            <h3 class="card-title">
                {% set label = "group."~zone %}
                {{ label|trans({}, 'lcshop')|raw }}
            </h3>
        </div>
        <div class="card-body {{ fullWidth == true ? 'p-0' : 'row' }}">

            {% endmacro startCard %}

            {% macro cardOverlay(attr) %}
        </div>
        <div v-if="{{ attr }}==true" class="overlay">
            <i class="fas fa-2x fa-sync-alt"></i>
        </div>
        {% endmacro cardOverlay %}

        {% macro endCard(noCol = false) %}
    </div>
</div>
    {% if noCol == false %}</div>{% endif %}
{% endmacro endCard %}


{% macro productField(colspan, field, fieldName, fieldDisplay = false, displaySuffix="",attr="") %}

    {% if fieldDisplay == false %}{% set fieldDisplay = fieldName %}{% endif %}

    <td {{ attr|raw }} colspan="{{ colspan }}" class="{{ fieldName }}">
        <div class="value" v-show="{{ fieldName }}Inherited == false" v-on:click="{{ fieldName }}Inherited = true">
            <div v-if="{{ fieldName }}">
                {% verbatim %}{{ {% endverbatim %}{{ fieldDisplay }} {% verbatim %}}}{% endverbatim %}{{ displaySuffix }}
            </div>
            <div v-else class="inherited">
                {% verbatim %}{{ productFamily.{% endverbatim %}{{ fieldDisplay }} {% verbatim %}}}{% endverbatim %}{{ displaySuffix }}
            </div>
        </div>
        <div v-show="{{ fieldName }}Inherited == true">
            {{ form_widget(field, {'attr' : {'v-model' :  fieldName , 'v-on:focusout': fieldName~'Inherited = false', '@change' : fieldName~'Updated'}}) }}
        </div>
        <button v-show="{{ fieldName }}" v-on:click="{{ fieldName }} = null; {{ fieldName }}Inherited = false; "
                class="btn btn-empty-field" type="button"><i class="fa fa-undo"></i></button>
    </td>
{% endmacro %}

{% macro priceField(field, fieldTax, fieldName,  behaviorPriceValue) %}
    <div class="form-group field-price col-12" v-show="behaviorPrice == '{{ behaviorPriceValue }}'">
        <div class="row">
            <div class="col-12">
                {{ form_label(field) }}
            </div>
            <div class="col-6">
                <div class="form-widget">
                    <div class="input-group">
                        {{ form_widget(field, {'attr' : {'v-model': fieldName, '@change' : fieldName~'Updated'}}) }}
                        <div class="input-group-append">
                            <span class="input-group-text">€ HT
                                    {% if behaviorPriceValue == 'by-reference-unit' %}/ ${ unitReference }{% endif %}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-6">
                <div class="input-group">
                    {{ form_widget(fieldTax, {'attr' : {'v-model':  fieldName ~ 'WithTax', '@change' : fieldName~'WithTaxUpdated'}}) }}
                    <div class="input-group-append">
                        <span class="input-group-text">€ TTC
                            {% if behaviorPriceValue == 'by-reference-unit' %}/ ${ unitReference }{% endif %}
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endmacro %}

{% macro autoresizeField(field) %}
    <tr>
        <td>{{ form_label(field) }}</td>
        <td>
            <div class="autoresize">
                {{ form_widget(field, {'attr' : {rows : '1'}}) }}
            </div>
        </td>
    </tr>
{% endmacro autoresizeField %}

{% macro fieldReductionList(form, field, filterOn = false, filterType='string') %}
    <div class="col-12">
        <div class="form-group">
            <div class="form-group">
                {{ form_widget(attribute(form, field~'Active'), {"attr" : {'v-model' : 'reduction'~field|uc_first~'Active' } }) }}
            </div>
            <div class="form-widget" v-show="reduction{{ field|uc_first }}Active == true">
                {% set attr = {
                    'ref' : 'reduction'~field|uc_first ,
                    'v-model' : 'reduction'~field|uc_first
                } %}
                {{ form_widget(attribute(form, field), {"attr" : attr }) }}
            </div>
        </div>
    </div>
{% endmacro fieldReductionList %}

{% macro fieldReductionDateRange(form) %}
    <div class="col-12">
        <div class="form-group">
            <div class="form-group">
                {{ form_widget(form.permanent, {"attr" : {'v-model' : 'reductionPermanent' } }) }}
            </div>
            <div class="input-group" v-show="reductionPermanent == false">
                <div class="input-group-prepend">
                    <span class="input-group-text"><i class="far fa-clock"></i></span>
                </div>
                <input type="text" class="form-control float-right date-time-range">
                <div class="hidden date-time-range-fields" style="display: none;">
                    {{ form_widget(form.dateStart, {"attr" : {'class' : 'date-start'}}) }}
                    {{ form_widget(form.dateEnd, {"attr" : {'class' : 'date-end'}}) }}
                </div>
            </div>

        </div>
    </div>
{% endmacro fieldReductionDateRange %}

{% macro fieldReductionValue(form) %}
    <div class="col-6">
        <div class="form-group">
            {{ form_label(form.value) }}
            <div class="input-group">
                {{ form_widget(form.value, {"attr" : {":required": "reductionActive", 'v-model' : 'reductionValue'}}) }}
                <div class="input-group-append">
                <span class="input-group-text">
                    <span v-if="reductionUnit =='amount'">€</span>
                    <span v-else-if="reductionUnit =='percent'">%</span>
                </span>
                </div>
            </div>
        </div>
    </div>
{% endmacro fieldReductionValue %}

{% macro fieldReductionBehaviorTaxRate(form) %}
    <div class="col-6" :class="reductionUnit == 'amount' ? '' : 'hidden'">
        {{ form_row(form.behaviorTaxRate, {"attr" : {":required": "reductionActive && reductionUnit=='amount'", 'v-model' : 'reductionBehaviorTaxRate'}}) }}
    </div>
{% endmacro fieldReductionBehaviorTaxRate %}

{% macro fieldReductionUnit(form) %}
    <div class="col-12">
        <div class="form-group">
            {{ form_label(form.unit) }}
            {% for field in form.unit %}
                {{ form_widget(field, {"attr" : {":required": "reductionActive", "v-model" : 'reductionUnit'}}) }}
            {% endfor %}
        </div>
    </div>
{% endmacro fieldReductionUnit %}

{% macro reductionCatalogForm(form) %}
    {{ _self.startCard(6, 'ReductionCatalog.info') }}
    <div class="col-12">
        {{ form_row(form.title) }}
    </div>
    {{ _self.fieldReductionUnit(form) }}
    {{ _self.fieldReductionValue(form) }}
    {{ _self.fieldReductionBehaviorTaxRate(form) }}

    {{ _self.endCard() }}
    {{ _self.startCard(6, 'ReductionCatalog.conditions','success') }}

    {{ _self.fieldReductionDateRange(form) }}
    {{ _self.fieldReductionList(form, 'groupUsers') }}
    {{ _self.fieldReductionList(form, 'users') }}
    {% if form.suppliers is defined %}
        {{ _self.fieldReductionList(form, 'suppliers') }}
    {% endif %}
    {% if form.productCategories is defined %}
        {{ _self.fieldReductionList(form, 'productCategories') }}
    {% endif %}
    {% if form.productFamilies is defined %}
        {{ _self.fieldReductionList(form, 'productFamilies') }}
    {% endif %}

    {{ _self.endCard() }}

{% endmacro reductionCatalogForm %}

{% macro reductionCatalogFormValues(formValues, isProductFamilyForm= false) %}
    <script>
        window.mixinReductionValues = {
            {% if formValues.status == false and isProductFamilyForm %}reductionActive: false,{% endif %}
            {% if formValues.permanent is not null and formValues.permanent == false %}reductionPermanent: false,{% endif %}
            {% if formValues.behaviorTaxRate %}reductionBehaviorTaxRate: '{{ formValues.behaviorTaxRate }}',{% endif %}
            {% if formValues.value %}reductionValue: parseFloat({{ formValues.value }}),{% endif %}
            {% if formValues.unit %}reductionUnit: "{{ formValues.unit }}",{% endif %}
            {% if formValues.groupUsers is not empty %}reductionGroupUsersActive: true,{% endif %}
            {% if formValues.groupUsers is not empty %}reductionGroupUsers: {{ formValues.groupUsers|json_encode }},{% endif %}
            {% if formValues.users is not empty %}reductionUsersActive: true,{% endif %}
            {% if formValues.users is not empty %}reductionUsers: {{ formValues.users|json_encode }},{% endif %}
            {% if formValues.suppliers is not empty %}reductionSuppliersActive: true,{% endif %}
            {% if formValues.suppliers is not empty %}reductionSuppliers: {{ formValues.suppliers|json_encode }},{% endif %}
            {% if formValues.productFamilies is not empty %}reductionProductFamiliesActive: true,{% endif %}
            {% if formValues.productFamilies is not empty %}reductionProductFamilies: {{ formValues.productFamilies|json_encode }},{% endif %}
            {% if formValues.productCategories is not empty %}reductionProductCategoriesActive: true,{% endif %}
            {% if formValues.productCategories is not empty %}reductionProductCategories: {{ formValues.productCategories|json_encode }},{% endif %}
        }
    </script>
{% endmacro reductionCatalogFormValues %}