<div class="row">

    <div class="small-12 medium-6 columns">

        <h4 class="lista_prod">Descripci&oacute;n del producto</h4>

        <div class="right">

            {% if producto.referencia|length > 0 %}

            <p>Ref. {{ producto.referencia }}</p>        

            {% endif %}

        </div>

        <input type="hidden" id="idExt" name="idExt" value="{{ producto.extensiones.first.id }}" />

        <input type="hidden" id="id" name="id" value="{{ producto.id }}" />

        <div class="row">

            <div class="small-12 medium-3 columns">

                {% if producto.imagenes|length > 0 %}

                {% set img = producto.imagenes.first %}

                <div class="row visor_imagen">

                    <div class="small-12 columns">

        		        <a data-featherlight id="idProducto" href="{{ urlImg }}productos/{{ producto.id }}/{{ img.archivo }}">		    

        			        <img src="{{ urlImg }}productos/{{ producto.id }}/{{ img.archivo }}" alt="{{ producto.nombre }}" />

        		        </a>

                    </div>

                </div>

                {#<div class="row lista_thumbs">

                    <div class="small-12 columns">

                        <ul class="small-block-grid-4">

                            {% for i in producto.imagenes %}

                            <li>

                                <img rel="thumbImagen" data-img="{{ urlImg }}productos/{{ producto.id }}/{{ i.archivo }}" src="{{ urlImg }}productos/{{ producto.id }}/thumb/{{ i.archivo }}" alt="{{ i.descripcion }}" />        

                            </li>

                            {% endfor %}

                        </ul>

                    </div>

                </div>#}

                {% endif %}	

            </div>

            <div class="small-12 medium-9 columns">

                <div class="row">

                    <div class="small-6 columns text-center">

                        {% if producto.imagenes|length > 1 %}

                        {% set img = producto.imagenes[1] %}

                        <img class="muestra_prod" src="{{ urlImg }}productos/{{ producto.id }}/{{ img.archivo }}" alt="{{ producto.nombre }}" />

                        {% endif %}

                    </div>

                    <div class="small-6 columns">

                        {# <h3>{{ producto.nombre }}</h3> #}

                        <div class="precio_prod"><p>$ {{ producto.valor_base|number_format }}</p></div>

                    </div>

                </div>

                <div class="row">

                    <div class="small-12 columns">

                        <p>{{ producto.descripcion }}</p>        

                        {% set atributos = producto.atributosRef %}

                        {% if atributos|length > 0 %}

                        <h4>Caracter&iacute;sticas</h4>

                        <ul class="atributos">

                        {% for a in atributos %}

                            {% if a.valor|length > 0 %}

                                <li>{{ a.atributo.descripcion }}: {{ a.valor }}</li>

                            {% endif %}

                        {% endfor %}

                        </ul>

                        {% endif %}



                        {# % set listaTallas = ref.id|getTallas(color) %}

                        {% if listaTallas|length > 0 %}

                            <div {% if listaTallas|length == 1 %}style="display: none"{% endif %}>    	            	

                                <select class="selectTalla" id="talla{{ ref.id }}" data-ref="{{ ref.id }}">

                                    <option value="0">Elige la Talla</option>

                                    {% for t in listaTallas %}

                                    <option value="{{ t.id_talla }}" {% if listaTallas|length == 1 %}selected{% endif %}>{{ t.abrev }}</option>

                                    {% endfor %}

                                </select>

                            </div>

                            <br />

                        {% endif % #}

                    </div>

                </div>

            </div>

        </div>

    </div>

    <div class="small12 medium-6 columns">

        <div class="row">

            <div class="small-12 medium-5 columns">

                <h4 class="lista_prod">Colecci&oacute;n</h4>

                <h4 class="nombre_cat mini">{{ cat.nombre }}</h4>

            </div>

            <div class="small-12 medium-7 columns">

                <ul class="small-block-grid-2 medium-block-grid-4">

                {% for p in cat.productos %}

                    <li>

                        {% set img = p.imagenes.first %}

                        <a href="index.php?option=com_my_component&controller=catalogo&task=mostrarProducto&id={{ p.id }}">

                            <img src="{{ urlImg }}productos/{{ p.id }}/{{ img.archivo }}" alt="{{ p.nombre }}" />	

                        </a>

                    </li>

                {% endfor %}

                </ul>

            </div>

        </div>

        <div class="row">

            <div class="small-6 medium-2 columns">Cantidad</div>

            <div class="small-6 medium-2 columns end"><input type="text" id="cantidad" value="1" /></div>

            {% if producto.extensiones|length > 1 %}

            <div class="small-6 medium-2 columns">Color</div>

            <div class="small-6 columns">

                <div class="listaColores clearfix">

                    {% for e in producto.extensiones %}

                    {% set color = e.color  %}

                    <a class="lnkColor left" href="#" style="background-color: {{ color.codigo }}" data-ref="{{ producto.id }}" data-ext="{{ e.id }}" data-color="{{ color.id }}"></a>

                    <!--input type="radio" class="color" id="color_{{ producto.id }}_{{ color.id }}" name="color_{{ producto.id }}" data-ref="{{ producto.id }}" value="{{ e.id }}" />

                    <label for="color_{{ producto.id }}_{{ color.id }}" style="background-color: {{ color.codigo }}">{{ codigo.nombre }}</label-->

                    {% endfor %}                                

                </div>

            </div>

            {% endif %}

        </div>

        <div class="row">

            <div class="small-12 columns">

                <a class="button round rosa" rel="lnkAgregarProd" href="index.php?option=com_my_component&controller=carrito&task=agregarProducto">Comprar</a>

                <a class="button round" href="index.php">Regresar</a>

            </div>

        </div>    

    </div>

</div>