{{define "services_index"}}
  <!-- ===== 场景页头：打开的维修工具箱（钢灰渐变 + 箱盖层次 + 工具剪影 + 脉动徽章） ===== -->
  <header class="tool-hero">
    <div class="tool-hero-bg" aria-hidden="true">
      <svg class="tool-scene-svg" viewBox="0 0 1200 300" preserveAspectRatio="xMidYMax meet">
        <!-- 扳手剪影 -->
        <g class="tool-sil" transform="rotate(-10 70 220)">
          <circle cx="70" cy="150" r="17"/>
          <rect x="59" y="166" width="22" height="116" rx="8"/>
        </g>
        <!-- 螺丝刀剪影 -->
        <g class="tool-sil" transform="rotate(8 215 230)">
          <rect x="200" y="120" width="30" height="70" rx="10"/>
          <rect x="211" y="190" width="8" height="64"/>
          <path d="M207 254 l16 0 l-8 26 z"/>
        </g>
        <!-- 锤子剪影 -->
        <g class="tool-sil" transform="rotate(-6 410 230)">
          <rect x="368" y="126" width="84" height="32" rx="9"/>
          <rect x="402" y="158" width="16" height="122" rx="6"/>
        </g>
        <!-- 锯子剪影 -->
        <g class="tool-sil" transform="rotate(6 610 260)">
          <path d="M540 250 h168 l-16 26 h-136 z"/>
          <rect x="534" y="214" width="14" height="62" rx="4"/>
        </g>
        <!-- 卷尺剪影 -->
        <g class="tool-sil" transform="rotate(-8 770 258)">
          <rect x="733" y="230" width="74" height="38" rx="10"/>
          <path d="M807 234 q54 8 26 46 l-22 -14 q16 -22 -8 -28 z"/>
        </g>
        <!-- 水平尺剪影 -->
        <g class="tool-sil" transform="rotate(4 980 260)">
          <rect x="880" y="240" width="200" height="40" rx="12"/>
          <circle cx="932" cy="260" r="11"/>
          <circle cx="1028" cy="260" r="11"/>
          <rect x="976" y="253" width="16" height="14" rx="3"/>
        </g>
        <!-- 小扳手剪影 -->
        <g class="tool-sil" transform="rotate(-14 1140 240)">
          <circle cx="1140" cy="188" r="14"/>
          <rect x="1130" y="201" width="20" height="82" rx="7"/>
        </g>
      </svg>
      <span class="tool-hero-badge">{{ico "tools"}} 随时接单</span>
    </div>

    <h1 class="tool-title">一箱在手，样样都修</h1>
    <ul class="tool-slots">
      <li><span class="ts-slot"></span><b>公示价</b><em>即成交价 · 拒做维修刺客</em></li>
      <li><span class="ts-slot"></span><b>响应时效</b><em>白纸黑字写清楚</em></li>
      <li><span class="ts-slot"></span><b>服务方实名</b><em>留名留址 · 跑不掉</em></li>
      <li><span class="ts-slot"></span><b>{{len .Data.Services}} 格在架</b><em>{{len .Data.Categories}} 层门类</em></li>
    </ul>
  </header>

  <!-- 登录态发布框：已登录可把一门手艺摆进工具箱 -->
  <div class="tool-post">
    <h3 class="tool-post-title">{{ico "tools"}} 往工具箱里添一格服务</h3>
    {{if .Data.Err}}<div class="tool-post-err">{{.Data.Err}}</div>{{end}}
    {{if .Data.CurrentUser}}
    <form method="post" action="/services/publish">
      <p class="tool-post-who">以 <b>{{.Data.CurrentUser}}</b> 的身份提供服务</p>
      <div class="tool-post-row">
        <input type="text" name="name" placeholder="服务名称，例如：全屋深度保洁" maxlength="60" required>
        <select name="category" required>
          <option value="">放进哪个门类…</option>
          {{range .Data.Categories}}<option value="{{.Name}}">{{.Name}}</option>{{end}}
        </select>
      </div>
      <div class="tool-post-row">
        <input type="text" name="price" placeholder="明码标价，例如：58 元" maxlength="30" required>
        <input type="text" name="unit" placeholder="计价单位，例如：次 / 小时 / 趟" maxlength="10">
        <input type="text" name="response_time" placeholder="响应时效，例如：30 分钟内响应" maxlength="40" required>
      </div>
      <input type="text" name="provider" placeholder="服务方（谁来做、谁负责），例如：晴空家政 · 王姐团队" maxlength="60" required>
      <input type="text" name="summary" placeholder="一句话说明白这项服务（摘要）" maxlength="120" required>
      <textarea name="content" data-zx-editor data-upload="/blog/upload" placeholder="服务正文写在这里——服务范围、流程、价格说明写清楚，支持 Markdown" rows="6" maxlength="50000" required></textarea>
      <div class="tool-post-foot">
        <span class="tool-post-hint">{{ico "spark"}} 硬规矩：价格必须写明、时效必须写明、服务方必须留名——三项缺一不可。</span>
        <button class="btn btn-primary" type="submit">摆进工具箱</button>
      </div>
    </form>
    {{else}}
    <div class="tool-post-login">
      <span>登录后即可提供服务，把你的手艺摆进工具箱。</span>
      <a class="btn btn-primary btn-sm" href="/admin/login">去登录</a>
    </div>
    {{end}}
  </div>

  <!-- 门类筛选：工具箱的抽屉标签 -->
  <div class="tool-drawers">
    <a href="/services" class="tool-drawer {{if eq .Data.Category ""}}active{{end}}">全部<em>{{len .Data.Services}}</em></a>
    {{range .Data.Categories}}
    <a href="/services?category={{.Name}}" class="tool-drawer {{if eq $.Data.Category .Name}}active{{end}}">{{.Name}}<em>{{.Count}}</em></a>
    {{end}}
  </div>

  <!-- 服务格层：每张卡片像工具箱的一格，标签、价签、时效、服务方一目了然 -->
  <div class="tool-grid">
    {{range .Data.Services}}
    <article class="tool-cell">
      <div class="tool-cell-head">
        <span class="tool-tag">{{.Category}}</span>
        <span class="tool-rating" title="口碑 {{.Rating}} 分">{{.Stars}} {{.Rating}}</span>
      </div>
      <h2 class="tool-cell-title"><a href="/services/{{.Slug}}">{{.Name}}</a></h2>
      <div class="tool-price">{{.Price}}{{if .Unit}}<span class="tool-price-unit">/{{.Unit}}</span>{{end}}</div>
      <p class="tool-cell-desc">{{.Summary}}</p>
      <ul class="tool-cell-meta">
        <li><span>{{ico "spark"}} 响应</span>{{.ResponseTime}}</li>
        <li><span>{{ico "tools"}} 服务方</span>{{.Provider}}</li>
      </ul>
      <a class="tool-open" href="/services/{{.Slug}}">开箱验货 →</a>
    </article>
    {{else}}
    <div class="tool-empty" style="grid-column:1/-1;">
      <h3>这一格还空着</h3>
      <p>服务还在路上，先去别处逛逛吧。</p>
    </div>
    {{end}}
  </div>
  {{template "pagination" .}}
  {{template "module_meta" .}}
{{end}}