{% trans_default_domain 'lcshop' %}
{% import '@LcShop/backend/default/block/macros.html.twig' as macros %}

<div class="row">
    {{ macros.startCard(8, 'ProductFamily.propertyMain', 'light', true) }}
    <table class="table table-bordered">
        <thead>
        <tr>
            {#<th style="width: 10px">#</th>#}
            <th style="width: 40%">{{ 'field.default.property'|trans({}, 'lcshop') }}</th>
            <th style="width: 60%">{{ 'field.default.propertyValue'|trans({}, 'lcshop') }}</th>
        </tr>
        </thead>
        <tbody>
        <tr>

            <td>{{ form_widget(form.propertyNoveltyExpirationDateActive, {"attr" : {'v-model' : 'propertyNoveltyExpirationDateActive'}}) }}</td>
            <td>
                <div v-show="propertyNoveltyExpirationDateActive == true">
                {{ form_widget(form.propertyNoveltyExpirationDate) }}
                </div>
            </td>
        </tr>
        <tr>
            <td>{{ form_widget(form.propertyOrganicLabelActive, {"attr" : {'v-model' : 'propertyOrganicLabelActive' } }) }}</td>
            <td>
                <div class="form-widget" v-show="propertyOrganicLabelActive == true">
                {{ form_widget(form.propertyOrganicLabel) }}
                </div>
            </td>
        </tr>
        <tr>
            <td>{{ form_widget(form.propertyLargeVolume) }}</td>
            <td></td>
        </tr>
        </tbody>
    </table>
    {{ macros.endCard(true) }}

    {{ macros.startCard(0, 'ProductFamily.propertySecondary', 'light', true) }}

    <table class="table table-bordered">
        <thead>
        <tr>
            {#<th style="width: 10px">#</th>#}
            <th style="width: 40%">{{ 'field.default.property'|trans({}, 'lcshop') }}</th>
            <th style="width: 60%">{{ 'field.default.propertyValue'|trans({}, 'lcshop') }}</th>
        </tr>
        </thead>
        <tbody>
        <tr v-show="typeExpirationDate != null && typeExpirationDate != ''">
            <td><label style="text-transform: uppercase">${typeExpirationDate}</label></td>
            <td>{{ form_widget(form.propertyExpirationDate, {'attr' : {'v-model' : 'propertyExpirationDate'}}) }}</td>
        </tr>


        {{ macros.autoresizeField(form.propertyAllergens) }}
        {{ macros.autoresizeField(form.propertyComposition) }}
        {{ macros.autoresizeField(form.propertyFragrances) }}
        {{ macros.autoresizeField(form.propertyQuantity) }}
        {{ macros.autoresizeField(form.propertyWeight) }}
        {{ macros.autoresizeField(form.propertyCharacteristics) }}
        {{ macros.autoresizeField(form.propertyPackaging) }}
        {{ macros.autoresizeField(form.propertyAlcoholLevel) }}
        {{ macros.autoresizeField(form.propertyVariety) }}
        {{ macros.autoresizeField(form.propertyFeature) }}


        </tbody>
    </table>

    {{ macros.endCard() }}

    {{ macros.startCard(4, 'ProductFamily.property', 'light') }}

    <div class="col">


        {{ form_label(form.typeExpirationDate) }}
        {% for field in form.typeExpirationDate %}
            {{ form_widget(field, {"attr" : {"v-model" : 'typeExpirationDate'}}) }}
        {% endfor %}


        <div class="form-group" v-show="typeExpirationDate != null && typeExpirationDate != ''">
            {{ form_label(form.behaviorExpirationDate) }}
            {% for field in form.behaviorExpirationDate %}
                {{ form_widget(field, {"attr" : {"v-model" : 'behaviorExpirationDate'}}) }}
            {% endfor %}
        </div>

    </div>

    {{ macros.endCard() }}


</div>
