{% 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 %}

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


{% 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 reductionCatalogForm(form) %}
    {{ _self.startCard(6, 'ReductionCatalog.info') }}
    <div class="col-12">
        {{ form_row(form.title) }}
    </div>
    {# <div class="col-12">
         {{ form_row(form.fromQuantity) }}
     </div>
 #}
    <div class="col-12">
        {{ form_row(form.behaviorTaxRate, {"attr" : {":required": "reductionActive"}}) }}
    </div>

    <div class="col-12">
        {{ form_row(form.unit, {"attr" : {":required": "reductionActive"}}) }}
    </div>
    <div class="col-12">
        {{ form_row(form.value, {"attr" : {":required": "reductionActive"}}) }}
    </div>



    {{ _self.endCard() }}


    {{ _self.startCard(6, 'ReductionCatalog.conditions','success') }}
    <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>
    <div class="col-12">
        <div class="form-group">
            <div class="form-group">
                {{ form_widget(form.usersActive, {"attr" : {'v-model' : 'reductionUsersActive' } }) }}
            </div>
            <div class="form-widget" v-show="reductionUsersActive == true">
                {{ form_widget(form.users) }}
            </div>
        </div>
    </div>
    <div class="col-12">
        <div class="form-group">
            <div class="form-group">
                {{ form_widget(form.groupUsersActive, {"attr" : {'v-model' : 'reductionGroupUsersActive' } }) }}
            </div>
            <div class="form-widget" v-show="reductionGroupUsersActive == true">
                {{ form_widget(form.groupUsers) }}
            </div>
        </div>

    </div>
    {% if form.suppliers is defined %}
        <div class="col-12">
            <div class="form-group">
                <div class="form-group">
                    {{ form_widget(form.suppliersActive, {"attr" : {'v-model' : 'reductionSuppliersActive' } }) }}
                </div>
                <div class="form-widget" v-show="reductionSuppliersActive == true">
                    {{ form_widget(form.suppliers) }}
                </div>
            </div>
        </div>
    {% endif %}
    {% if form.productCategories is defined %}
        <div class="col-12">
            <div class="form-group">
                <div class="form-group">
                    {{ form_widget(form.productCategoriesActive, {"attr" : {'v-model' : 'reductionProductCategoriesActive' } }) }}
                </div>
                <div class="form-widget" v-show="reductionProductCategoriesActive == true">
                    {{ form_widget(form.productCategories) }}
                </div>
            </div>
        </div>
    {% endif %}
    {% if form.productFamilies is defined %}
        <div class="col-12">
            <div class="form-group">
                <div class="form-group">
                    {{ form_widget(form.productFamiliesActive, {"attr" : {'v-model' : 'reductionProductFamiliesActive' } }) }}
                </div>
                <div class="form-widget" v-show="reductionProductFamiliesActive == true">
                    {{ form_widget(form.productFamilies) }}
                </div>
            </div>
        </div>
    {% endif %}

    {{ _self.endCard() }}

{% endmacro %}

{% 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.users is not empty %}reductionUsersActive: true,{% endif %}
        {% if formValues.groupUsers is not empty  %}reductionGroupUsersActive: true,{% endif %}
        {% if formValues.productFamilies is not empty  %}reductionProductFamiliesActive: true,{% endif %}
        {% if formValues.productCategories is not empty  %}reductionProductCategoriesActive: true,{% endif %}
        {% if formValues.suppliers is not empty  %}reductionSuppliersActive: true,{% endif %}
    }
</script>
{% endmacro %}