{{ template "base.html" . }}

{{ define "sidebar" }}{{ end }}

{{ define "content" }}
<div class="space-y-4">

    <!-- 헤더 + 필터 바 -->
    <div class="flex flex-wrap items-center gap-3">
        <h1 class="text-xl font-bold text-gray-800 flex items-center gap-2">
            <span class="text-purple-500">📊</span> 테마 분석
        </h1>

        <!-- 날짜 구간 탭 -->
        <div class="flex rounded-lg border border-gray-200 overflow-hidden text-xs font-medium">
            <button data-date="1"  class="date-tab px-3 py-1.5 bg-blue-500 text-white">1일</button>
            <button data-date="5"  class="date-tab px-3 py-1.5 bg-white text-gray-600 hover:bg-gray-50 border-l border-gray-200">5일</button>
            <button data-date="20" class="date-tab px-3 py-1.5 bg-white text-gray-600 hover:bg-gray-50 border-l border-gray-200">20일</button>
        </div>

        <!-- 정렬 탭 -->
        <div class="flex rounded-lg border border-gray-200 overflow-hidden text-xs font-medium">
            <button data-sort="3" class="sort-tab px-3 py-1.5 bg-blue-500 text-white">등락률순</button>
            <button data-sort="1" class="sort-tab px-3 py-1.5 bg-white text-gray-600 hover:bg-gray-50 border-l border-gray-200">기간수익률순</button>
        </div>

        <!-- 테마 검색 -->
        <input id="themeSearch" type="text" placeholder="테마명 검색..."
            class="text-xs px-3 py-1.5 border border-gray-200 rounded-lg focus:outline-none focus:ring-1 focus:ring-blue-400 w-36">

        <span id="themeCount" class="text-xs text-gray-400 ml-auto"></span>
    </div>

    <!-- 2열 레이아웃: 테마 목록 + 구성종목 패널 -->
    <div class="flex gap-5 items-start">

        <!-- 좌: 테마 목록 -->
        <div class="flex-1 min-w-0">
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
                <!-- 테이블 헤더 -->
                <div class="grid grid-cols-[2fr_1fr_80px_80px_80px_80px] gap-0 text-xs font-semibold text-gray-500 bg-gray-50 border-b border-gray-100 px-4 py-2.5">
                    <span data-col="name"      class="theme-col-sort cursor-pointer select-none hover:text-blue-500 transition-colors">테마명 <span class="sort-arrow"></span></span>
                    <span>주력종목</span>
                    <span data-col="fluRt"     class="theme-col-sort text-right cursor-pointer select-none hover:text-blue-500 transition-colors">등락률 <span class="sort-arrow"></span></span>
                    <span data-col="periodRt"  class="theme-col-sort text-right cursor-pointer select-none hover:text-blue-500 transition-colors">기간수익률 <span class="sort-arrow"></span></span>
                    <span data-col="stockCount" class="theme-col-sort text-center cursor-pointer select-none hover:text-blue-500 transition-colors">종목수 <span class="sort-arrow"></span></span>
                    <span data-col="risingCount" class="theme-col-sort text-center cursor-pointer select-none hover:text-blue-500 transition-colors">상승/하락 <span class="sort-arrow"></span></span>
                </div>
                <!-- 테마 목록 -->
                <div id="themeList" class="divide-y divide-gray-50">
                    <div class="px-4 py-10 text-center text-sm text-gray-400">데이터를 불러오는 중...</div>
                </div>
            </div>
        </div>

        <!-- 우: 구성종목 패널 (sticky) -->
        <div id="themeDetailPanel"
             class="w-80 shrink-0 sticky top-20 self-start bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
            <!-- 초기 안내 -->
            <div id="themeDetailEmpty" class="px-6 py-12 text-center text-sm text-gray-400">
                <p class="text-2xl mb-2">👈</p>
                <p>테마를 클릭하면<br>구성종목을 확인할 수 있습니다.</p>
            </div>
            <!-- 구성종목 내용 (로드 후 표시) -->
            <div id="themeDetailContent" class="hidden">
                <div class="px-4 py-3 border-b border-gray-100 bg-gray-50">
                    <p id="detailThemeName" class="font-bold text-gray-800 text-sm truncate"></p>
                    <div class="flex items-center gap-3 mt-1 text-xs">
                        <span>등락률 <span id="detailFluRt" class="font-semibold"></span></span>
                        <span>기간수익률 <span id="detailPeriodRt" class="font-semibold text-purple-600"></span></span>
                    </div>
                </div>
                <div id="detailStockList" class="divide-y divide-gray-50 max-h-[70vh] overflow-y-auto"></div>
            </div>
            <div id="themeDetailLoading" class="hidden px-6 py-10 text-center text-sm text-gray-400">
                <div class="animate-pulse">조회 중...</div>
            </div>
        </div>

    </div>
</div>
{{ end }}

{{ define "scripts" }}
<script src="/static/js/theme.js"></script>
{{ end }}