{% for obj in elements %}
    <div >
        <div class="col-xs-12 col-sm-6 col-md-2 col-lg-2">
            <div class="thumbnail">
                {% if 'amazonaws' in obj.filename %}
                    {% set urlFilename =  obj.filename %}
                {% else %}
                    {% set urlFilename =  'uploads/' ~ obj.filename %}
                {% endif %}
                <img src="{{ urlFilename | imagine_filter('list')  }}">
                <div class="caption" style="height: 350px; position: relative">
                    <div style="text-align: center; border-top: solid gainsboro 1px; border-bottom: solid gainsboro 1px;">
                        <h3>{{ obj.alias }}</h3>
                    </div>
                    <table style="border-collapse: separate; width: 100%">
                        <tr>
                            <td style="font-weight: bold">Modelo</td>
                            <td style="text-align: right">{{ obj.articleModel }}</td>
                        </tr>
                        <tr>
                            <td style="font-weight: bold">Color</td>
                            <td style="text-align: right">{{ obj.articleColor }}</td>
                        </tr>
                        <tr>
                            <td style="font-weight: bold">Marca</td>
                            <td style="text-align: right">{{ obj.brand }}</td>
                        </tr>
                        <tr>
                            <td style="font-weight: bold">Temporada</td>
                            <td style="text-align: right">{{ obj.season }}</td>
                        </tr>
                        <tr>
                            <td style="font-weight: bold">Sección</td>
                            <td style="text-align: right">{{ obj.section }}</td>
                        </tr>
                    </table>


                    <div style="border-top: solid gainsboro 1px; border-bottom: solid gainsboro 1px">

                        {% if user.isUserFranchise == false %}
                            {% if obj.stats_pending > 0 or obj.stats_available > 0 %}
                                <table style="border-collapse: separate; border-spacing: 10px" width="100%">
                            {% if obj.stats_available > 0 %}
                                        <tr>
                                            <td>Disponible:</td>
                                            <td style="text-align: right">
                                                <button type="button" class="btn {{ status_stock_service.getStatusColor(constant('CoreBundle\\Model\\TypeStatusStockModel::ID_STATUS_AVAILABLE')) }} btn-rounded show-stock"
                                                        data-target="#modal_full"
                                                        data-toggle="modal"
                                                        data-id="{{ obj.id }}"
                                                        data-status="{{ constant('CoreBundle\\Model\\TypeStatusStockModel::ID_STATUS_AVAILABLE') }}"
                                                        data-compare="availableandtransit"
                                                        style="margin: auto; display: block;min-width: 35px;">{{ obj.stats_available }}
                                                </button>
                                            </td>
                                        </tr>

                                {% endif %}

                                {% if obj.stats_pending > 0 %}
                                    <tr>
                                        <td>Pendiente</td>
                                        <td style="text-align: right">
                                            <button type="button" class="btn {{ status_stock_service.getStatusColor(constant('CoreBundle\\Model\\TypeStatusStockModel::ID_STATUS_PENDING_RECEIPT')) }} btn-rounded show-stock"
                                                    data-target="#modal_full"
                                                    data-toggle="modal"
                                                    data-id="{{ obj.id }}"
                                                    data-status="{{ constant('CoreBundle\\Model\\TypeStatusStockModel::ID_STATUS_AVAILABLE') }}"
                                                    data-compare="minor"
                                                    style="margin: auto; display: block;min-width: 35px;">{{ obj.stats_pending }}
                                            </button>
                                        </td>
                                    </tr>

                                {% endif %}
                                </table>
                            {% else %}
                                <div style="margin-top: 20px; margin-bottom: 20px; width: 100%; text-align: center;">
                                    <span style="font-size: x-small;
                                        font-weight: bold;
                                        color: red;
                                        padding: 5px;
                                        border: solid red 3px">PROUCTO NO DISPONIBLE</span>
                                </div>

                            {% endif %}
                        {% endif %}

                    </div>
                    <div class="text-center" style="position: absolute; bottom: 5px; width: 100%; left: 5px">
                        <a href="{{ path('article',{'id':obj.getId}) }}" class="btn btn-rounded bg-color3" role="button">Ver detalle
                            <i class="icon-pencil7 position-left"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endfor %}