<div class="card border-0 shadow hover-grow" style="height: 100%;">
    <div class="ratio ratio-16x9 shadow">
        <a href="{{ route('front.aitool.show', ['ai_tool_slug' => $ai_tool->slug]) }}">
            <img class="card-img-top" src="{{ $ai_tool->screenshot_img }}">
        </a>

    </div>

    <div class="card-body">
        <a class="fw-bold" href="{{ route('front.aitool.show', ['ai_tool_slug' => $ai_tool->slug]) }}">
            <h3 class="h5 fw-bold line-clamp-1">{{ $ai_tool->tool_name }}</h3>
        </a>
        <p class="line-clamp-2 mb-2">{!! str_first_sentence($ai_tool->summary) !!}</p>

        <div class="mb-3 d-flex gap-1">
            <span class="badge rounded-pill text-bg-highlighter-yellow">
                <i class="bi bi-currency-dollar"></i> {{ $ai_tool->pricing_type }}
            </span>
            <span class="badge rounded-pill text-bg-highlighter-orange">
                <i class="bi bi-globe"></i>
                @if ($ai_tool->is_app_web_both == 'both')
                    App & Web
                @else
                    {{ ucwords($ai_tool->is_app_web_both) }}
                @endif
            </span>
        </div>



        <div class="d-flex flex-wrap gap-1">
            @foreach ($ai_tool->keywords as $keyword)
                @if ($loop->iteration <= 3)
                    <a href="{{ get_route_search_result($keyword->value_lowercased) }}"
                        class="btn btn-outline-dark btn-sm border-2 px-2 py-1 rounded-pill text-decoration-none text-nowrap">{{ $keyword->value }}</a>
                @else
                    <a href="{{ route('front.discover.home') }}"
                        class="btn btn-outline-dark btn-sm border-2 px-2 py-1 rounded-pill text-decoration-none text-nowrap">
                        + {{ $ai_tool->keywords->count() - 3 }} more
                    </a>
                @break
            @endif
        @endforeach
    </div>


</div>
</div>
