{{include "header.html"}}
{{include "nav.html"}}

{{if index .ThemesExt "show_breadcrumb"}}
{{if .Nav}}
<nav class="bg-gray-100 py-4">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex items-center space-x-2 text-sm">
      <a href="/" class="text-gray-600 hover:text-primary">首页</a>
      {{range .Nav}}
      <span class="text-gray-400">/</span>
      <a href="/{{.Slug}}" class="text-gray-600 hover:text-primary">{{.Name}}</a>
      {{end}}
    </div>
  </div>
</nav>
{{end}}
{{end}}

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
  {{if .Single}}
  <h1 class="text-3xl font-bold mb-8">{{.Single.Name}}</h1>
  {{if .Single.Description}}
  <p class="text-gray-600 text-lg mb-8">{{.Single.Description}}</p>
  {{end}}
  {{else}}
  <h1 class="text-3xl font-bold mb-8">游戏下载</h1>
  {{end}}

  {{if .List}}
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    {{range .List}}
    <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
      <div class="flex p-4">
        {{if .Img}}
        <a href="{{.URL}}" class="block w-24 h-24 flex-shrink-0">
          <img src="{{.Img}}" alt="{{.Title}}" class="w-full h-full object-cover rounded-lg">
        </a>
        {{end}}
        <div class="ml-4 flex-1">
          <h3 class="text-lg font-semibold mb-2">
            <a href="{{.URL}}" class="hover:text-primary transition-colors">{{.Title}}</a>
          </h3>
          {{if .Ext}}
          {{$downloads := index .Ext "downloads"}}
          {{if $downloads}}
          <p class="text-sm text-gray-500 mb-2">{{$downloads}}次下载</p>
          {{end}}
          {{$size := index .Ext "size"}}
          {{if $size}}
          <p class="text-sm text-gray-500 mb-2">大小：{{$size}}</p>
          {{end}}
          {{end}}
          <p class="text-gray-600 text-sm leading-relaxed mb-2">{{StrSub .Description 60}}</p>
        </div>
      </div>
      <div class="px-4 pb-4">
        <a href="{{.URL}}" class="block w-full text-center px-4 py-2 bg-primary text-white text-sm font-medium rounded hover:bg-blue-700 transition-colors">
          立即下载
        </a>
      </div>
    </div>
    {{end}}
  </div>

  {{if .Pager.Enabled}}
  <div class="mt-12 flex justify-center">
    <nav class="flex space-x-2">
      {{if .Pager.HasPrev}}
      <a href="{{.Pager.PrevURL}}" class="px-4 py-2 bg-white border border-gray-300 rounded hover:bg-gray-50 transition-colors">上一页</a>
      {{end}}
      {{range .Pager.Items}}
      {{if .Active}}
      <span class="px-4 py-2 bg-primary text-white rounded">{{.Label}}</span>
      {{else if .URL}}
      <a href="{{.URL}}" class="px-4 py-2 bg-white border border-gray-300 rounded hover:bg-gray-50 transition-colors">{{.Label}}</a>
      {{end}}
      {{end}}
      {{if .Pager.HasNext}}
      <a href="{{.Pager.NextURL}}" class="px-4 py-2 bg-white border border-gray-300 rounded hover:bg-gray-50 transition-colors">下一页</a>
      {{end}}
    </nav>
  </div>
  {{end}}
  {{else}}
  <div class="text-center py-12">
    <p class="text-gray-500 text-lg">暂无游戏</p>
  </div>
  {{end}}
</div>

{{include "footer.html"}}
{{include "js.html"}}