{%- assign empty_array = '' | split: '' -%}
<section class="mt-5" data-controller="stock" data-per-page="100">
  <div class="inside m-auto row no-gutters justify-content-center justify-content-lg-start">
    <h1>{{ site.i18n.search.title }}</h1>

    <div class="col-10 col-lg-12">
      <p class="lead gray-600">{{ site.i18n.search.description }} <em>{{ q }}</em></p>
    </div>

    <div class="col-10 col-lg-8">
      {% for result in results %}
        <div class="result row no-gutters mb-5">
          <div class="col-10 col-lg-12">
            <p class="m-0">____</p>
            <h2 class="gray-600">
              {% if result.layout == 'autorx' %}
                <a href="autorxs/#{{ result.slug }}">{{ result.title }}</a>
              {% else %}
                <a href="{{ result.id }}">{{ result.title }}</a>
              {% endif %}
            </h2>
          </div>

          {% if result.layout == 'libro' or result.layout == 'libro_amigo' %}
            <div class="col-12 row no-gutters align-items-start justify-content-center justify-content-lg-between">
              <div class="col-10 col-lg-4">
                <div
                  data-controller="cart"
                  data-stock-target="product"
                  data-sku="{{ result.sku }}"
                  data-cart-variant-id="{{ result.variant_id }}"
                  data-cart-image="{{ result.image.path }}"
                  data-cart-title="{{ result.title }}"
                  data-cart-price="{{ result.price }}"
                  data-cart-digital-price="{{ result.price_digital }}"
                  data-cart-extra="{{ result.author | default: empty_array | join: "|" }}"
                  data-cart-in-stock=""
                  data-cart-stock=""
                  class="libro-chico text-center black d-flex flex-column align-items-center flex-grow-1">
                  <div class="d-flex flex-column align-items-center justify-content-between flex-grow-1">
                    <a href="{{ result.id }}" class="position-relative backdropable">
                      <picture>
                        <source srcset="{{ result.image.path }}" media="(max-width: 767px)" />

                        <img class="cover shadow" src="{{ result.image.path }}" loading="lazy" />
                      </picture>

                      <div class="backdrop position-absolute d-flex flex-column align-items-center justify-content-center w-100 white p-3">
                        <p class="{% unless result.price_digital > 0 %}m-0{% endunless %}">
                          <span data-stock-price>{{ result.price | floor }}</span>
                          <span data-stock-currency>{{ site.i18n.currency }}</span>
                          {{ site.i18n.libro.paper }}
                        </p>
                      </div>
                    </a>

                    <div class="inside">
                      <div class="flex-fill mt-2">
                        <p class="font-weight-bold m-1">
                          <a href="{{ result.id }}">
                            {{ result.title }}
                          </a>
                        </p>

                        <p class="m-1">
                          {{ result.author | default: empty_array | join: ", " }}
                        </p>

                        {%- if result.editorial_amiga.title -%}
                          <p class="m-1">
                            {{ result.editorial_amiga.title }}
                          </p>
                        {%- endif -%}
                      </div>

                      <button
                        data-action="cart#{% if result.price_digital > 0 %}variants{% else %}add{% endif %}"
                        {% unless result.in_stock %}
                          disabled
                        {% endunless %}
                        data-stock-add
                        class="add-to-cart btn btn-tl btn-block pt-0 pb-0 font-smaller">
                        <span class="hide-when-disabled">{{ site.i18n.cart.layouts.cart.add }}</span>
                        <span class="show-when-disabled">{{ site.i18n.libro.agotado }}</span>
                      </button>
                    </div>
                  </div>
                </div>
              </div>

              <div class="col-10 col-lg-8 gray-600 mt-3 mt-md-0">
                {{ result.content | truncate: 500, '...' }}
              </div>
            </div>
          {% else %}
            <div class="col-10 col-lg-12">
              <div class="gray-600">
                {{ result.content | truncate: 500, '...' }}
              </div>

              {% if result.layout == 'autorx' %}
                <a href="autorxs/#{{ result.slug }}">{{ site.i18n.more }}</a>
              {% else %}
                <a href="{{ result.id }}">{{ site.i18n.more }}</a>
              {% endif %}
            </div>
          {% endif %}
        </div>
      {% endfor %}
    </div>
  </div>
</section>