{{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}}
      <span class="text-gray-400">/</span>
      <span class="text-gray-900">{{.Content.Title}}</span>
    </div>
  </div>
</nav>
{{end}}
{{end}}

{{if .Content}}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
    <div class="lg:col-span-2">
      <article>
        <div class="bg-white rounded-lg shadow-lg p-6 mb-8">
          <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            {{if .Content.Img}}
            <div class="md:col-span-1">
              <img src="{{.Content.Img}}" alt="{{.Content.Title}}" class="w-full rounded-lg">
            </div>
            {{end}}
            <div class="md:col-span-2">
              <h1 class="text-3xl font-bold text-gray-900 mb-4">{{.Content.Title}}</h1>
              
              {{if .Content.Ext}}
              <div class="grid grid-cols-2 gap-4 mb-6 text-sm">
                {{$size := index .Content.Ext "size"}}
                {{if $size}}
                <div class="flex justify-between bg-gray-50 rounded-lg px-4 py-2">
                  <span class="text-gray-500">大小</span>
                  <span class="text-gray-900 font-medium">{{$size}}</span>
                </div>
                {{end}}
                
                {{$version := index .Content.Ext "version"}}
                {{if $version}}
                <div class="flex justify-between bg-gray-50 rounded-lg px-4 py-2">
                  <span class="text-gray-500">版本</span>
                  <span class="text-gray-900 font-medium">{{$version}}</span>
                </div>
                {{end}}
                
                {{$platforms := index .Content.Ext "platforms"}}
                {{if $platforms}}
                <div class="flex justify-between bg-gray-50 rounded-lg px-4 py-2">
                  <span class="text-gray-500">平台</span>
                  <span class="text-gray-900 font-medium">{{$platforms}}</span>
                </div>
                {{end}}
                
                {{$lang := index .Content.Ext "lang"}}
                {{if $lang}}
                <div class="flex justify-between bg-gray-50 rounded-lg px-4 py-2">
                  <span class="text-gray-500">语言</span>
                  <span class="text-gray-900 font-medium">{{$lang}}</span>
                </div>
                {{end}}
                
                {{$publisher := index .Content.Ext "publisher"}}
                {{if $publisher}}
                <div class="flex justify-between bg-gray-50 rounded-lg px-4 py-2">
                  <span class="text-gray-500">厂商</span>
                  <span class="text-gray-900 font-medium">{{$publisher}}</span>
                </div>
                {{end}}
                
                {{$releaseDate := index .Content.Ext "release_date"}}
                {{if $releaseDate}}
                <div class="flex justify-between bg-gray-50 rounded-lg px-4 py-2">
                  <span class="text-gray-500">上线日期</span>
                  <span class="text-gray-900 font-medium">{{$releaseDate}}</span>
                </div>
                {{end}}
              </div>
              {{end}}
              
              <div class="mb-6">
                <p class="text-gray-600 leading-relaxed">{{.Content.Description}}</p>
              </div>
              
              <div class="space-y-3">
                {{$dlAndroid := index .Content.Ext "dl_android"}}
                {{$dlIos := index .Content.Ext "dl_ios"}}
                {{if and $dlAndroid $dlIos}}
                <div class="flex gap-3">
                  <a href="{{$dlAndroid}}" class="flex-1 text-center px-4 py-3 bg-green-500 text-white font-medium rounded-lg hover:bg-green-600 transition-colors">
                    安卓下载
                  </a>
                  <a href="{{$dlIos}}" class="flex-1 text-center px-4 py-3 bg-blue-500 text-white font-medium rounded-lg hover:bg-blue-600 transition-colors">
                    iOS下载
                  </a>
                </div>
                {{else}}
                {{if $dlAndroid}}
                <a href="{{$dlAndroid}}" class="block w-full text-center px-4 py-3 bg-green-500 text-white font-medium rounded-lg hover:bg-green-600 transition-colors">
                  安卓下载
                </a>
                {{end}}
                {{if $dlIos}}
                <a href="{{$dlIos}}" class="block w-full text-center px-4 py-3 bg-blue-500 text-white font-medium rounded-lg hover:bg-blue-600 transition-colors">
                  iOS下载
                </a>
                {{end}}
                {{end}}
                
                {{$dlPc := index .Content.Ext "dl_pc"}}
                {{if $dlPc}}
                <a href="{{$dlPc}}" class="block w-full text-center px-4 py-3 bg-purple-500 text-white font-medium rounded-lg hover:bg-purple-600 transition-colors">
                  PC下载
                </a>
                {{end}}
              </div>
            </div>
          </div>
        </div>

        <div class="bg-white rounded-lg shadow-lg p-6 mb-8">
          <h2 class="text-2xl font-bold mb-4">游戏介绍</h2>
          <div class="prose prose-lg max-w-none">
            {{.Content.Content|Str2Html}}
          </div>
        </div>

        {{if .Content.Tags}}
        <div class="bg-white rounded-lg shadow-lg p-6 mb-8">
          <h2 class="text-2xl font-bold mb-4">标签</h2>
          <div class="flex flex-wrap gap-2">
            {{range .Content.Tags}}
            <a href="{{.URL}}" class="px-3 py-1 bg-gray-100 text-gray-700 rounded-full text-sm hover:bg-gray-200 transition-colors">{{.Name}}</a>
            {{end}}
          </div>
        </div>
        {{end}}

        {{if .Content.Albums}}
        <div class="bg-white rounded-lg shadow-lg p-6 mb-8">
          <h2 class="text-2xl font-bold mb-4">游戏截图</h2>
          <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
            {{range .Content.Albums}}
            <img src="{{.}}" alt="游戏截图" class="w-full h-auto rounded-lg">
            {{end}}
          </div>
        </div>
        {{end}}

        <div class="bg-white rounded-lg shadow-lg p-6">
          <h2 class="text-2xl font-bold mb-6">相关游戏</h2>
          {{$related := Related .Content.Id 4}}
          {{if $related}}
          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            {{range $related}}
            <div class="bg-gray-50 rounded-lg overflow-hidden hover:shadow-md transition-shadow">
              {{if .Img}}
              <img src="{{.Img}}" alt="{{.Title}}" class="w-full h-32 object-cover">
              {{end}}
              <div class="p-4">
                <h4 class="text-lg font-semibold mb-2">
                  <a href="{{.URL}}" class="hover:text-primary transition-colors">{{.Title}}</a>
                </h4>
              </div>
            </div>
            {{end}}
          </div>
          {{end}}
        </div>
      </article>
    </div>

    <div class="lg:col-span-1">
      <aside class="bg-white rounded-lg shadow-lg p-6 sticky top-24">
        <h2 class="text-xl font-bold mb-4">{{if .Content.ColumnName}}{{.Content.ColumnName}}{{else}}最新游戏{{end}}</h2>
        {{if .Single.Slug}}
        {{with $latest := ColumnContents .Single.Slug 10}}
        {{if $latest}}
        <div class="space-y-3">
          {{range $index, $item := $latest}}
          <a href="{{$item.URL}}" class="block group">
            <div class="flex items-start space-x-3">
              {{if eq $index 0}}
              <div class="w-6 h-6 flex-shrink-0 flex items-center justify-center bg-yellow-500 text-white text-xs font-bold rounded">1</div>
              {{else if eq $index 1}}
              <div class="w-6 h-6 flex-shrink-0 flex items-center justify-center bg-gray-400 text-white text-xs font-bold rounded">2</div>
              {{else if eq $index 2}}
              <div class="w-6 h-6 flex-shrink-0 flex items-center justify-center bg-orange-600 text-white text-xs font-bold rounded">3</div>
              {{else if eq $index 3}}
              <div class="w-6 h-6 flex-shrink-0 flex items-center justify-center bg-primary text-white text-xs font-bold rounded">4</div>
              {{else if eq $index 4}}
              <div class="w-6 h-6 flex-shrink-0 flex items-center justify-center bg-primary text-white text-xs font-bold rounded">5</div>
              {{else if eq $index 5}}
              <div class="w-6 h-6 flex-shrink-0 flex items-center justify-center bg-primary text-white text-xs font-bold rounded">6</div>
              {{else if eq $index 6}}
              <div class="w-6 h-6 flex-shrink-0 flex items-center justify-center bg-primary text-white text-xs font-bold rounded">7</div>
              {{else if eq $index 7}}
              <div class="w-6 h-6 flex-shrink-0 flex items-center justify-center bg-primary text-white text-xs font-bold rounded">8</div>
              {{else if eq $index 8}}
              <div class="w-6 h-6 flex-shrink-0 flex items-center justify-center bg-primary text-white text-xs font-bold rounded">9</div>
              {{else}}
              <div class="w-6 h-6 flex-shrink-0 flex items-center justify-center bg-primary text-white text-xs font-bold rounded">10</div>
              {{end}}
              <div class="flex-1">
                <h4 class="text-sm font-medium text-gray-900 group-hover:text-primary transition-colors line-clamp-2">{{$item.Title}}</h4>
                <p class="text-xs text-gray-500 mt-1">{{ParseTime $item.CreatedAt "2006-01-02"}}</p>
              </div>
            </div>
          </a>
          {{end}}
        </div>
        {{end}}
        {{end}}
        {{else}}
        {{with $latest := ColumnContents "sjyx" 10}}
        {{if $latest}}
        <div class="space-y-3">
          {{range $index, $item := $latest}}
          <a href="{{$item.URL}}" class="block group">
            <div class="flex items-start space-x-3">
              {{if eq $index 0}}
              <div class="w-6 h-6 flex-shrink-0 flex items-center justify-center bg-yellow-500 text-white text-xs font-bold rounded">1</div>
              {{else if eq $index 1}}
              <div class="w-6 h-6 flex-shrink-0 flex items-center justify-center bg-gray-400 text-white text-xs font-bold rounded">2</div>
              {{else if eq $index 2}}
              <div class="w-6 h-6 flex-shrink-0 flex items-center justify-center bg-orange-600 text-white text-xs font-bold rounded">3</div>
              {{else if eq $index 3}}
              <div class="w-6 h-6 flex-shrink-0 flex items-center justify-center bg-primary text-white text-xs font-bold rounded">4</div>
              {{else if eq $index 4}}
              <div class="w-6 h-6 flex-shrink-0 flex items-center justify-center bg-primary text-white text-xs font-bold rounded">5</div>
              {{else if eq $index 5}}
              <div class="w-6 h-6 flex-shrink-0 flex items-center justify-center bg-primary text-white text-xs font-bold rounded">6</div>
              {{else if eq $index 6}}
              <div class="w-6 h-6 flex-shrink-0 flex items-center justify-center bg-primary text-white text-xs font-bold rounded">7</div>
              {{else if eq $index 7}}
              <div class="w-6 h-6 flex-shrink-0 flex items-center justify-center bg-primary text-white text-xs font-bold rounded">8</div>
              {{else if eq $index 8}}
              <div class="w-6 h-6 flex-shrink-0 flex items-center justify-center bg-primary text-white text-xs font-bold rounded">9</div>
              {{else}}
              <div class="w-6 h-6 flex-shrink-0 flex items-center justify-center bg-primary text-white text-xs font-bold rounded">10</div>
              {{end}}
              <div class="flex-1">
                <h4 class="text-sm font-medium text-gray-900 group-hover:text-primary transition-colors line-clamp-2">{{$item.Title}}</h4>
                <p class="text-xs text-gray-500 mt-1">{{ParseTime $item.CreatedAt "2006-01-02"}}</p>
              </div>
            </div>
          </a>
          {{end}}
        </div>
        {{end}}
        {{end}}
        {{end}}
      </aside>
    </div>
  </div>
</div>
{{end}}

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