@foreach($hostels as $hostel)
    <div onmouseout="itemMouseOut()" onmouseover="viewMarker('{{ $hostel->name }}')" class="single-item single-item-2" data-url="{{ url('nha-tro/'.str_slug($hostel->name).'-'.$hostel->id) }}" data-hostel="{{ $hostel->id }}" data-lat="{{ $hostel->lat }}" data-lng="{{ $hostel->lng }}" data-title="{{ $hostel->name }}">
    <div class="item-data-col flex-item flex-item-dw">
        <a href="#" class="item__data-wrapper item-map" data-lat="{{ $hostel->lat }}" data-lng="{{ $hostel->lng }}" data-id="{{ $hostel->id }}">
            <h3 class="item__title">Nhà trọ {{ \App\Components\Functions::generateHostelName($hostel->name) }}</h3>
            <div class="item__type">{{ $hostel->type_rent_text }}

                @if($hostel->status_confirm == 1)
                <span style="color: green">({{ $hostel->status_confirm_text }})</span>
                    @else
                    <span>({{ $hostel->status_confirm_text }})</span>
                @endif

            </div>
            {{--<div class="item__ratings">--}}
                {{--<div class="item__rating__points">3.6</div>--}}
                {{--<div class="item__ratings__stars">--}}
                    {{--<i class="ion-ios-star"></i>--}}
                    {{--<i class="ion-ios-star"></i>--}}
                    {{--<i class="ion-ios-star"></i>--}}
                    {{--<i class="ion-ios-star-half"></i>--}}
                    {{--<i class="ion-ios-star-outline"></i>--}}
                {{--</div>--}}
                {{--<div class="item__rating__votes">(27)</div>--}}
            {{--</div>--}}
            <div class="item__address" style="word-break: break-all">{{ $hostel->address }}</div>
        </a>
    </div>
    <div class="item-action-col flex-item flex-item-tw">
        <div class="item__actions-wrapper">
            <a href="#" class="item__single-action item__single-action--call">
                <i class="action-icon ion-android-chat"></i>
                <span class="action-label text-uppercase">Nhắn tin</span>
            </a>
        </div>
    </div>
</div>

@endforeach