<!doctype html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <%- include('partials/favicon') %>
    <title>대시보드 - NCue</title>
    <link rel="stylesheet" href="/public/styles.css" />
  </head>
  <body class="ai-explore-page dashboard-page">
    <div class="app-shell">
      <%- include('partials/nav', {
        activeMenu: 'dashboard',
        adminMode: typeof adminMode !== 'undefined' ? adminMode : false,
      }) %>
      <div class="content-area">
        <header class="topbar">
          <h1>대시보드</h1>
        </header>
        <main class="container container-ai-full">
          <section class="panel">
            <p class="subtitle">
              경영·업무 지표를 한눈에 보고, 필요한 대시보드를 선택해 활용하세요.
            </p>
            <form class="search-bar-wrap" id="dashboardSearchForm" role="search">
              <input
                type="search"
                id="dashboardSearch"
                placeholder="제목, 설명으로 검색하세요"
                class="search-input"
                autocomplete="off"
                aria-label="대시보드 제목·설명 검색"
              />
            </form>
          </section>
          <section class="panel">
            <h2>대시보드</h2>
            <div class="ai-card-grid">
              <a href="/dashboard/business-performance" class="ai-card ai-card-link">
                <div class="ai-card-header">
                  <span class="status-chip public">공개중</span>
                </div>
                <h3>경영성과 대시보드</h3>
                <p>
                  조직·팀 단위 성과와 핵심 지표를 시각화하고, 의사결정에 활용할 수 있는 경영 성과 화면입니다.
                </p>
                <div class="tag-row">
                  <span class="tag-chip">#경영</span>
                  <span class="tag-chip">#성과</span>
                  <span class="tag-chip">#KPI</span>
                </div>
              </a>
            </div>
          </section>
        </main>
      </div>
    </div>
    <script>
      (function () {
        var form = document.getElementById("dashboardSearchForm");
        var input = document.getElementById("dashboardSearch");
        var grid = document.querySelector(".ai-card-grid");
        if (!form || !input || !grid) return;

        var cards = grid.querySelectorAll(".ai-card");

        function cardTitleDescriptionText(el) {
          var parts = [];
          var h3 = el.querySelector("h3");
          if (h3) parts.push(h3.textContent || "");
          el.querySelectorAll("p").forEach(function (p) {
            if (!p.closest(".tag-row")) parts.push(p.textContent || "");
          });
          return parts.join(" ").replace(/\s+/g, " ").trim().toLowerCase();
        }

        function applyFilter() {
          var q = (input.value || "").trim().toLowerCase();
          cards.forEach(function (el) {
            var text = cardTitleDescriptionText(el);
            var show = !q || text.indexOf(q) !== -1;
            el.hidden = !show;
            el.setAttribute("aria-hidden", show ? "false" : "true");
          });
        }

        input.addEventListener("input", applyFilter);
        input.addEventListener("search", applyFilter);

        form.addEventListener("submit", function (e) {
          e.preventDefault();
          applyFilter();
        });
      })();
    </script>
  </body>
</html>
