{{- /* SFCraft 合成配方组件
     两种用法:
     1) 九格直填: a1..c3 为 3x3 合成格, out 为输出格
     2) pattern 别名模式(提供 pattern 时优先):
        pattern="a a a\nb b b\nc c c"  行间用 \n(必须写在一行内), 也可用空格或 ; 分隔, 共 9 个 token
        a="diamond" b="stick" c=""     每个 token 对应一个同名参数, 值为物品 id
        token 也可以直接写物品 id, 如 pattern="diamond stick ."
        "." 表示空格子
     - 值为 assets/items/ 下贴图的文件名(不含 .png), 留空表示空格子
     - 名称后可加 ":数量" 显示堆叠数, 例如 a1="stick:2"
     - 引用的贴图不存在时, 格子内显示 ? 占位提示
     - caption 参数可选, 显示在组件下方
*/ -}}

{{- $table := resources.Get "table.png" -}}
{{- $slots := slice
      (dict "key" "a1" "cls" "grid" "x" "13.75%"  "y" "20%")
      (dict "key" "a2" "cls" "grid" "x" "25%"     "y" "20%")
      (dict "key" "a3" "cls" "grid" "x" "36.25%"  "y" "20%")
      (dict "key" "b1" "cls" "grid" "x" "13.75%"  "y" "42.5%")
      (dict "key" "b2" "cls" "grid" "x" "25%"     "y" "42.5%")
      (dict "key" "b3" "cls" "grid" "x" "36.25%"  "y" "42.5%")
      (dict "key" "c1" "cls" "grid" "x" "13.75%"  "y" "65%")
      (dict "key" "c2" "cls" "grid" "x" "25%"     "y" "65%")
      (dict "key" "c3" "cls" "grid" "x" "36.25%"  "y" "65%")
      (dict "key" "out" "cls" "out" "x" "70%"     "y" "37.5%")
-}}

{{- $ctx := . -}}
{{- $pattern := $ctx.Get "pattern" -}}
{{- $tokens := slice -}}
{{- if $pattern -}}
  {{- $flat := replace (replace (replace (replace $pattern "\\n" " ") ";" " ") "\n" " ") "\r" " " -}}
  {{- range split (trim $flat " ") " " -}}
    {{- if ne . "" -}}{{- $tokens = $tokens | append . -}}{{- end -}}
  {{- end -}}
{{- end -}}

{{- $cssOnce := .Page.Store.Get "sfc_crafting_css" -}}
{{- if not $cssOnce -}}
  {{- .Page.Store.Set "sfc_crafting_css" true -}}
  <style>
    .sfc-crafting {
      position: relative;
      width: 100%;
      max-width: 540px;
      aspect-ratio: 320 / 160;
      margin: 1rem 0 1.25rem;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      container-type: inline-size;
    }
    .sfc-slot {
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .sfc-grid { width: 10.625%; height: 21.25%; }
    .sfc-out  { width: 15.625%; height: 31.25%; }
    .sfc-item {
      width: 88%;
      height: 88%;
      object-fit: contain;
      image-rendering: pixelated;
      filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35));
    }
    .sfc-count {
      position: absolute;
      right: 5%;
      bottom: 3%;
      font-family: "Minecraft", ui-monospace, Consolas, monospace;
      font-size: 12px;
      font-size: 2.8cqw;
      font-weight: 700;
      line-height: 1;
      color: #fff;
      text-shadow: 0 1px 0 #3f3f3f, 1px 0 0 #3f3f3f,
                   0 -1px 0 #3f3f3f, -1px 0 0 #3f3f3f,
                   0 2px 3px rgba(0, 0, 0, 0.55);
    }
    .sfc-missing {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 86%;
      height: 86%;
      font-size: 4cqw;
      font-weight: 700;
      color: rgba(0, 0, 0, 0.28);
      border: 2px dashed rgba(0, 0, 0, 0.18);
      border-radius: 4px;
      background:
        repeating-linear-gradient(45deg, rgba(255,255,255,0.22), rgba(255,255,255,0.22) 4px, rgba(0,0,0,0.04) 4px, rgba(0,0,0,0.04) 8px);
    }
    .sfc-slot[data-name]::after {
      content: attr(data-name);
      position: absolute;
      bottom: calc(100% + 6px);
      left: 50%;
      transform: translateX(-50%);
      padding: 3px 9px;
      border: 1px solid rgba(255, 255, 255, 0.16);
      border-radius: 5px;
      background: rgba(18, 18, 18, 0.92);
      color: #fff;
      font-size: 12px;
      white-space: nowrap;
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.12s ease;
      z-index: 30;
    }
    .sfc-slot[data-name]:hover::after { opacity: 1; }
    .sfc-caption {
      margin: 0.35rem 0 0;
      text-align: center;
      font-size: 0.85rem;
      color: var(--gray-600, #6c757d);
    }
    .sfc-error {
      max-width: 540px;
      margin: 1rem 0;
      padding: 0.6rem 1rem;
      border: 1px solid #f5c2c7;
      border-radius: 6px;
      background: #f8d7da;
      color: #842029;
      font-size: 0.9rem;
    }
  </style>
{{- end -}}

{{- if and $pattern (ne (len $tokens) 9) -}}
  <div class="sfc-error">
    crafting 的 pattern 需要恰好 9 个 token（3 行 × 3 列），当前是 {{ len $tokens }} 个。
    请检查 pattern="a a a\nb b b\nc c c" 的写法。
  </div>
{{- else -}}
  <figure class="sfc-crafting" style="background-image: url('{{ $table.RelPermalink }}');">
    {{- range $i, $slot := $slots -}}
      {{- $val := "" -}}
      {{- if eq $slot.key "out" -}}
        {{- $val = trim ($ctx.Get "out") " " -}}
      {{- else if $pattern -}}
        {{- $token := "" -}}
        {{- if lt $i (len $tokens) -}}{{- $token = index $tokens $i -}}{{- end -}}
        {{- if and (ne $token "") (ne $token ".") -}}
          {{- $v := trim ($ctx.Get $token) " " -}}
          {{- if eq $v "" -}}
            {{- if findRE "^[a-z0-9_]+$" $token -}}{{- $v = $token -}}{{- end -}}
          {{- end -}}
          {{- $val = $v -}}
        {{- end -}}
      {{- else -}}
        {{- $val = trim ($ctx.Get $slot.key) " " -}}
      {{- end -}}
      {{- partial "crafting-slot.html"
          (dict
            "val" $val
            "cls" $slot.cls
            "x"   $slot.x
            "y"   $slot.y
          ) -}}
    {{- end -}}
    {{- with $ctx.Get "caption" -}}
      <figcaption class="sfc-caption">{{ . }}</figcaption>
    {{- end -}}
  </figure>
{{- end -}}
