<!DOCTYPE html>
<html lang="{{HTML_LANG}}">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>{{DIALOG_CSS}}</style>
</head>
<body>
  <div class="rn-app">
    <!-- LEFT: search / create fields -->
    <main class="rn-main">
      <div class="rn-selbar">
        <span class="rn-sel" id="rn-sel">Đang chọn: 0 đối tượng</span>
        <span class="rn-spacer"></span>
        <button id="rn-auto-hide" class="rn-btn rn-toggle"
                title="Tự động ẩn các đối tượng ngay sau khi đổi tên">Tự ẩn: Tắt</button>
        <button id="rn-unhide" class="rn-btn" title="Hiện lại các đối tượng đã ẩn">Hiện lại</button>
        <button id="rn-clear-id" class="rn-btn">Clear ID</button>
        <button id="rn-refresh" class="rn-btn" title="Làm mới lựa chọn">↻</button>
      </div>

      <div class="rn-field" data-kind="names">
        <label class="rn-flabel">Tên (đặt lại tên)</label>
        <div class="rn-combo">
          <input id="rn-in-names" class="rn-input" type="text" autocomplete="off"
                 placeholder="Gõ để tìm / tạo tên mới — Tab/Shift+Tab di chuyển · Enter áp/tạo">
          <div id="rn-dd-names" class="rn-dd" hidden></div>
        </div>
      </div>

      <div class="rn-field" data-kind="prefixes">
        <label class="rn-flabel">Prefix (thêm vào đầu)</label>
        <div class="rn-combo-row">
          <div class="rn-combo">
            <input id="rn-in-prefixes" class="rn-input" type="text" autocomplete="off"
                   placeholder="Gõ prefix — Tab/Shift+Tab di chuyển · Enter áp/tạo">
            <div id="rn-dd-prefixes" class="rn-dd" hidden></div>
          </div>
          <button type="button" id="rn-clear-prefixes" class="rn-btn rn-clear-part"
                  title="Xóa prefix trên đối tượng đang chọn">Clear prefix</button>
        </div>
      </div>

      <div class="rn-field" data-kind="suffixes">
        <label class="rn-flabel">Suffix (thêm vào cuối)</label>
        <div class="rn-combo-row">
          <div class="rn-combo">
            <input id="rn-in-suffixes" class="rn-input" type="text" autocomplete="off"
                   placeholder="Gõ suffix — Tab/Shift+Tab di chuyển · Enter áp/tạo">
            <div id="rn-dd-suffixes" class="rn-dd" hidden></div>
          </div>
          <button type="button" id="rn-clear-suffixes" class="rn-btn rn-clear-part"
                  title="Xóa suffix trên đối tượng đang chọn">Clear suffix</button>
        </div>
      </div>

      <div class="rn-objs-sec">
        <div class="rn-objs-head">
          <span>Đối tượng trong danh sách</span>
          <input id="rn-list-search" class="rn-input rn-list-search" type="search" autocomplete="off"
                 placeholder="{{RENAME_LIST_SEARCH_PLACEHOLDER}}">
          <button type="button" id="rn-find-sel" class="rn-btn rn-icon-btn"
                  title="{{RENAME_FIND_IN_MODEL_TITLE}}">
            <img src="{{ICON_BASE_URL}}WAREHOUSE_SEARCH.svg" alt="" width="16" height="16">
          </button>
          <button type="button" id="rn-isolate" class="rn-btn rn-icon-btn"
                  title="{{RENAME_ISOLATE_TITLE}}">
            <img src="{{ICON_BASE_URL}}ISOLATE.svg" alt="" width="16" height="16">
          </button>
        </div>
        <div id="rn-objects" class="rn-objects"></div>
      </div>
    </main>

    <!-- RIGHT: saved chips -->
    <aside class="rn-side">
      <div class="rn-side-sec">
        <div class="rn-side-head">Tên đã lưu</div>
        <div id="rn-chips-names" class="rn-chips"></div>
      </div>
      <div class="rn-side-sec">
        <div class="rn-side-head">Prefix</div>
        <div id="rn-chips-prefixes" class="rn-chips"></div>
      </div>
      <div class="rn-side-sec">
        <div class="rn-side-head">Suffix</div>
        <div id="rn-chips-suffixes" class="rn-chips"></div>
      </div>
    </aside>
  </div>
  <script>{{DIALOG_JS}}</script>
</body>
</html>
