@php
    use App\Availability;
    $product_availability = Availability::find($product->availability);
    $alternative = (isset($alternative)) ? $alternative : false;
    $product_specifications = getProductSpecifications($product);
@endphp
<div class="products-res-list-wrap @if($alternative) alternative @endif ">
    <span class="row no-gutters">
        <span class="d-block col col-250px col-lg-300px col-xxl-420px products-res-list-left">
            <a href="{{ route('product', $product->slug) }}">
                <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) !!}
                </span>
            </a>
        </span>
        <span class="d-block col col-grow-250px col-lg-grow-300px col-xxl-grow-420px products-res-list-right">
            <span class="d-block products-res-list-text">
                @if($product_availability)
                    <span class="d-block products-res-list-availability availability-{{$product_availability->id}}">{{toUpper($product_availability->getTranslation('name'))}}</span>
                @endif
                <span class="d-block products-res-list-title">
                    <span class="text-truncate">{{toUpper($product->getTranslation('name'))}}</span>
                </span>
                @if($product_specifications['year'] || $product_specifications['km'] || $product_specifications['seats'] || $product_specifications['gearbox'] || $product_specifications['fuel'] || $product_specifications['engine'])
                    <span class="d-block products-res-list-features">
                        <span class="row gutters-10 xl-gutters-15">
                            @if($product_specifications['year'])
                                <span class="d-block col-auto">
                                    <span class="d-block products-res-list-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-none d-lg-block d-xl-none d-xxl-block col-auto">
                                    <span class="d-block products-res-list-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['seats'])
                                <span class="d-none d-lg-block d-xl-none d-xxl-block col-auto">
                                    <span class="d-block products-res-list-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['gearbox'])
                                <span class="d-block col-auto">
                                    <span class="d-block products-res-list-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['fuel'])
                                <span class="d-block col-auto">
                                    <span class="d-block products-res-list-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-list-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
                <span class="d-block products-res-list-buttons md-fs-10 lg-fs-1em">
                    <span class="row gutters-5 xxxl-gutters-10">
                        <span class="d-block col col-md-auto">
                            <a href="{{ route('product', $product->slug) }}?test-drive=1" class="d-block products-res-list-book-link">
                                <span class="d-block products-res-list-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'))}}
                                </span>
                            </a>
                        </span>
                        @if($product->warranty)
                        <span class="col-auto d-none d-md-block d-xl-none d-xxl-block">
                            <a href="{{route('services_page')}}?service=2" class="d-block products-res-list-book-link">
                                <span class="d-block products-res-list-button">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10.92 14.32">
                                        <use
                                            xlink:href="{{static_asset('assets/img/icons/warranty-icon.svg')}}#content"></use>
                                    </svg>
                                    {{toUpper(translate('Warranty Included'))}}
                                </span>
                            </a>
                        </span>
                        @endif
                        @if($product->financial_support)
                        <span class="col-auto d-none d-md-block d-xl-none d-xxl-block">
                            <a href="{{route('services_page')}}?service=1" class="d-block products-res-list-book-link">
                                <span class="d-block products-res-list-button">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13.52 12.46">
                                        <use
                                            xlink:href="{{static_asset('assets/img/icons/financial-support.svg')}}#content"></use>
                                    </svg>
                                    {{toUpper(translate('Financial Support'))}}
                                </span>
                            </a>
                        </span>
                        @endif
                    </span>
                </span>
            </span>
            <a href="{{ route('product', $product->slug) }}"></a>
        </span>
    </span>
</div>