{# 말레이시아 배송 공용 상단 바: 목록/업로드 + (배치 진입 시) 작업/피킹/전달 서브탭
   + 한글/영문 토글(localStorage 저장, 전 페이지 공통). #}
<div class="erp-page-actions" style="display:flex;gap:8px;flex-wrap:wrap;align-items:center;">
  <a class="erp-btn {% if active_tab=='batches' %}erp-btn-primary{% else %}erp-btn-outline{% endif %}" href="/dispatch/"
     data-ko="출고 배치" data-en="Batches">출고 배치</a>
  <a class="erp-btn {% if active_tab=='new' %}erp-btn-primary{% else %}erp-btn-outline{% endif %}" href="/dispatch/batches/new"
     data-ko="＋ 새 업로드" data-en="+ New Upload">＋ 새 업로드</a>

  {% if active_tab=='batches' %}
  {# 받는 사람 찾기: 배치 목록 페이지에서만. 마크업/스타일/스크립트는 batches.html. #}
  <div class="dsp-search" id="dsp-search">
    <div class="dsp-search-box">
      <span class="dsp-q-ico">🔎</span>
      <input type="text" id="dsp-q" autocomplete="off"
             data-ko-ph="이름 · 주문번호 · 패키지번호 · 송장번호로 받는 사람 찾기"
             data-en-ph="Find recipient by name / order / package / tracking no."
             placeholder="이름 · 주문번호 · 패키지번호 · 송장번호로 받는 사람 찾기" />
      <button type="button" class="dsp-q-clear" id="dsp-q-clear" aria-label="clear">×</button>
    </div>
    <div class="dsp-search-results" id="dsp-search-results"></div>
  </div>
  {% endif %}

  {% if batch %}
  <span style="width:1px;height:24px;background:#e2e8f0;margin:0 4px;"></span>
  <a class="erp-btn {% if active_tab=='work' %}erp-btn-primary{% else %}erp-btn-outline{% endif %}" href="/dispatch/batches/{{ batch.id }}"
     data-ko="출고 작업" data-en="Dispatch Work">출고 작업</a>
  <a class="erp-btn {% if active_tab=='picking' %}erp-btn-primary{% else %}erp-btn-outline{% endif %}" href="/dispatch/batches/{{ batch.id }}/picking"
     data-ko="피킹 요약" data-en="Picking Summary">피킹 요약</a>
  <a class="erp-btn {% if active_tab=='handover' %}erp-btn-primary{% else %}erp-btn-outline{% endif %}" href="/dispatch/batches/{{ batch.id }}/handover"
     data-ko="Kagayaku 전달" data-en="Kagayaku Handover">Kagayaku 전달</a>
  {% endif %}

  <button id="dsp-lang-btn" type="button" class="erp-btn erp-btn-outline" style="margin-left:auto;font-weight:700;"
          onclick="dspToggleLang()">EN</button>
</div>

<script>
// 한글/영문 토글. data-ko/data-en(텍스트), data-ko-ph/data-en-ph(placeholder) 교체.
(function () {
  var KEY = 'dsp_lang';
  window.dspApplyLang = function (lang) {
    if (lang !== 'ko' && lang !== 'en') lang = 'ko';
    document.querySelectorAll('[data-ko]').forEach(function (el) {
      var v = el.getAttribute('data-' + lang);
      if (v !== null) el.textContent = v;
    });
    document.querySelectorAll('[data-ko-ph]').forEach(function (el) {
      var v = el.getAttribute('data-' + lang + '-ph');
      if (v !== null) el.placeholder = v;
    });
    // 배치명은 저장된 데이터라 정적 번역 불가. 자동 기본 이름의 '출고'/'(이름없음)'만
    // 영문에서 치환(직접 입력한 다른 한글 이름은 그대로 둔다).
    document.querySelectorAll('[data-raw]').forEach(function (el) {
      var raw = el.getAttribute('data-raw') || '';
      el.textContent = (lang === 'en')
        ? raw.replace(/출고/g, 'Dispatch').replace('(이름없음)', '(no name)')
        : raw;
    });
    var btn = document.getElementById('dsp-lang-btn');
    if (btn) btn.textContent = (lang === 'ko') ? 'EN' : '한국어';
    try { localStorage.setItem(KEY, lang); } catch (e) {}
    document.documentElement.setAttribute('data-dsp-lang', lang);
    document.dispatchEvent(new CustomEvent('dsp:lang', { detail: { lang: lang } }));
  };
  // 현재 언어(동적 텍스트 생성용).
  window.dspLang = function () {
    try { return localStorage.getItem(KEY) || 'ko'; } catch (e) { return 'ko'; }
  };
  window.dspToggleLang = function () {
    var cur = 'ko';
    try { cur = localStorage.getItem(KEY) || 'ko'; } catch (e) {}
    window.dspApplyLang(cur === 'ko' ? 'en' : 'ko');
  };
  var init = 'ko';
  try { init = localStorage.getItem(KEY) || 'ko'; } catch (e) {}
  // DOM 준비 후 적용(스크립트가 상단이라 본문 요소가 아직일 수 있어 보강).
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', function () { window.dspApplyLang(init); });
  } else {
    window.dspApplyLang(init);
  }
})();
</script>