<!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>AI 활용 사례 - NCue</title>
    <link rel="stylesheet" href="/public/styles.css" />
  </head>
  <body>
    <% if (typeof filters === 'undefined') { filters = { q: '', tag: '' }; } %>
    <% if (typeof availableTags === 'undefined') { availableTags = []; } %>
    <% if (typeof stories === 'undefined') { stories = []; } %>
    <% var _opsLoggedIn = typeof opsUserEmail !== 'undefined' && opsUserEmail; %>
    <div class="app-shell">
      <%- include('partials/nav', { activeMenu: 'ai-cases' }) %>
      <div class="content-area">
        <header class="topbar">
          <h1>AI 활용 사례</h1>
          <div class="topbar-actions">
            <% if (typeof canComposeUseCase !== 'undefined' && canComposeUseCase) { %>
            <a class="top-action-link" href="/ai-cases/compose" title="글쓰기"
              ><span class="top-action-icon" aria-hidden="true">✎</span> 글쓰기</a
            >
            <% } %>
            <% if (typeof adminMode !== 'undefined' && adminMode) { %>
            <a class="top-action-link" href="/ai-cases/write">사례 등록·관리</a>
            <% } %>
          </div>
        </header>
        <main class="container">
          <% if (typeof submittedOk !== 'undefined' && submittedOk) { %>
          <p class="form-message" style="margin-bottom: 12px; color: #047857">제출이 저장되었습니다.</p>
          <% } %>
          <% if (typeof successStoryDetailAllowed !== 'undefined' && !successStoryDetailAllowed) { %>
          <p class="chat-api-warning" style="margin-bottom: 16px">
            로그인 후 이용 가능합니다.
          </p>
          <% } %>
          <section class="hero panel success-hero">
            <h2>현장에서 검증된 AI 업무 혁신 이야기</h2>
            <p>부서별 도입 과정과 성과를 카드에서 확인하고, 본문에서 상세 내용을 읽을 수 있습니다.</p>
          </section>
          <section class="panel filter-panel">
            <h2>검색·필터</h2>
            <form action="/ai-cases" method="get" class="filter-grid success-filter">
              <label>
                검색어
                <input type="text" name="q" value="<%= filters.q %>" placeholder="제목, 요약, 부서, 태그" />
              </label>
              <label>
                태그
                <select name="tag">
                  <option value="">전체</option>
                  <% (availableTags || []).forEach((oneTag) => { %>
                  <option value="<%= oneTag %>" <%= filters.tag === oneTag ? "selected" : "" %>><%= oneTag %></option>
                  <% }) %>
                </select>
              </label>
              <div class="filter-actions">
                <button type="submit">적용</button>
                <a class="link-muted" href="/ai-cases">초기화</a>
              </div>
            </form>
          </section>
          <section class="panel">
            <div class="section-head">
              <h2>등록된 사례</h2>
              <span class="count-chip">총 <%= stories.length %>건</span>
            </div>
            <% if (!stories.length) { %>
            <p class="empty">조건에 맞는 사례가 없습니다.</p>
            <% } else { %>
            <div class="success-story-grid">
              <% stories.forEach((story) => { %>
              <%- include('partials/success-story-card', { story, successStoryDetailAllowed }) %>
              <% }) %>
            </div>
            <% } %>
          </section>
        </main>
      </div>
    </div>
  </body>
</html>
