{{- /* SFCraft 合成配方组件
     - 调用: 页面内写 shortcode, 名为 crafting
     - a1..c3 为 3x3 合成格, out 为输出格
     - 值为 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%")
-}}

{{- $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);
    }
  </style>
{{- end -}}

<figure class="sfc-crafting" style="background-image: url('{{ $table.RelPermalink }}');">
  {{- range $slots -}}
    {{- partial "crafting-slot.html"
        (dict
          "ctx" $
          "key" .key
          "cls" .cls
          "x"   .x
          "y"   .y
        ) -}}
  {{- end -}}
  {{- with .Get "caption" -}}
    <figcaption class="sfc-caption">{{ . }}</figcaption>
  {{- end -}}
</figure>