{% comment %}theme-check-disable UndefinedObject{% endcomment %}
{%- assign pick_up_availabilities = product_variant.store_availabilities | where: 'pick_up_enabled', true -%}

{%- if pick_up_availabilities.size > 0 -%}
  <pickup-availability-preview class="pickup-availability-preview">
    {%- assign closest_location = pick_up_availabilities.first -%}

    {%- if closest_location.available -%}
      <p class="pickup-availability__info-title">
        {{- 'product.pickup_available_at_html' | t: location_name: closest_location.location.name -}}
      </p>
      <p class="pickup-availability__info-meta">
        {{- closest_location.pick_up_time -}}
      </p>
    {%- else -%}
      <p class="pickup-availability__info-title">
        {{- 'product.pickup_unavailable_at_html' | t: location_name: closest_location.location.name -}}
      </p>
    {%- endif -%}
    <menu-drawer class="pickup-availability__drawer drawer">
      <details id="Pickup-Availability-drawer" class="drawer__container">
        <summary class="drawer__button section__drawer-button">
          <button type="button" class="button button--text button--uppercase">
            {%- if pick_up_availabilities.size == 1 -%}
              {{- 'product.pickup_view_store_info' | t -}}
            {%- else -%}
              {{- 'product.pickup_check_other_stores' | t -}}
            {%- endif -%}
          </button>
        </summary>

        <div class="drawer__content js-drawer" id="Pickup-Availability-menu-drawer" tabindex="-1">
          <button
            class="drawer__button-close button-reset no-js-hidden js-btn-close-drawer"
            aria-label="{{- 'theme.actions.close' | t -}}"
            aria-controls="Pickup-Availability-menu-drawer"
            aria-expanded="false"
          >
            {%- render 'icon', icon_name: 'theme-close' -%}
          </button>
          <div class="drawer__row drawer__row--gutter-sm">
            <h2 class="drawer__title heading-static">
              {{ 'product.pickup_availability' | t }}
            </h2>
            <ul class="pickup-availability-stores list-unstyled" role="list">
              {%- for store_availability in product_variant.store_availabilities -%}
                <li class="pickup-availability-store">
                  <p class="pickup-availability-store__title">
                    {{- store_availability.location.name | escape -}}
                  </p>
                  <p class="pickup-availability-store__preview">
                    {%- if store_availability.available -%}
                      {% render 'icon', icon_name: 'theme-check' %}
                      {{ 'product.pickup_available' | t }}, {{ store_availability.pick_up_time | downcase }}
                    {%- else -%}
                      {% render 'icon', icon_name: 'theme-close' %}
                      {{ 'product.pickup_unavailable' | t }}, {{ store_availability.pick_up_time | downcase }}
                    {%- endif -%}
                  </p>
                  {%- assign store_availability_address = store_availability.location.address -%}
                  <address class="pickup-availability-address">
                    {{- store_availability_address | format_address -}}
                    {%- if store_availability_address.phone.size > 0 -%}
                      <p>{{- store_availability_address.phone -}}</p>
                    {%- endif -%}
                  </address>
                </li>
              {%- endfor -%}
            </ul>
          </div>
        </div>
      </details>
    </menu-drawer>
  </pickup-availability-preview>
{%- endif -%}