<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/default_layout}">
<section layout:fragment="content">
    <div class="container">
        <header class="major">
            <h2>나의 투자 대시보드</h2>
        </header>

        <div class="row">
            <div class="col-4 col-12-medium">
                <div class="box">
                    <h3>총 자산</h3>
                    <h2 id="total_asset">0 원</h2>
                    <p>수익률: <span id="total_profit_rate">0.00%</span></p>
                </div>
            </div>
            <div class="col-8 col-12-medium">
                <div class="table-wrapper">
                    <table>
                        <thead>
                        <tr>
                            <th>종목명</th>
                            <th>보유수량</th>
                            <th>매입가</th>
                            <th>현재가</th>
                            <th>수익률</th>
                        </tr>
                        </thead>
                        <tbody id="stock_list">
                        <tr><td colspan="5" class="text-center">데이터를 불러오는 중...</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <script type="module">
        window.addEventListener('DOMContentLoaded', async () => {
            try {
                const res = await Api.request('/api/stock/balance');
                if (res.resultCode === 0) {
                    renderBalance(res.data);
                } else {
                    location.href = "/stock/config.bs";
                }
            } catch (e) {
                UI.showAlert("오류", "데이터를 가져올 수 없습니다.");
            }
        });

        function renderBalance(data) {
            // 자산 및 종목 렌더링 로직
        }
    </script>
</section>
</html>