<!-- 경로/파일: templates/elfinder.html -->
<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>elFinder</title>

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/elfinder@2.1.65/css/elfinder.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/elfinder@2.1.65/css/theme.css">

  <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/jquery-ui-dist@1.13.3/jquery-ui.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/elfinder@2.1.65/js/elfinder.min.js"></script>

  <style>
    body { margin:0; padding:0; }
    .errbox { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; padding:24px; }
    code { background:#f3f4f6; padding:2px 6px; border-radius:6px; }
  </style>
</head>

<body>
  <div id="elfinder" style="height:100vh;"></div>

  <script>
    async function initElfinder() {
      let cfg = {};
      try {
        const res = await fetch("/api/elfinder/config");
        if (res.ok) cfg = await res.json();
      } catch (e) {}

      const connectorUrl = (cfg && (cfg.connector || cfg.connector_url || cfg.url)) || "/api/elfinder/connector";

      // 커넥터 존재 확인(백지 방지)
      try {
        const ping = await fetch(connectorUrl + "?cmd=ping", { method: "GET" });
        if (!ping.ok) throw new Error("connector not ok: " + ping.status);
      } catch (e) {
        document.body.innerHTML =
          `<div class="errbox">
            <h2>elFinder 커넥터 연결 실패</h2>
            <p>connectorUrl: <code>${connectorUrl}</code></p>
            <p>에러: <code>${String(e)}</code></p>
           </div>`;
        return;
      }

      $('#elfinder').elfinder({
        url: connectorUrl,
        lang: 'ko'
      });
    }
    initElfinder();
  </script>
</body>
</html>
