{% extends "base.html" %}
{% block title %}공유폴더 접근 제어{% endblock %}

{% block content %}
<style>
.table { background: #fff; border-radius: 7px; box-shadow: 0 2px 6px #eef2f5; }
th, td { vertical-align: middle !important; }
.btn-sm { font-size: 0.97em; }
input[type="text"] { width: 140px; padding: 5px 7px; border: 1px solid #d3dbe6; border-radius: 4px; }
.input-group { display: flex; }
.input-group input[type="text"] { flex:1; min-width:0; }
.input-group .btn { margin-left: 7px; }
tr:nth-child(even) { background: #f8fafc; }
th { background: #f3f6fa !important; font-weight:600; }
.user-label { display: inline-block; margin-right: 15px; margin-bottom: 5px; }
.permission-allow { color: #1976d2; font-weight: 500;}
.permission-deny { color: #aaa;}
.tooltip-custom { border-bottom: 1px dotted #888; cursor: help; }
.alert { padding: 8px 16px; border-radius: 6px; font-size: 1em; margin-bottom: 18px;}
.alert-success { background: #e9f6ec; color: #257a3e; border: 1px solid #b3e1c2;}
.alert-danger { background: #fff0f0; color: #a72323; border: 1px solid #fac8c8;}
.default-badge { background:#1976d2; color:#fff; border-radius:8px; padding:2px 10px; font-size:0.91em; margin-left:8px; }

/* 모달 스타일 개선 */
.modal {
  display: none;
  background: rgba(0,0,0,0.35);
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 1050;
}
.modal-dialog {
  max-width: 520px;
  margin: 7% auto;
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
  max-height: 65vh;
  overflow-y: auto;
}
.modal-header {
  font-weight: 600;
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal-header .btn-close {
  cursor: pointer;
  border: none;
  background: transparent;
  font-size: 1.2em;
  font-weight: bold;
}
.modal-body ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
  max-height: 50vh;
  overflow-y: auto;
}
.modal-body ul li {
  margin-bottom: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.modal-body ul li:hover {
  background: #e6f0ff;
  border-radius: 4px;
}
.modal-body ul li input[type="checkbox"] {
  margin-right: 10px;
}
.modal-footer {
  text-align: right;
  margin-top: 15px;
}

/* 링크 스타일 */
.modal-body ul li a {
  color: #1976d2;
  text-decoration: none;
  flex-grow: 1;
}
.modal-body ul li a:hover {
  text-decoration: underline;
}
</style>

<h2 class="mt-4 mb-4" style="font-weight:700;">공유폴더 접근 제어</h2>
<p class="mb-4" style="color:#668;">
  폴더별로 <span class="tooltip-custom" title="nginx 인증 계정 기준">엔진엑스 사용자</span> 접근만 허용/차단합니다.<br>
  <b>대표 공유폴더</b>는 1개만 지정 가능합니다 (체크 해제 가능).<br>
  경로는 <span class="tooltip-custom" title="NAS 내에서 실제로 공유가 허용된 경로만 선택 가능">경로 선택</span> 버튼으로만 지정하세요.
</p>

{% with messages = get_flashed_messages(with_categories=true) %}
  {% if messages %}
    {% for category, message in messages %}
      <div class="alert alert-{{ 'success' if category=='success' else 'danger' }}">
        {{ message }}
      </div>
    {% endfor %}
  {% endif %}
{% endwith %}

<!-- 폴더 추가 폼 -->
<form method="post" class="mb-3" autocomplete="off" id="addShareForm" 
      onsubmit="return handleAddShareFormSubmit(event);">

  <input type="hidden" name="action" value="add">

  <table class="table table-bordered align-middle mb-2">
    <tr>
      
      <th style="width:16%;">폴더명</th>
      <th style="width:34%;">경로</th>
      <th style="width:30%;">접근 허용 사용자</th>
      <th style="width:7%;"></th>
    </tr>
    <tr>
      
      <td>
        <input type="text" name="name" id="new-folder-name" placeholder="폴더명" >
      </td>
      <td>
        <div class="input-group">
          <input type="text" name="path" id="folder-path-input" placeholder="/공유/경로" required readonly style="background:#f8fafc;">
          <button type="button" class="btn btn-outline-secondary btn-sm" onclick="openFolderPicker()">찾아보기</button>
        </div>
        <div style="margin-top: 6px; font-size: 0.9em; color: #555;">
         
          &nbsp;&nbsp;&nbsp;
          
        </div>
      </td>
      <td>
        {% if users and users|length > 0 %}
          {% for user in users %}
            <label class="user-label">
              <input type="checkbox" name="allowed_users" value="{{ user }}">
              <span class="permission-allow">{{ user }}</span>
            </label>
          {% endfor %}
        {% else %}
          <span style="color:#aaa;">등록된 엔진엑스 사용자가 없습니다.</span>
        {% endif %}
      </td>
      <td>
        <button type="submit" class="btn btn-primary btn-sm px-3">추가</button>
      </td>
    </tr>
  </table>
</form>
<script>
function handleAddShareFormSubmit(event) {
  setTimeout(() => {
    document.getElementById('new-folder-name').value = '';
    document.getElementById('folder-path-input').value = '';
    document.querySelectorAll('#addShareForm input[type="checkbox"][name="allowed_users"]').forEach(cb => cb.checked = false);
  }, 300);
  return true;
}
</script>

<!-- 폴더 선택 모달 -->
<div class="modal" tabindex="-1" id="folderPickerModal">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">폴더 선택</h5>
        
        <button type="button" class="btn-close" aria-label="닫기" onclick="closeFolderPicker()">&times;</button>
      </div>
      <div class="modal-body">
        <ul id="folder-list"></ul>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary btn-sm" onclick="closeFolderPicker()">닫기</button>
      </div>
    </div>
  </div>
</div>
<div>
  <div>
    <strong>마운트된 드라이브 선택:</strong><br>
    <table class="table table-bordered align-middle mb-3">
      <thead>
        <tr>
          <th style="width:6%;">선택</th>
          <th>디바이스</th>
          <th>경로</th>
          <th>접근 허용 사용자</th>
          <th style="width:80px;">추가</th>
        </tr>
      </thead>
      <tbody>
        {% for mount in mounts %}
        <tr>
          <td class="text-center">
            <input type="radio" name="mount_select" value="{{ mount.path }}" />
          </td>
          <td>{{ mount.device }}</td>
          <td>{{ mount.path }}</td>
          <td>
            {% for user in users %}
              <label style="margin-right:10px;">
                <input type="checkbox" class="mount-user-checkbox-{{ loop.index }}" value="{{ user }}" />
                <span>{{ user }}</span>
              </label>
            {% endfor %}
          </td>
          <td class="text-center">
            <button type="button" class="btn btn-outline-success btn-sm add-mount-btn" data-device="{{ mount.device }}" data-path="{{ mount.path }}">
              추가
            </button>
          </td>
        </tr>
        {% else %}
        <tr><td colspan="5" class="text-center text-muted">마운트된 드라이브가 없습니다.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

<!-- 기존 공유폴더 목록 수정 폼 -->
{% if shares and shares|length > 0 %}
<form method="post" autocomplete="off" id="updateSharesForm">
  <input type="hidden" name="action" value="update">
  <input type="hidden" name="permissions_json" id="permissions_json" value="">
  
  <table class="table table-bordered align-middle">
    <thead>
      <tr>

        <th>폴더명</th>
        <th>경로</th>
        <th>접근 허용 사용자</th>
        <th style="width:150px;">수정/삭제/탐색기</th>
      </tr>
    </thead>
    <tbody>
    {% for share in shares %}
    
          {% if share.name == default_share %}
  
          {% endif %}
        </td>
        <td>
          <span title="{{ share.name }}">
            {{ share.name }}
            {% if share.name == default_share %}
 
            {% endif %}
          </span>
        </td>
        <td><span title="{{ share.path }}">{{ share.path }}</span></td>
        <td>
          {% if users and users|length > 0 %}
            {% for user in users %}
              <label class="user-label">
                <input type="checkbox" name="allowed_users_{{ share.name }}" value="{{ user }}"
                  {% if user in share.allowed_users %}checked{% endif %}>
                <span class="{% if user in share.allowed_users %}permission-allow{% else %}permission-deny{% endif %}">
                  {{ user }}
                </span>
              </label>
            {% endfor %}
            <span style="color:#aaa; font-size:0.92em; display:block; margin-top:3px;">
              {% set cnt = share.allowed_users|length %}
              {% if cnt == 0 %} <i>접근 허용된 사용자가 없습니다.</i>
              {% elif cnt == 1 %} ({{ share.allowed_users[0] }})
              {% elif cnt > 1 %}
                ({{ share.allowed_users | join(', ') }})
              {% endif %}
            </span>
          {% else %}
            <span style="color:#aaa;">등록된 엔진엑스 사용자가 없습니다.</span>
          {% endif %}
        </td>
        <td>
          <button type="button" name="edit" value="{{ share.name }}" class="btn btn-outline-primary btn-sm me-1">수정</button>
          <button type="submit" name="remove" value="{{ share.name }}" class="btn btn-outline-danger btn-sm me-1"
            onclick="return confirm('공유폴더 {{ share.name }}을(를) 삭제하시겠습니까?');">삭제</button>
          <a href="{{ url_for('share_browse', share_name=share.name) }}" class="btn btn-outline-info btn-sm" title="파일탐색기 바로가기">
            <i class="fa-solid fa-folder-open"></i>
          </a>
        </td>
      </tr>
    {% endfor %}
    </tbody>
  </table>

  
</form>
{% else %}
  <div class="text-center text-muted my-5">등록된 공유폴더가 없습니다.</div>
{% endif %}


<script>
const BASE_DATA_PATH = '/opt/realcom-nas/DATA';
const MEDIA_BASE_PATH = '/media/realcom/';
let currentFolderPath = '';  // 최상위 경로는 빈 문자열로 시작

// 마운트된 드라이브 "추가" 버튼 이벤트
document.querySelectorAll('.add-mount-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    const device = btn.dataset.device;
    const path = btn.dataset.path;

    const tr = btn.closest('tr');
    const userCheckboxes = tr.querySelectorAll('input[type="checkbox"]:not([name="default_share"])');
    let allowed_users = [];
    userCheckboxes.forEach(cb => { if(cb.checked) allowed_users.push(cb.value); });

    fetch('/share/add_mount', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({ device, path, allowed_users })
    })
    .then(res => res.json())
    .then(data => {
      if (data.success) {
        alert(data.message);
        location.reload();
      } else {
        alert('추가 실패: ' + data.message);
      }
    });
  });
});

// "추가" 버튼 클릭 시 마운트 드라이브 정보를 공유폴더 추가 폼에 채우기
document.querySelectorAll('.add-mount-btn').forEach(button => {
  button.addEventListener('click', () => {
    const path = button.getAttribute('data-path');
    const device = button.getAttribute('data-device');

    const tr = button.closest('tr');
    const checkboxes = tr.querySelectorAll('input[type="checkbox"]:not([name="default_share"])');
    let allowedUsers = [];
    checkboxes.forEach(cb => {
      if(cb.checked) allowedUsers.push(cb.value);
    });

    document.getElementById('folder-path-input').value = path;       // 기존 경로만 채움
    document.getElementById('new-folder-name').value = '';            // 새 폴더명은 빈칸으로 초기화
    document.getElementById('add_is_default').checked = false;

    document.querySelectorAll('#addShareForm input[name="allowed_users"]').forEach(cb => {
      cb.checked = allowedUsers.includes(cb.value);
    });

    document.getElementById('addShareForm').scrollIntoView({ behavior: 'smooth' });
  });
});

// 폴더명 입력시 경로 자동 변경 처리 (경로가 아닌, 새 폴더명 입력 감지용)
function setupFolderNameInputs() {
  document.querySelectorAll('input[name^="folder_name_"]').forEach(folderNameInput => {
    const folderPathInput = document.getElementById('folder-path-input');

    folderNameInput.addEventListener('input', () => {
      // 경로 입력란은 기존 경로 유지, 자동 변경 하지 않음
      // (새 폴더명과 경로 분리했기 때문에 경로값 건드리지 않음)
    });
  });
}

// 권한 수정 버튼 이벤트 처리
function setupPermissionEditButtons() {
  document.querySelectorAll('button[name="edit"]').forEach(btn => {
    btn.addEventListener('click', async (e) => {
      e.preventDefault();
      const shareName = btn.value;
      const checkboxes = document.querySelectorAll(`input[name="allowed_users_${shareName}"]`);
      const allowedUsers = [];
      checkboxes.forEach(chk => {
        if (chk.checked) allowedUsers.push(chk.value);
      });

      try {
        const res = await fetch('/share/update_permissions', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ share_name: shareName, allowed_users: allowedUsers })
        });
        const data = await res.json();
        if (data.status === 'success') {
          alert('권한이 정상적으로 변경되었습니다.');
          location.reload();
        } else {
          alert('권한 변경 실패: ' + (data.message || '서버 오류'));
        }
      } catch {
        alert('권한 변경 실패: 네트워크 오류');
      }
    });
  });
}
function addFolder(device) {
  const folderNameInput = document.querySelector(`input[name="folder_name_${device}"]`);
  if (!folderNameInput) {
    alert("폴더명 입력란을 찾을 수 없습니다.");
    return;
  }
  const folderName = folderNameInput.value.trim();

  const folderPathInput = document.getElementById('folder-path-input');
  if (!folderPathInput) {
    alert("기본 경로 입력란을 찾을 수 없습니다.");
    return;
  }
  const basePath = folderPathInput.value.trim();
  if (!basePath) {
    alert("기본 경로가 지정되지 않았습니다.");
    return;
  }

  const checkboxes = document.querySelectorAll(`input[name="access_user_${device}"]:checked`);
  const allowedUsers = Array.from(checkboxes).map(cb => cb.value);

  // 폴더명이 비어있으면 name을 빈 문자열로 보내거나 아예 안 보내도록 처리 가능
  // 여기서는 빈 문자열로 처리
  fetch('/add_mount_folder', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      device: device,
      path: basePath,
      name: folderName,  // 빈 문자열일 수도 있음
      allowed_users: allowedUsers,
    }),
  })
  .then(res => res.json())
  .then(data => {
    if (data.success) {
      alert('추가 완료');
      location.reload();
    } else {
      alert('추가 실패: ' + (data.error || data.message));
    }
  })
  .catch(() => alert('서버 통신 오류'));
}



// 체크박스 상태 처리 및 경로 자동 변경, 기존 폴더 목록 로드
function setupFolderCreationCheckboxes() {
  const topLevelCheck = document.getElementById('topLevelCheck');
  const subfolderCheck = document.getElementById('subfolderCheck');
  const folderPathInput = document.getElementById('folder-path-input');

  function updatePath() {
    if (topLevelCheck.checked) {
      folderPathInput.value = '/opt/realcom-nas';
    } else if (subfolderCheck.checked) {
      folderPathInput.value = defaultSharePath || '';
    } else {
      folderPathInput.value = '';
    }
  }

  topLevelCheck.addEventListener('change', () => {
    if (topLevelCheck.checked) subfolderCheck.checked = false;
    updatePath();
    loadExistingFolders(folderPathInput.value);
  });

  subfolderCheck.addEventListener('change', () => {
    if (subfolderCheck.checked) topLevelCheck.checked = false;
    updatePath();
    loadExistingFolders(folderPathInput.value);
  });

  updatePath();
  loadExistingFolders(folderPathInput.value);
}

// 기존 폴더 목록 불러오기 및 표시
function loadExistingFolders(basePath) {
  const folderListContainer = document.getElementById('existing-folder-list');
  if (!basePath || !folderListContainer) {
    if(folderListContainer) folderListContainer.innerHTML = '';
    return;
  }

  fetch(`/share/list_folders?path=${encodeURIComponent(basePath)}`)
    .then(res => res.json())
    .then(folders => {
      folderListContainer.innerHTML = '';

      if (!folders || folders.length === 0) {
        folderListContainer.textContent = '하위 폴더가 없습니다.';
        return;
      }

      folders.forEach(folder => {
        const div = document.createElement('div');
        div.textContent = folder;
        div.style.cursor = 'pointer';
        div.style.padding = '4px 8px';
        div.style.borderBottom = '1px solid #ddd';

        div.addEventListener('click', () => {
          const folderPathInput = document.getElementById('folder-path-input');
          folderPathInput.value = normalizePath(basePath + '/' + folder);
          document.getElementById('subfolderCheck').checked = true;
          document.getElementById('topLevelCheck').checked = false;
          loadExistingFolders(folderPathInput.value);
        });

        folderListContainer.appendChild(div);
      });
    })
    .catch(() => {
      folderListContainer.textContent = '폴더 목록을 불러올 수 없습니다.';
    });
}

// 중복 슬래시 제거 함수
function normalizePath(path) {
  if (!path) return '';
  while (path.includes('//')) path = path.replace(/\/\//g, '/');
  return path.replace(/\/+$/, '');
}
// 경로에서 마지막 폴더명 빼고 반환하는 함수
function getBasePath(path) {
  if (!path) return '';
  path = path.replace(/\/+$/, ''); // 끝에 슬래시 여러 개 제거
  const parts = path.split('/');
  parts.pop(); // 마지막 폴더명 제거
  return parts.join('/');
}

// 폴더명 입력 시 경로 자동 변경 처리 - 수정본
function setupFolderNameInputs() {
  const folderPathInput = document.getElementById('folder-path-input');

  document.querySelectorAll('input[name^="folder_name_"]').forEach(folderNameInput => {
    folderNameInput.addEventListener('input', () => {
      const basePath = getBasePath(folderPathInput.value);
      const folderName = folderNameInput.value.trim();

      if (folderName) {
        folderPathInput.value = basePath + '/' + folderName;
      } else {
        folderPathInput.value = basePath;
      }
    });
  });
}

// 페이지 로드 시 이벤트 리스너 셋업 부분에 이 함수 꼭 호출하기
document.addEventListener('DOMContentLoaded', () => {
  setupFolderNameInputs();
  // 기존 다른 함수들도 여기에 호출하세요.
});

// 페이지 로드 시 폴더명 입력 이벤트 및 권한 수정 버튼 이벤트 셋업
document.addEventListener('DOMContentLoaded', () => {
  setupFolderNameInputs();
  setupPermissionEditButtons();
  setupFolderCreationCheckboxes();
});

// 마운트 목록 불러오기 및 체크박스 생성

async function fetchMounts() {
  try {
    const res = await fetch('/api/mounts');
    if (!res.ok) throw new Error('마운트 목록 불러오기 실패');
    const mounts = await res.json();

    const mountListDiv = document.getElementById('mount-list');
    mountListDiv.innerHTML = '';

    mounts.forEach(mnt => {
      const id = `mount_chk_${mnt.name}`;

      const wrapper = document.createElement('div');
      wrapper.style.display = 'inline-block';
      wrapper.style.marginRight = '20px';
      wrapper.style.verticalAlign = 'middle';

      const label = document.createElement('label');
      label.style.cursor = 'pointer';

      const checkbox = document.createElement('input');
      checkbox.type = 'checkbox';
      checkbox.name = 'mount_selection';
      checkbox.id = id;
      checkbox.value = mnt.mountpoint;
      checkbox.style.marginRight = '5px';

      checkbox.addEventListener('change', () => {
        document.querySelectorAll('input[name="mount_selection"]').forEach(chk => {
          if (chk !== checkbox) chk.checked = false;
        });

        if (checkbox.checked) {
          baseSelectedPath = checkbox.value;
          document.getElementById('targetPath').value = baseSelectedPath;
        } else {
          baseSelectedPath = '';
          document.getElementById('targetPath').value = '';
        }
      });

      label.appendChild(checkbox);
      label.appendChild(document.createTextNode(` ${mnt.name} (${mnt.mountpoint})`));
      wrapper.appendChild(label);

      mountListDiv.appendChild(wrapper);
    });

    if (mounts.length === 0) {
      mountListDiv.innerHTML = '마운트된 드라이브가 없습니다.';
    }
  } catch (e) {
    document.getElementById('mount-list').innerText = '마운트된 드라이브 목록을 불러오는 중 오류가 발생했습니다.';
  }
}

// 바로가기 생성 버튼 이벤트
document.getElementById('createShortcutBtn').addEventListener('click', async () => {
  const targetPath = document.getElementById('targetPath').value.trim();
  const shortcutName = document.getElementById('shortcutName').value.trim();

  if (!targetPath) {
    alert('먼저 마운트된 드라이브를 선택하세요.');
    return;
  }
  if (!shortcutName) {
    alert('바로가기 이름을 입력하세요.');
    return;
  }

  try {
    const resp = await fetch('/create_shortcut', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({ path: targetPath, name: shortcutName })
    });
    const result = await resp.json();

    if (resp.ok) {
      alert(result.message);
      document.getElementById('shortcutName').value = '';
      document.getElementById('targetPath').value = '';
      baseSelectedPath = '';
      document.querySelectorAll('input[name="mount_selection"]').forEach(chk => chk.checked = false);
    } else {
      alert('오류: ' + (result.error || '바로가기 생성 실패'));
    }
  } catch (e) {
    alert('오류: ' + e.message);
  }
});


  // ================== “찾아보기” 모달 관련 코드 시작 ==================

  // 모달 열기
  function openFolderPicker() {
    currentFolderPath = '';
    loadTopLevelFolders();
    document.getElementById('folderPickerModal').style.display = 'block';
    document.body.classList.add('modal-open');
  }

  // 모달 닫기
  function closeFolderPicker() {
    document.getElementById('folderPickerModal').style.display = 'none';
    document.body.classList.remove('modal-open');
  }

  // 최상위 폴더 목록 로드 (data, media)
  function loadTopLevelFolders() {
    const folderList = document.getElementById('folder-list');
    folderList.innerHTML = '';

    const topFolders = [
      
      { name: 'media', path: MEDIA_BASE_PATH }
    ];

    topFolders.forEach(folder => {
      const li = document.createElement('li');

      const checkbox = document.createElement('input');
      checkbox.type = 'checkbox';
      checkbox.name = 'folder_selection';
      checkbox.value = folder.path;
      checkbox.id = 'chk_' + folder.name;

      checkbox.addEventListener('change', () => {
        if (checkbox.checked) {
          document.querySelectorAll('input[name="folder_selection"]').forEach(cb => {
            if (cb !== checkbox) cb.checked = false;
          });
          folderPathInput.value = checkbox.value;
        } else {
          folderPathInput.value = '';
        }
      });

      const label = document.createElement('label');
      label.htmlFor = checkbox.id;
      label.textContent = folder.name;
      label.style.cursor = 'pointer';
      label.style.marginLeft = '6px';

      const openLink = document.createElement('a');
      openLink.href = '#';
      openLink.textContent = '(열기)';
      openLink.className = 'open-folder';
      openLink.style.marginLeft = 'auto';
      openLink.onclick = (ev) => {
        ev.preventDefault();
        currentFolderPath = folder.path;
        loadFolders(currentFolderPath);
      };

      li.style.display = 'flex';
      li.style.alignItems = 'center';
      li.style.justifyContent = 'space-between';
      li.style.padding = '4px 8px';
      li.style.borderBottom = '1px solid #ddd';

      li.appendChild(checkbox);
      li.appendChild(label);
      li.appendChild(openLink);

      folderList.appendChild(li);
    });
  }
function loadFolders(path) {
  fetch(`/share/list_folders?path=${encodeURIComponent(path)}`)
    .then(res => res.json())
    .then(folders => {
      currentFolderPath = path;
      const folderList = document.getElementById('folder-list');
      folderList.innerHTML = '';

      // 여기에 필터 추가 (sd로 시작하는 폴더 제외)
      folders = folders.filter(folder => !folder.startsWith('sd'));

      const isTopLevel = (path === BASE_DATA_PATH || path === MEDIA_BASE_PATH);

      if (!isTopLevel) {
        const parentPath = path.split('/').slice(0, -1).join('/') || '/';
        const li = document.createElement('li');
        const upLink = document.createElement('a');
        upLink.href = '#';
        upLink.textContent = '.. (상위 폴더)';
        upLink.className = 'open-folder';
        upLink.style.fontWeight = 'bold';
        upLink.onclick = (e) => {
          e.preventDefault();
          loadFolders(parentPath);
        };
        li.appendChild(upLink);
        folderList.appendChild(li);
      }

      if (!folders || folders.length === 0) {
        folderList.textContent = '하위 폴더가 없습니다.';
        return;
      }

      folders.forEach(folder => {
        const li = document.createElement('li');

        const fullPath = path.endsWith('/') ? path + folder : path + '/' + folder;

        const checkbox = document.createElement('input');
        checkbox.type = 'checkbox';
        checkbox.name = 'folder_selection';
        checkbox.value = fullPath;
        checkbox.id = 'chk_' + folder;

        checkbox.addEventListener('change', () => {
          if (checkbox.checked) {
            document.querySelectorAll('input[name="folder_selection"]').forEach(cb => {
              if (cb !== checkbox) cb.checked = false;
            });
            document.getElementById('folder-path-input').value = checkbox.value;
          } else {
            document.getElementById('folder-path-input').value = '';
          }
        });

        const label = document.createElement('label');
        label.htmlFor = checkbox.id;
        label.textContent = folder;
        label.style.cursor = 'pointer';
        label.style.marginLeft = '6px';

        const openLink = document.createElement('a');
        openLink.href = '#';
        openLink.textContent = '(열기)';
        openLink.className = 'open-folder';
        openLink.style.marginLeft = 'auto';
        openLink.onclick = (ev) => {
          ev.preventDefault();
          loadFolders(fullPath);
        };

        li.style.display = 'flex';
        li.style.alignItems = 'center';
        li.style.justifyContent = 'space-between';
        li.style.padding = '4px 8px';
        li.style.borderBottom = '1px solid #ddd';

        li.appendChild(checkbox);
        li.appendChild(label);
        li.appendChild(openLink);

        folderList.appendChild(li);
      });
    })
    .catch(() => alert('폴더 목록 로드 실패'));
}



  // 모달 확인 버튼 클릭 시 선택 경로를 입력란에 반영 후 모달 닫기
  document.getElementById('folderPickerConfirmBtn').addEventListener('click', () => {
    const checkedBox = document.querySelector('input[name="folder_selection"]:checked');
    if (checkedBox) {
      folderPathInput.value = checkedBox.value;
    }
    closeFolderPicker();
  });
</script>
<script>
    // 강제 새로고침 방지용 URL 랜덤 쿼리 붙이기
    const unique = Date.now();
    const url = new URL(window.location.href);
    url.searchParams.set('_', unique);
    history.replaceState(null, '', url);
</script>



{% endblock %}