<!doctype html>
<html lang="zh-cn">

<head>
  {{include "header.html"}}
</head>

<body class="bg-creative-50 text-creative-900">
  {{include "nav.html"}}
  {{include "bread.html"}}

  <main class="container mx-auto px-4 py-12">
    <section class="bg-white rounded-2xl border border-creative-100 shadow-card p-8 mb-8 overflow-hidden">
      <div class="flex items-start justify-between gap-4">
        <div>
          {{if .Single}}
          <h1 class="text-2xl font-bold text-creative-900">{{.Single.Title}}</h1>
          <p class="mt-2 text-sm text-creative-600">{{.Single.Description}}</p>
          {{else}}
          <h1 class="text-2xl font-bold text-creative-900">{{.Title}}</h1>
          <p class="mt-2 text-sm text-creative-600">{{.Description}}</p>
          {{end}}
          <div class="mt-4 text-xs text-creative-500 inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-creative-50 border border-creative-100">
            <i class="fa-solid fa-images"></i>
            <span>{{.Pager.TotalItems}} 个案例</span>
          </div>
        </div>
        <div class="hidden sm:block text-creative-100 text-6xl"><i class="fa-solid fa-palette"></i></div>
      </div>
    </section>

    <section class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
      {{range .List}}
      <a href="{{.URL}}" class="group block bg-white rounded-2xl border border-creative-100 shadow-card overflow-hidden hover:shadow-creative transition-all">
        <div class="relative overflow-hidden">
          {{if .Img}}
          <img src="{{.Img}}" alt="{{.Title}}" class="w-full h-56 object-cover group-hover:scale-105 transition-transform duration-500" />
          {{else}}
          <div class="w-full h-56 bg-gradient-to-br from-creative-100 to-navy-100"></div>
          {{end}}
          <div class="absolute inset-0 bg-gradient-to-t from-creative-900/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
          <div class="absolute bottom-4 left-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
            <span class="inline-flex items-center gap-1 px-4 py-2 rounded-full bg-white/20 backdrop-blur text-white text-sm">
              <i class="fa-solid fa-eye"></i>
              <span>查看详情</span>
            </span>
          </div>
        </div>
        <div class="p-6">
          <h3 class="text-lg font-semibold text-creative-900 group-hover:text-creative-600 transition-colors">{{.Title}}</h3>
          <p class="mt-2 text-sm text-creative-600 line-clamp-2">{{.Description}}</p>
          {{if .Ext}}
          <div class="mt-4 flex flex-wrap gap-2">
            {{$category := index .Ext "category"}}
            {{if $category}}<span class="px-2.5 py-1 rounded-full text-xs bg-creative-50 text-creative-700">{{$category}}</span>{{end}}
            {{$industry := index .Ext "industry"}}
            {{if $industry}}<span class="px-2.5 py-1 rounded-full text-xs bg-navy-50 text-navy-700">{{$industry}}</span>{{end}}
            {{$year := index .Ext "year"}}
            {{if $year}}<span class="px-2.5 py-1 rounded-full text-xs bg-gray-50 text-gray-600">{{$year}}</span>{{end}}
          </div>
          {{end}}
        </div>
      </a>
      {{end}}
    </section>

    {{if .Pager.Enabled}}
    <nav aria-label="Page navigation" class="mt-10">
      <ul class="flex flex-wrap justify-center gap-2">
        {{range .Pager.Items}}
        {{if eq .Kind "gap"}}
        <li class="px-4 py-2 text-creative-400">{{.Label}}</li>
        {{else}}
        <li>
          <a href="{{.URL}}" class="px-4 py-2 rounded-lg border border-creative-100 bg-white text-sm text-creative-700 hover:bg-creative-50 {{if .Active}}bg-creative-600 text-white border-creative-600 hover:bg-creative-600{{end}}">{{.Label}}</a>
        </li>
        {{end}}
        {{end}}
      </ul>
    </nav>
    {{end}}
  </main>

  {{include "footer.html"}}
  {{include "js.html"}}
</body>

</html>
