{{template "base" .}} {{define "title"}}GameDB{{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;
    -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"}}
<!-- Search Section -->
<div class="bg-light py-4">
  <div class="container">
    <form action="/search" method="GET">
      <div class="row justify-content-center">
        <div class="col-md-8">
          <div class="input-group">
            <input
              type="text"
              class="form-control"
              name="q"
              placeholder="搜索游戏..."
            />
            <button class="btn btn-primary" type="submit">搜索</button>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>

<!-- Games Grid -->
<div class="container py-4">
  <h2 class="mb-4">Month Top</h2>
  <div class="row g-4">
    {{range .MonthTop}}
    <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">暂无图片</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">发行商:</small>
            {{range $index, $publisher := .Publishers}} {{if $index}}, {{end}}
            <small class="text-muted">{{$publisher}}</small>
            {{end}}
          </div>
          {{end}}
        </div>
      </a>
    </div>
    {{end}}
  </div>
</div>
{{end}} {{define "scripts"}} {{end}}