{{ template "base.html" . }}

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

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

    <!-- 페이지 제목 -->
    <h1 class="text-xl font-bold text-gray-800">자산 현황</h1>

    <!-- 요약 카드 4개 -->
    <div id="summaryCards" class="grid grid-cols-2 lg:grid-cols-4 gap-4">
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4 animate-pulse">
            <p class="text-xs text-gray-400 mb-1">로딩 중...</p>
            <p class="text-lg font-bold text-gray-300">-</p>
        </div>
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4 animate-pulse">
            <p class="text-xs text-gray-400 mb-1">로딩 중...</p>
            <p class="text-lg font-bold text-gray-300">-</p>
        </div>
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4 animate-pulse">
            <p class="text-xs text-gray-400 mb-1">로딩 중...</p>
            <p class="text-lg font-bold text-gray-300">-</p>
        </div>
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4 animate-pulse">
            <p class="text-xs text-gray-400 mb-1">로딩 중...</p>
            <p class="text-lg font-bold text-gray-300">-</p>
        </div>
    </div>

    <!-- 예수금 카드 -->
    <div id="cashCard" class="bg-white rounded-xl shadow-sm border border-gray-100 p-5">
        <h2 class="text-sm font-semibold text-gray-700 mb-3">예수금</h2>
        <div class="grid grid-cols-2 gap-4">
            <div>
                <p class="text-xs text-gray-400 mb-1">D+2 추정예수금</p>
                <p id="cashEntr" class="text-base font-bold text-gray-800">-</p>
            </div>
            <div>
                <p class="text-xs text-gray-400 mb-1">주문가능현금</p>
                <p id="cashOrdAlowa" class="text-base font-bold text-gray-800">-</p>
            </div>
        </div>
    </div>

    <!-- 보유 종목 테이블 -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="px-5 py-3 border-b border-gray-100">
            <h2 class="text-sm font-semibold text-gray-700">보유 종목</h2>
        </div>
        <!-- 테이블 헤더 -->
        <div class="grid grid-cols-[1fr_80px_90px_90px_100px_80px] text-xs font-semibold text-gray-500 bg-gray-50 border-b border-gray-100 px-5 py-2.5 gap-2">
            <span>종목명</span>
            <span class="text-right">보유수량</span>
            <span class="text-right">평균단가</span>
            <span class="text-right">현재가</span>
            <span class="text-right">평가손익</span>
            <span class="text-right">수익률</span>
        </div>
        <!-- 종목 목록 -->
        <div id="holdingsTable">
            <div class="px-5 py-10 text-center text-sm text-gray-400 animate-pulse">데이터를 불러오는 중...</div>
        </div>
    </div>

    <!-- 미체결/체결내역 탭 -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
        <!-- 탭 버튼 -->
        <div class="flex border-b border-gray-100">
            <button id="assetPendingTab"
                onclick="showAssetTab('pending')"
                class="px-5 py-3 text-sm font-medium border-b-2 border-blue-500 text-blue-600">
                미체결
            </button>
            <button id="assetHistoryTab"
                onclick="showAssetTab('history')"
                class="px-5 py-3 text-sm font-medium text-gray-500 hover:text-gray-700">
                체결내역
            </button>
        </div>

        <!-- 미체결 패널 -->
        <div id="assetPendingPanel" class="p-5">
            <div class="text-sm text-gray-400 text-center py-6 animate-pulse">조회 중...</div>
        </div>

        <!-- 체결내역 패널 -->
        <div id="assetHistoryPanel" class="p-5 hidden">
            <div class="text-sm text-gray-400 text-center py-6">탭을 클릭하면 조회됩니다.</div>
        </div>
    </div>

</div>
{{ end }}

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