{% if articleHeader %}
<div class="media">
    <div class="media-left">
        <a href="{{ articleHeader.getWebPath | imagine_filter('big_prop') }}" class="profile-thumb"
           data-popup="lightbox">
            <img src="{{ articleHeader.getWebPath | imagine_filter('small_prop') }}" alt="">
        </a>

        {% if roleRight == true %}
        <!-- VISITS -->
        <div class="col-xs-12" style="padding: 0px;text-align: center; margin-top: 10px;">
            <div class="col-xs-12" style="padding: 0px;background-color: #cecece;font-size: 10px;">
                <small><strong>VISITAS</strong></small>
            </div>
            <div class="col-xs-6" style="padding: 0px;border:1px solid #cecece;">
                <span class="font-weight-semibold mb-0" style="margin-top:0px;margin-bottom: 0px;">{{ articleHeader.assistantVisits|number_format }}</span>
                <br>
                <span class="text-muted font-size-sm" style="margin-top:0px;margin-bottom: 0px;font-size: 10px;">TPV</span>
            </div>
            <div class="col-xs-6" style="padding: 0px;border:1px solid #cecece;">
                <span class="font-weight-semibold mb-0" style="margin-top:0px;margin-bottom: 0px;">{{ articleHeader.websiteVisits|number_format }}</span>
                <br>
                <span class="text-muted font-size-sm" style="margin-top:0px;margin-bottom: 0px;font-size: 10px;">WEB</span>
            </div>

        </div>
        {% endif %}

    </div>

    <div class="media-body">
        <div class="row">
            <div class="col-md-12">

                <div class="">
                    <div class="col-xs-3" style="font-size:11px; padding: 3px 0px 0px 0px;">
                        Modelo
                    </div>

                    <div class="col-xs-9">
                        {{ articleHeader.articleModel }}
                    </div>
                </div>
                <div class="">
                    <div class="col-xs-3" style="font-size:11px; padding: 3px 0px 0px 0px;">
                        Color
                    </div>
                    <div class="col-xs-9">
                        {{ articleHeader.articleColor }}
                    </div>
                </div>
                <div class="">
                    <div class="col-xs-3" style="font-size:11px; padding: 3px 0px 0px 0px;">
                        Marca
                    </div>
                    <div class="col-xs-9">
                        {{ articleHeader.brand }}
                    </div>
                </div>
                <div class="">
                    <div class="col-xs-3" style="font-size:11px; padding: 3px 0px 0px 0px;">
                        Proveedor
                    </div>
                    <div class="col-xs-9">
                        {{ articleHeader.dealer }}
                    </div>
                </div>

                <div class="">
                    <div class="col-xs-3" style="font-size:11px; padding: 3px 0px 0px 0px;">
                        Serie
                    </div>
                    <div class="col-xs-9">
                        {{ articleHeader.serie }}
                    </div>
                </div>

                <div class="">
                    <div class="col-xs-3" style="font-size:11px; padding: 3px 0px 0px 0px;">
                        Temporada
                    </div>
                    <div class="col-xs-9">
                        {{ articleHeader.season }}
                    </div>
                </div>

                <!-- PROPERTIES -->
                {% if articleHeader.articleProperty %}
                    <div class=" {% if articleHeader.group.groupConfiguration.property1 is empty %} hidden {% endif %}" style="padding: 0px" >
                        <div class="col-xs-3" style="font-size:11px; padding: 3px 0px 0px 0px;">
                            {{ articleHeader.group.groupConfiguration.property1 }}
                        </div>
                        <div class="col-xs-9">
                            {{ articleHeader.articleProperty.property1 }}
                        </div>
                    </div>

                    <div class="col-xs-12 {% if articleHeader.group.groupConfiguration.property2 is empty %} hidden {% endif %}" style="padding: 0px" >
                        <div class="col-xs-3" style="font-size:11px; padding: 3px 0px 0px 0px;">
                            {{ articleHeader.group.groupConfiguration.property2 }}
                        </div>
                        <div class="col-xs-9">
                            {{ articleHeader.articleProperty.property2 }}
                        </div>
                    </div>

                    <div class="col-xs-12 {% if articleHeader.group.groupConfiguration.property3 is empty %} hidden {% endif %}" style="padding: 0px" >
                        <div class="col-xs-3" style="font-size:11px; padding: 3px 0px 0px 0px;">
                            {{ articleHeader.group.groupConfiguration.property3 }}
                        </div>
                        <div class="col-xs-9">
                            {{ articleHeader.articleProperty.property3 }}
                        </div>
                    </div>

                    <div class="col-xs-12 {% if articleHeader.group.groupConfiguration.property4 is empty %} hidden {% endif %}" style="padding: 0px" >
                        <div class="col-xs-3" style="font-size:11px; padding: 3px 0px 0px 0px;">
                            {{ articleHeader.group.groupConfiguration.property4 }}
                        </div>
                        <div class="col-xs-9">
                            {{ articleHeader.articleProperty.property4 }}
                        </div>
                    </div>

                    <div class="col-xs-12 {% if articleHeader.group.groupConfiguration.property5 is empty %} hidden {% endif %}" style="padding: 0px" >
                        <div class="col-xs-3" style="font-size:11px; padding: 3px 0px 0px 0px;">
                            {{ articleHeader.group.groupConfiguration.property5 }}
                        </div>
                        <div class="col-xs-9">
                            {{ articleHeader.articleProperty.property5 }}
                        </div>
                    </div>
                {% endif %}
                <!-- PROPERTIES -->

                {% if articleHeader.isManualCreation %}
                    <div class="">
                        <span class="label bg-status-border">CREACIÓN MANUAL</span>
                    </div>
                {% endif %}
                {% if articleHeader.isWhiteLabel %}
                    <div class="">
                        <span class="label bg-status-border">ARTÍCULO MARCA BLANCA</span>
                    </div>
                {% endif %}
                <!-- commented until think to know what to do with it -->
                {#<div class="col-md-12">
                    <div class="col-md-2" style=" ">
                        Precio costo
                    </div>
                    <div class="col-md-10">
                        {{ articleHeader.defaultCostPrice }} €
                    </div>
                </div>
                #}
            </div>

        </div>
    </div>
</div>
{% endif %}