{# 오른쪽 상품 정보 패널 조각.
   기본 정보(상품명·판매가·공급가·소비자가) · 대표 이미지 · 옵션/품목.
   전체 페이지(products.html)가 include 하고, 상품을 바꾸면 JS 가 /products/{no}/pane
   에서 같은 조각을 다시 받아 끼워 넣는다. 그래서 <script> 를 두지 않는다 — JS 는
   products.html 의 cf24BindSide() 에 있다. 쓰기는 전부 routes_product_info.py 의
   JSON API 로 하고, 화면은 **응답값**으로 다시 그린다(요청값을 낙관 반영하지 않는다). #}

{% if desc %}
<div class="cf24-side" id="cf24-side" data-product-no="{{ product_no }}">

  {# ── 기본 정보 ── #}
  <section class="cf24-side-sec">
    <h4 class="cf24-side-title">기본 정보</h4>
    {% if scalar_stale %}
    <p class="cf24-side-note cf24-side-note-warn">
      카페24 관리자 API 가 아직 이전 값을 돌려주고 있어 마지막으로 적용한 값을 표시합니다.
    </p>
    {% endif %}
    <form class="cf24-side-form" id="cf24-basic-form" autocomplete="off">
      <label class="cf24-side-field">
        <span>상품명</span>
        <input type="text" name="product_name" maxlength="250" value="{{ info.product_name }}" />
      </label>
      <div class="cf24-side-grid3">
        <label class="cf24-side-field">
          <span>판매가</span>
          <input type="text" name="price" inputmode="numeric" value="{{ info.price_plain }}" placeholder="원" />
        </label>
        <label class="cf24-side-field">
          <span>공급가</span>
          <input type="text" name="supply_price" inputmode="numeric" value="{{ info.supply_price_plain }}" placeholder="원" />
        </label>
        <label class="cf24-side-field">
          <span>소비자가</span>
          <input type="text" name="retail_price" inputmode="numeric" value="{{ info.retail_price_plain }}" placeholder="원" />
        </label>
      </div>
      <div class="cf24-side-actions">
        <span class="cf24-muted" id="cf24-basic-msg"></span>
        <button class="erp-btn erp-btn-primary" type="submit" id="cf24-basic-save">카페24에 저장</button>
      </div>
    </form>
  </section>

  {# ── 대표 이미지 ── #}
  <section class="cf24-side-sec">
    <h4 class="cf24-side-title">대표 이미지</h4>
    <div class="cf24-image-box" id="cf24-image-box">
      {% if info.detail_image %}
      <a href="{{ info.detail_image }}" target="_blank" rel="noopener noreferrer" id="cf24-image-link">
        <img class="cf24-image-main" id="cf24-image-main" src="{{ info.detail_image }}" alt="대표 이미지" />
      </a>
      {% else %}
      <a href="#" target="_blank" rel="noopener noreferrer" id="cf24-image-link" class="is-hidden">
        <img class="cf24-image-main" id="cf24-image-main" src="" alt="대표 이미지" />
      </a>
      <div class="cf24-image-empty" id="cf24-image-empty">등록된 대표 이미지가 없습니다.</div>
      {% endif %}
    </div>
    <div class="cf24-image-thumbs" id="cf24-image-thumbs">
      {# 이미지가 없는 종류는 칸째로 숨긴다(빈 칸에 이름만 남으면 어색하다).
         업로드 뒤 응답에 경로가 오면 JS 가 칸을 다시 보인다. #}
      {% for key, label in (("list_image", "목록"), ("tiny_image", "작은목록"), ("small_image", "축소")) %}
      <figure class="cf24-image-thumb{% if not info[key] %} is-hidden{% endif %}" data-image-figure="{{ key }}">
        <img src="{{ info[key] }}" alt="{{ label }}" data-image-key="{{ key }}" />
        <figcaption>{{ label }}</figcaption>
      </figure>
      {% endfor %}
    </div>
    <form class="cf24-side-form" id="cf24-image-form">
      <label class="cf24-file-pick">
        <input type="file" name="file" id="cf24-image-file" accept="image/jpeg,image/png,image/gif,image/webp" />
        <span class="erp-btn erp-btn-outline">파일 선택</span>
        <span class="cf24-file-name" id="cf24-image-filename">선택된 파일 없음</span>
      </label>
      <div class="cf24-side-actions">
        <span class="cf24-muted" id="cf24-image-msg">JPG·PNG·GIF·WEBP, 10MB 이하. 목록/축소 이미지는 카페24가 자동 생성합니다.</span>
        <button class="erp-btn erp-btn-primary" type="submit" id="cf24-image-save" disabled>업로드하여 교체</button>
      </div>
    </form>
  </section>

  {# ── 옵션 / 품목 — 펼칠 때 JSON 으로 불러온다(카페24 호출 2회) ── #}
  <details class="cf24-side-sec cf24-side-details" id="cf24-options-details">
    <summary class="cf24-side-title">옵션 / 품목 <span class="cf24-muted" id="cf24-options-count"></span></summary>
    <div class="cf24-options-body" id="cf24-options-body">
      <p class="cf24-muted">불러오는 중…</p>
    </div>
  </details>

</div>
{% else %}
<div class="cf24-side cf24-side-empty">
  <p class="cf24-muted">카페24 조회에 실패해 상품 정보를 표시할 수 없습니다.</p>
</div>
{% endif %}