{{define "desk_services_index"}}
<div class="desk-page">
  <!-- 街角门面 Hero -->
  <header class="desk-hero">
    <div class="desk-hero-bg" aria-hidden="true">
      <span class="desk-lamp" aria-hidden="true"></span>
      <span class="desk-sign" aria-hidden="true">OPEN</span>
      <span class="desk-shop" aria-hidden="true"><i class="ds-awning"></i><i class="ds-window"></i><i class="ds-door"></i></span>
    </div>
    <p class="desk-eyebrow">{{ico "spark"}} NEIGHBORHOOD · 街角服务台</p>
    <h1 class="desk-title">好手艺，<br>就在街角亮着灯</h1>
    <ul class="desk-slots">
      <li><span></span><b>公示价</b><em>即成交价 · 拒做维修刺客</em></li>
      <li><span></span><b>响应时效</b><em>白纸黑字写清楚</em></li>
      <li><span></span><b>服务方实名</b><em>留名留址 · 跑不掉</em></li>
      <li><span></span><b>{{len .Data.Services}} 家在营</b><em>{{len .Data.Categories}} 层门类</em></li>
    </ul>
  </header>

  <!-- 开新店 -->
  <div class="tool-post desk-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 desk-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 desk-grid">
    {{range .Data.Services}}
    <article class="tool-cell desk-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 desk-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" .}}
</div>
{{end}}