{{ 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-blue-600">🔵</span> 코스피200
            <span id="lastUpdated" class="text-xs font-normal text-gray-400"></span>
        </h1>

        <!-- 정렬 -->
        <div class="flex rounded-lg border border-gray-200 overflow-hidden text-xs font-medium">
            <button data-sort="fluRt"  class="sort-tab px-3 py-1.5 bg-blue-500 text-white">등락률</button>
            <button data-sort="volume" class="sort-tab px-3 py-1.5 bg-white text-gray-600 hover:bg-gray-50 border-l border-gray-200">거래량</button>
            <button data-sort="curPrc" class="sort-tab px-3 py-1.5 bg-white text-gray-600 hover:bg-gray-50 border-l border-gray-200">현재가</button>
        </div>

        <!-- 상승/하락/전체 필터 -->
        <div class="flex rounded-lg border border-gray-200 overflow-hidden text-xs font-medium">
            <button data-dir="all"  class="dir-tab px-3 py-1.5 bg-blue-500 text-white">전체</button>
            <button data-dir="up"   class="dir-tab px-3 py-1.5 bg-white text-gray-600 hover:bg-gray-50 border-l border-gray-200">상승</button>
            <button data-dir="down" class="dir-tab px-3 py-1.5 bg-white text-gray-600 hover:bg-gray-50 border-l border-gray-200">하락</button>
        </div>

        <!-- 종목 검색 -->
        <input id="k200Search" 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="k200Count" class="text-xs text-gray-400 ml-auto"></span>
    </div>

    <!-- 종목 테이블 -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
        <!-- 테이블 헤더 -->
        <div class="grid grid-cols-[2.5rem_1fr_1fr_90px_90px_100px_90px_90px_90px] text-xs font-semibold text-gray-500 bg-gray-50 border-b border-gray-100 px-4 py-2.5 gap-2">
            <span class="text-center">#</span>
            <span>종목명</span>
            <span data-col="curPrc"  class="col-sort text-right cursor-pointer select-none hover:text-blue-500 transition-colors">현재가 <span class="sort-arrow"></span></span>
            <span data-col="predPre" class="col-sort text-right cursor-pointer select-none hover:text-blue-500 transition-colors">전일대비 <span class="sort-arrow"></span></span>
            <span data-col="fluRt"   class="col-sort text-right cursor-pointer select-none hover:text-blue-500 transition-colors">등락률 <span class="sort-arrow text-blue-400">▼</span></span>
            <span data-col="volume"  class="col-sort text-right cursor-pointer select-none hover:text-blue-500 transition-colors">거래량 <span class="sort-arrow"></span></span>
            <span data-col="open"    class="col-sort text-right cursor-pointer select-none hover:text-blue-500 transition-colors">시가 <span class="sort-arrow"></span></span>
            <span data-col="high"    class="col-sort text-right cursor-pointer select-none hover:text-blue-500 transition-colors">고가 <span class="sort-arrow"></span></span>
            <span data-col="low"     class="col-sort text-right cursor-pointer select-none hover:text-blue-500 transition-colors">저가 <span class="sort-arrow"></span></span>
        </div>
        <!-- 종목 목록 -->
        <div id="k200List" class="divide-y divide-gray-50">
            <div class="px-4 py-12 text-center text-sm text-gray-400 animate-pulse">데이터를 불러오는 중...</div>
        </div>
    </div>

</div>
{{ end }}

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