@php
    use App\Availability;
    $product_availability = Availability::find($product->availability);
    $alternative = (isset($alternative)) ? $alternative : false;
    $product_specifications = getProductSpecifications($product);
@endphp
<div class="h-100 d-flex flex-column products-res-column-wrap @if($alternative) alternative @endif">
    <span class="d-block products-res-image">
            <img
                class="img-fit lazyload absolute-full h-100"
                src="{{ static_asset('assets/img/placeholder.jpg') }}"
                data-src="{{ uploaded_asset($product->thumbnail_img) }}"
                alt=""
                onerror="this.onerror=null;this.src='{{ static_asset('assets/img/placeholder.jpg') }}';"
            >
            {!! getPriceDisplay($product) !!}
        @if($product_availability)
            <span class="d-block products-res-column-availability availability-{{$product_availability->id}}">{{toUpper($product_availability->getTranslation('name'))}}</span>
        @endif
    </span>
    <span class="d-block products-res-column-text">
        <span class="d-block products-res-column-title">
            <span class="text-truncate-2">{{toUpper($product->getTranslation('name'))}}</span>
        </span>
        @if($product_specifications['year'] || $product_specifications['km'] || $product_specifications['gearbox'] || $product_specifications['seats'] || $product_specifications['fuel'] || $product_specifications['engine'])
            <span class="d-block products-res-column-features">
                <span class="row gutters-5 justify-content-between">
                    @if($product_specifications['year'])
                        <span class="d-block col-auto">
                            <span class="d-block products-res-column-feature">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12.24 12.31">
                                    <use xlink:href="{{static_asset('assets/img/icons/year-icon.svg')}}#content"></use>
                                </svg>
                                {{$product_specifications['year']}}
                            </span>
                        </span>
                    @endif
                    @if($product_specifications['km'])
                        <span class="d-block col-auto">
                            <span class="d-block products-res-column-feature">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30.6 20">
                                    <use xlink:href="{{static_asset('assets/img/icons/km-icon.svg')}}#content"></use>
                                </svg>
                                {{$product_specifications['km']}}
                            </span>
                        </span>
                    @endif
                    @if($product_specifications['gearbox'])
                        <span class="d-block col-auto">
                            <span class="d-block products-res-column-feature">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11.58 15.04">
                                    <use xlink:href="{{static_asset('assets/img/icons/transmission-icon.svg')}}#content"></use>
                                </svg>
                                {{toUpper($product_specifications['gearbox'])}}
                            </span>
                        </span>
                    @endif
                    @if($product_specifications['seats'])
                        <span class="d-block col-auto">
                            <span class="d-block products-res-column-feature">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10.29 14.37">
                                    <use xlink:href="{{static_asset('assets/img/icons/seats-icon.svg')}}#content"></use>
                                </svg>
                                {{$product_specifications['seats']}}
                            </span>
                        </span>
                    @endif
                    @if($product_specifications['fuel'])
                        <span class="d-block col-auto">
                            <span class="d-block products-res-column-feature">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13.68 13.68">
                                    <use xlink:href="{{static_asset('assets/img/icons/fuel-icon.svg')}}#content"></use>
                                </svg>
                                {{toUpper($product_specifications['fuel'])}}
                            </span>
                        </span>
                    @endif
                    @if($product_specifications['engine'])
                        <span class="d-block col-auto">
                            <span class="d-block products-res-column-feature">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                    <use xlink:href="{{static_asset('assets/img/icons/engine-icon.svg')}}#content"></use>
                                </svg>
                                {{$product_specifications['engine']}}
                            </span>
                        </span>
                    @endif
                </span>
            </span>
        @endif
        <a href="{{ route('product', $product->slug) }}?test-drive=1" class="d-block products-res-column-button outline">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14.78 14.77">
                <use
                    xlink:href="{{static_asset('assets/img/icons/test-drive.svg')}}#content"></use>
            </svg>
            {{toUpper(translate('Book a Test Drive'))}}
        </a>
    </span>
    <a href="{{ route('product', $product->slug) }}"></a>
</div>