{{template "base" .}}

{{define "title"}}{{.Key}} - Search{{end}}

{{define "styles"}}
<style>
    .game-card {
        height: 100%;
        transition: transform 0.2s;
        text-decoration: none;
        color: inherit;
    }

    .game-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    }

    .game-cover {
        height: 200px;
        object-fit: cover;
    }

    .game-description {
        display: -webkit-box;
        line-clamp: 3;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    @media (min-width: 992px) {
        .col-lg-5-item {
            flex: 0 0 20%;
            max-width: 20%;
        }
    }
</style>
{{end}}

{{define "content"}}
<!-- page -->
<div class="container py-4">
    <h2 class="mb-4">Search</h2>
    <small>{{.CurrentPage}}/{{.TotalPage}} pages found for "{{.Key}}"</small>
</div>
<!-- Games Grid -->
<div class="container py-4">
    {{if .Games}}
    <div class="row g-4">
        {{range .Games}}
        <div class="col-12 col-sm-6 col-md-4 col-lg-5-item">
            <a href="/game/{{.ID.Hex}}" class="card game-card">
                {{if .Cover}}
                <img src="{{.Cover}}" class="card-img-top game-cover" alt="{{.Name}}" />
                {{else}}
                <div class="card-img-top game-cover bg-secondary d-flex align-items-center justify-content-center">
                    <span class="text-white">No Image</span>
                </div>
                {{end}}
                <div class="card-body">
                    <h5 class="card-title">{{.Name}}</h5>
                    <p class="card-text game-description">{{.Description}}</p>
                    {{if .Publishers}}
                    <div class="publishers mb-2">
                        <small class="text-muted">Publishers:</small>
                        {{range $index, $publisher := .Publishers}} {{if $index}}, {{end}}
                        <small class="text-muted">{{$publisher}}</small>
                        {{end}}
                    </div>
                    {{end}}
                </div>
            </a>
        </div>
        {{end}}
    </div>
    {{else}}
    <div class="text-center py-5">
        <h4 class="text-muted">No results found for "{{.Key}}"</h4>
    </div>
    {{end}}
</div>
<!-- Pagination -->
<div class="container py-4">
    <nav aria-label="Page navigation">
        <ul class="pagination justify-content-center">
            {{if .PrevPage}}
            <li class="page-item">
                <a class="page-link" href="/search?key={{.Key}}&page={{.PrevPage}}">Previous</a>
            </li>
            {{end}}
            {{if .NextPage}}
            <li class="page-item">
                <a class="page-link" href="/search?key={{.Key}}&page={{.NextPage}}">Next</a>
            </li>
            {{end}}
        </ul>
    </nav>
</div>
{{end}}
{{define "scripts"}} {{end}}