{% form_theme searchForm 'bootstrap_3_layout.html.twig' %}
{{ form_start(searchForm, {'action' : path('website_status_not_available'),'method':'GET'} ) }}
<div class="panel-body">

    {% if websiteConfigId %}
        <div class="row">
            <div class="col-md-3">
                {{ form_row(searchForm.statsAvailable) }}
            </div>
            <div class="col-md-3 {% if "soporte." in user.username %} {% else %} hidden {% endif %}">
                {{ form_row(searchForm.isDisabled) }}
            </div>
        </div>
    {% endif %}

    <div class="row">
        <div class="col-md-3">
            {{ form_row(searchForm.alias) }}
            {% if websiteConfigId %}
                <input type="text" id="searchArticleForm_websiteConfig" name="searchArticleForm[websiteConfig]" value="{{ websiteConfigId }}" class="form-control input-circle typeahead form-control hidden">
            {% endif %}
        </div>

        <div class="col-md-3">
            {{ form_row(searchForm.articleModel) }}
        </div>

        <div class="col-md-3">
            {{ form_row(searchForm.section) }}
        </div>

        <div class="col-md-3">
            {{ form_row(searchForm.typeArticle) }}
        </div>
    </div>

    <div class="row">
        <div class="col-md-3">
            {{ form_row(searchForm.dealer) }}
        </div>

        <div class="col-md-3">
            {{ form_row(searchForm.articleColor) }}
        </div>

        <div class="col-md-3">
            {{ form_row(searchForm.category) }}
        </div>

        <div class="col-md-3">
            {{ form_row(searchForm.priceFrom) }}
        </div>
    </div>

    <div class="row">
        <div class="col-md-3">
            {{ form_row(searchForm.brand) }}
        </div>

        <div class="col-md-3">
            {{ form_row(searchForm.season) }}
        </div>

        <div class="col-md-3">
            {{ form_row(searchForm.subcategory) }}
        </div>

        <div class="col-md-3">
            {{ form_row(searchForm.priceTo) }}
        </div>
    </div>
    <div class="row">

        <div class="">

            {% if group.getGroupConfiguration.getUseLocatorAlias %}
                <div class="col-md-3">
                    {{ form_row(searchForm.locatorAlias) }}
                </div>
            {% endif %}

            {% if group.getGroupConfiguration.getUseLocator %}
                <div class="col-md-3">
                    {{ form_row(searchForm.locator) }}
                </div>
            {% endif %}

            {% if group.groupConfiguration.showAutoincrementNumberForArticle %}
                <div class="col-md-3">
                    {{ form_row(searchForm.autoIncrement) }}
                </div>
            {% endif %}

            <div class="col-md-3 {% if group.groupConfiguration.property1 is empty %} hidden {% endif %}">
                <div class="form-group">
                    <label class="control-label" for="">
                        {{ group.groupConfiguration.property1 }}
                    </label>
                    {{ form_row(searchForm.articleProperty.property1) }}
                </div>
            </div>

            <div class="col-md-3 {% if group.groupConfiguration.property2 is empty %} hidden {% endif %}">
                <div class="form-group">
                    <label class="control-label" for="">
                        {{ group.groupConfiguration.property2 }}
                    </label>
                    {{ form_row(searchForm.articleProperty.property2) }}
                </div>
            </div>

            <div class="col-md-3 {% if group.groupConfiguration.property3 is empty %} hidden {% endif %}">
                <div class="form-group">
                    <label class="control-label" for="">
                        {{ group.groupConfiguration.property3 }}
                    </label>
                    {{ form_row(searchForm.articleProperty.property3) }}
                </div>
            </div>

            <div class="col-md-3 {% if group.groupConfiguration.property4 is empty %} hidden {% endif %}">
                <div class="form-group">
                    <label class="control-label" for="">
                        {{ group.groupConfiguration.property4 }}
                    </label>
                    {{ form_row(searchForm.articleProperty.property4) }}
                </div>
            </div>

            <div class="col-md-3 {% if group.groupConfiguration.property5 is empty %} hidden {% endif %}">
                <div class="form-group">
                    <label class="control-label" for="">
                        {{ group.groupConfiguration.property5 }}
                    </label>
                    {{ form_row(searchForm.articleProperty.property5) }}
                </div>
            </div>

            <div class="col-md-3">
                <div class="form-group">
                    {{ form_row(searchForm.description) }}
                </div>
            </div>

            <div class="col-md-3">
                <div class="form-group">
                    {{ form_row(searchForm.descriptionLabel) }}
                </div>
            </div>

            <div class="col-md-3">
                <div class="form-group">
                    {{ form_row(searchForm.typeSize) }}
                </div>
            </div>

            <div class="col-md-3">
                <div class="form-group">
                    {{ form_row(searchForm.ean) }}
                </div>
            </div>

            <div class="col-md-3">
                <div class="form-group">
                    {{ form_row(searchForm.shop) }}
                </div>
            </div>

            {% if group.groupConfiguration.isTrendico == false and group.groupConfiguration.showReference == true %}
                <div class="col-md-12" style="padding: 0px;">
                    <div class="col-md-3">
                        {{ form_row(searchForm.ref) }}
                    </div>
                </div>
            {% endif %}

            {% if group.groupConfiguration.isTrendico %}
                <div class="col-md-12" style="padding: 0px;">
                    <hr class="m-20">
                    <div class="col-md-3">
                        {{ form_row(searchForm.ref) }}
                    </div>
                    <div class="col-md-2">
                        {{ form_row(searchForm.articleTrendicoPricat.typeTrendicoPricatDivision) }}
                    </div>
                    <div class="col-md-2">
                        {{ form_row(searchForm.articleTrendicoPricat.typeTrendicoPricatGender) }}
                    </div>
                    <div class="col-md-2">
                        {{ form_row(searchForm.articleTrendicoPricat.typeTrendicoPricatCategory) }}
                    </div>
                    <div class="col-md-2">
                        {{ form_row(searchForm.articleTrendicoPricat.typeTrendicoPricatSubcategory) }}
                    </div>
                </div>
            {% endif %}

        </div>

    </div>

    <div class="text-right">
        <a href="{{ path('clear_website_search_not_available',{"id": websiteConfigId}) }}" id="clear" class="btn bg-color7 btn-rounded">Limpiar<i class="glyphicon glyphicon-remove position-right"></i></a>
        <button type="submit" class="btn bg-color3 btn-rounded">Buscar<i class="icon-search4 position-right"></i></button>
    </div>

</div>

{{ form_end(searchForm) }}

<script>


    $(document).ready(function(){

        var route = Routing.generate('_ajax_load_article_model');
        $.ajax({
            type: "GET",
            async: false,
            cache: false,
            timeout: 30000,
            url: route,
            data: null,
            success: function(result) {
                for (i = 0; i < result.length; ++i) {
                    optionText = result[i]["description"];
                    optionValue = result[i]["id"];

                    $('#searchArticleForm_articleModel').append(`<option value="${optionValue}">
                                           ${optionText}
                                      </option>`);
                }
                $('#searchArticleForm_articleModel').select2();
                core_article_search_criteria.getCriteria();
            },
            error: function(err) {
                console.log(err);
            }
        });


    })

</script>