{% assign closest_location = pick_up_availabilities.first %}

<xo-product-pickup-availability class='xo-pickup-availability-item'>
  <div class='xo-pickup-availability-item__icon'>
    {% if closest_location.available %}
      {% render 'icon', name: 'check2', size: '2rem' %}
    {% endif %}
  </div>
  <div class='xo-pickup-availability-item__content'>
    {%- if closest_location.available -%}
      <span class='xo-pickup-availability-item__name'>
        {{ 'products.product.pickup_availability.pick_up_available_at_html' | t: location_name: closest_location.location.name }}.
      </span>
      <span class='xo-pickup-availability-item__time'>{{ closest_location.pick_up_time }}</span>
      <br>
      <xo-modal-trigger xo-name='pickup-availability'>
        {%- if pick_up_availabilities.size == 1 -%}
          {% assign label = 'products.product.pickup_availability.view_store_info' | t %}
        {%- else -%}
          {% assign label = 'products.product.pickup_availability.check_other_stores' | t %}
        {%- endif -%}
        {% render 'button', text: label, style: 'link', mode: 'dark' %}
      </xo-modal-trigger>
    {%- else -%}
      {%- if pick_up_availabilities.size > 1 -%}
        <p class='xo-pickup-availability-item__name'>{{ 'products.product.pickup_availability.pick_up_unavailable_at_html' | t: location_name: closest_location.location.name }}</p>
        <xo-modal-trigger xo-name='pickup-availability'>
          {% assign label = 'products.product.pickup_availability.check_other_stores' | t %}
          {% render 'button', text: label, style: 'link', mode: 'dark' %}
        </xo-modal-trigger>
      {%- endif -%}
    {%- endif -%}
  </div>
</xo-product-pickup-availability>
