{{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;
    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"}}
<!-- 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">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>
</div>

<div class="container py-4">
  <h2 class="mb-4">Most Played</h2>
  <div class="row g-4">
    {{range .MostPlayed}}
    <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>
</div>

<div class="container py-4">
  <h2 class="mb-4">Best of the Year</h2>
  <div class="row g-4">
    {{range .BestOfTheYear}}
    <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>
</div>
{{end}}
{{define "scripts"}} {{end}}