{{define "services_detail"}}
  <div class="mod-back"><a href="/services">← 返回晴空帮手</a></div>

  <!-- 明白消费提示 -->
  <div class="mod-trust">
    <b>{{ico "spark"}} 晴空帮手 · 明白消费提示</b>
    <span>公示价即成交价，进门不加价、不推销、不偷换项。</span>
    <span>任何「先干一半再加钱」的套路都是维修刺客，请立即停手并反馈差评。</span>
  </div>

  <article class="mod-detail-head">
    <div class="mod-card-top" style="margin-bottom:8px;">
      <a href="/services?category={{.Data.Service.Category}}" class="mod-chip" style="text-decoration:none;">{{.Data.Service.Category}}</a>
      <span class="mod-chip warn">{{.Data.Service.Stars}} · {{.Data.Service.Rating}} 分</span>
    </div>
    <h1 class="mod-detail-title">{{.Data.Service.Name}}</h1>
    <div class="mod-detail-meta">
      <span>{{ico "spark"}} {{.Data.Service.ResponseTime}}</span>
      <span>{{ico "tools"}} {{.Data.Service.Provider}}</span>
      <span>{{ico "pin"}} {{.Data.Service.ProviderAddr}}</span>
      <span>{{ico "clock"}} 上线于 {{date .Data.Service.CreatedAt}}</span>
      {{template "fav_button" dict "VD" . "Type" "services" "Key" .Data.Service.Slug "Title" .Data.Service.Name "URL" (printf "/services/%s" .Data.Service.Slug)}}
    </div>
  </article>

  <div class="mod-panel">
    <div class="mod-cols" style="grid-template-columns:220px minmax(0,1fr);gap:30px;margin-bottom:0;">
      <div>
        <div class="mod-row" style="border:0;"><span class="mod-row-label" style="font-size:12.5px;">一口价 · 公示价即成交价</span></div>
        <div class="mod-price" style="font-size:26px;">{{.Data.Service.Price}}<span style="font-size:14px;color:var(--muted);font-weight:400;"> /{{.Data.Service.Unit}}</span></div>
      </div>
      <div class="mod-list">
        <div class="mod-row"><span class="mod-row-label">响应时效</span><span class="mod-row-val">{{.Data.Service.ResponseTime}}</span></div>
        <div class="mod-row"><span class="mod-row-label">服务方</span><span class="mod-row-val">{{.Data.Service.Provider}}</span></div>
        <div class="mod-row"><span class="mod-row-label">服务地址</span><span class="mod-row-val">{{.Data.Service.ProviderAddr}}</span></div>
        <div class="mod-row"><span class="mod-row-label">口碑分</span><span class="mod-row-val"><b>{{.Data.Service.Rating}}</b> 分 · {{.Data.Service.Stars}}</span></div>
      </div>
    </div>
  </div>

  <div class="mod-panel" style="padding:28px 30px;">
    {{if .Data.Service.Summary}}
    <div class="alert" style="margin-bottom:22px;">{{.Data.Service.Summary}}</div>
    {{end}}
    <div class="article-body">{{.Data.Body}}</div>
    <div class="article-finis" style="text-align:center;color:var(--muted);font-size:12.5px;margin-top:26px;letter-spacing:1px;">— 本服务至此 · 明码标价，童叟无欺 —</div>
  </div>
{{end}}