---
layout: default
---

<article
  itemscope itemtype="http://schema.org/Product"
  class="w-100 pb-5 h-entry">
  <div class="m-auto row no-gutters justify-content-center">
    <div class="col-10 col-lg-6">
      <picture>
        <img
          itemprop="image"
          class="img-fluid"
          src="{{ page.image.path | thumbnail: 316 }}"
          alt="{{ page.image.description | default: page.title }}" />
      </picture>

      <div class="w-lg-50">
        <h4 class="sr-only">{{ site.i18n.libro.ficha }}</h4>

        <ul class="border-bottom border-tl list-unstyled pt-5 gray-600">
          <li>
            <time
              class="dt-published"
              itemprop="datePublished"
              datetime="{{ page.date | date_to_xmlschema }}">{{ page.date | date_local: '%B %Y' }}</time>
          </li>

          {% if page.width > 0 %}
            <li itemprop="width" itemscope="https://schema.org/QuantitativeValue">
              <span class="font-weight-bold">{{ site.data.layouts.product.width.label[site.lang] }}</span>
              <span itemprop="value">{{ page.width }}</span>
              <span itemprop="unitText">{{ site.cart.length_unit | default: site.data.layouts.cart.length_unit.default[site.lang] }}</span>
            </li>
          {% endif %}

          {% if page.height > 0 %}
            <li itemprop="height" itemscope="https://schema.org/QuantitativeValue">
              <span class="font-weight-bold">{{ site.data.layouts.product.height.label[site.lang] }}</span>
              <span itemprop="value">{{ page.height }}</span>
              <span itemprop="unitText">{{ site.cart.length_unit | default: site.data.layouts.cart.length_unit.default[site.lang] }}</span>
            </li>
          {% endif %}

          {% if page.depth > 0 %}
            <li itemprop="depth" itemscope="https://schema.org/QuantitativeValue">
              <span class="font-weight-bold">{{ site.data.layouts.product.depth.label[site.lang] }}</span>
              <span itemprop="value">{{ page.depth }}</span>
              <span itemprop="unitText">{{ site.cart.length_unit | default: site.data.layouts.cart.length_unit.default[site.lang] }}</span>
            </li>
          {% endif %}

          {% if page.weight > 0 %}
            <li itemprop="weight" itemscope="https://schema.org/QuantitativeValue">
              <span class="font-weight-bold">{{ site.data.layouts.product.weight.label[site.lang] }}</span>
              <span itemprop="value">{{ page.weight }}</span>
              <span itemprop="unitText">{{ site.cart.weight_unit | default: site.data.layouts.cart.weight_unit.default[site.lang] }}</span>
            </li>
          {% endif %}
        </ul>

        <div itemprop="offers">
          <div
            class="d-flex align-items-center justify-content-between mb-3 ml-1"
            {% include_cached cart_controller.html product=page %}
            itemscope itemtype="https://schema.org/Offer">

            <meta itemprop="sku" content="{{ page.sku }}" />
            <meta itemprop="acceptedPaymentMethod" content="http://purl.org/goodrelations/v1#PayPal" />
            <meta itemprop="availableDeliveryMethod" content="http://purl.org/goodrelations/v1#Mail" />

            {% if page.in_stock %}
              <meta itemprop="availability" content="https://schema.org/InStock" />
            {% else %}
              <meta itemprop="availability" content="https://schema.org/OutOfStock" />
            {% endif %}

            <p>
              <span itemprop="price" data-stock-price>{{ page.price | floor }}</span>
              <span itemprop="priceCurrency" data-stock-currency>{{ site.cart.currency }}</span>
            </p>

            <button
              data-action="cart#add"
              {{ page.in_stock | value_if: 'disabled' }}
              class="btn btn-primary btn-block">
              <span class="hide-when-disabled">{{ site.cart.add }}</span>
              <span class="show-when-disabled">{{ site.cart.out_of_stock | default: site.data.layouts.cart.out_of_stock.default[site.locale] }}</span>
            </button>
          </div>
        </div>
      </div>
    </div>

    <div class="col-10 col-lg-6 black mt-5 mt-lg-0">
      <header>
        <h1 class="p-name" itemprop="name headline">{{ page.title }}</h1>
        <p class="lead p-summary" itemprop="description">{{ page.description }}</p>
      </header>

      <div class="font-weight-light gray-600 lead text-md-justify hyphens-md e-content" itemprop="abstract">
        {{ content }}
      </div>
    </div>
  </div>

  <span hidden itemprop="identifier">{{ page.uuid }}</span>
  <a hidden class="u-url" itemprop="url" href="{{ page.url | absolute_url }}">{{ page.url | absolute_url }}</a>
  <meta itemprop="keywords" content="{{ page.categories | join: ',' }}{% unless page.categories == empty %},{% endunless %}{{ page.tags | join: ',' }}"/>
</article>