{% block attributes_value_label %}{% endblock %}
{% block attributes_value_widget %}
    {% set codeId = form.code.vars.id %}
    <style>
        .select2-container{
            width: 100%;
        }
    </style>

    <div class="row nmlf">
        {% if form.parent.parent.vars.value.tipo != "property_types" %}
        <div class="col-md-3">{{ form_row(form.nombre, {attr: { class: "form-control" } }) }}</div>
        {% endif %}
        {% if form.parent.parent.vars.value.tipo == "parallax" %}
            <div class="col-md-2">{{ form_row(form.code, {attr: { class: "form-control" } }) }}</div>
            <div class="col-md-4">{{ form_row(form.description, {attr: { class: "form-control" } }) }}</div>
            <div class="col-md-2">{{ form_row(form.link, {attr: { class: "form-control" } }) }}</div>
        {% elseif  form.parent.parent.vars.value.tipo == "property_types"%}
            {#{% set imageId = form.tmpImage.vars.id %}#}
            {#<div class="col-md-2">#}
                {#{{ form_row(form.image_file, { attr: {'class':'form-control'} }) }}#}
            {#</div>#}
            <div class="col-md-2">{{ form_row(form.nombre, {attr: { class: "form-control" } }) }}</div>

            <div class="col-md-4">
                {{ form_row(form.caracteristica, {attr: { class: "form-control" } }) }}
            </div>
            <div class="col-md-3">
                {{ form_row(form.zonasInteres, {attr: { class: "form-control" } }) }}
            </div>

            <div class="col-md-2 cntcheck">
                {{ form_widget(form.activo, { attr: {'class':'minimal'} }) }}
            </div>
        {% else %}
            {% set imageId = form.tmpImage.vars.id %}
            <div class="col-md-3 cntcodefrm"
                 style="display: {{ form.tipo.vars.value == 'attributecolor' ? 'block' : 'none' }};">
                <div class="form-group">
                    <label for="{{ codeId }}">Seleccione Color</label>
                    <div class="input-group" id="color_{{ codeId }}">
                        {{ form_widget(form.code, {attr: { class: "form-control", 'autocomplete': 'off' } }) }}
                        <div class="input-group-addon" style="padding: 0px;border: 0px;">
                            <i style="display:inline-block; height: 34px;width: 28px; background-color: {{ form.code.vars.value ? form.code.vars.value : '#000' }};"></i>
                        </div>
                    </div>
                    {{ form_errors(form.code) }}
                </div>
            </div>

            <div class="col-md-3 cntcodeimage"
                 style="display: {{ form.tipo.vars.value == 'attributeimage' ? 'block' : 'none' }};">
                <div class="form-group">
                    <label for="{{ imageId }}">Seleccione Image</label>
                    <div class="input-group" id="image_{{ imageId }}">
                        {{ form_widget(form.tmpImage, {attr: { class: "form-control"} }) }}
                        <div class="input-group-addon" style="padding: 0px;border: 0px;">
                            <i style="display:inline-block; height: 34px;width: 28px; background: url({{ form.code.vars.value and form.tipo.vars.value == 'attributeimage' ? form.code.vars.value | imagine_filter('thumb50x50') : '' }});"></i>
                        </div>
                    </div>
                    {{ form_errors(form.tmpImage) }}
                </div>
            </div>

            <div class="col-md-3">{{ form_row(form.tipo, {attr: { class: "form-control" } }) }}</div>
        {% endif %}

        <div class="col-md-1">
            <label style="display: block;" class="hidden-sm hidden-xs">&nbsp;</label>
            <button type="button" style="margin-top: 2px;"
                    data-confirm="{{ 'js_attribute_delete_value' | trans({}, 'nomencladoreslevel') }}"
                    class="btn btn-danger qbdelfeature fa fa-trash w-100"></button>
        </div>
    </div>
    {% if form.parent.parent.vars.value.tipo != "parallax" and form.parent.parent.vars.value.tipo != "property_types"  %}
    <script type="text/javascript">
        (function () {
            var t{{ form.tipo.vars.id }} = setInterval(function () {
                var object = jQuery('#{{ form.tipo.vars.id }}');
                if (typeof object.get(0) == "undefined" || typeof jQuery.colorpicker == "undefined") {
                    return;
                }
                clearInterval(t{{ form.tipo.vars.id }});

                jQuery('#{{ form.tipo.vars.id }}').on('change', function () {
                    var _this = jQuery(this);
                    var _codeControl = jQuery('#{{ codeId }}');
                    var _codeControlImage = jQuery('#{{ imageId }}');
                    switch (_this.val()) {
                        case 'attributevalue': {
                            _codeControl.val('');
                            jQuery("#color_{{ codeId }}, #{{ codeId }}").colorpicker('destroy');
                            _codeControl.closest('.cntcodefrm').hide();
                            _codeControlImage.closest('.cntcodeimage').hide();
                            break;
                        }

                        case 'attributecolor': {
                            _codeControl.closest('.cntcodefrm').show();
                            _codeControlImage.closest('.cntcodeimage').hide();
                            break;
                        }

                        case 'attributeimage': {
                            _codeControl.val('');
                            _codeControlImage.closest('.cntcodeimage').show();
                            _codeControl.closest('.cntcodefrm').hide();
                            break;
                        }
                    }
                });

                jQuery("#color_{{ codeId }}, #{{ codeId }}").colorpicker();

            }, 100);
        })();
    </script>
    {% endif %}
{% endblock %}