<!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>
    </div>

    <script th:inline="javascript">
        async function loadMarketData() {
            try {
                // Api 모듈이 window에 등록될 때까지 기다리거나 체크
                if (typeof Api === 'undefined') {
                    console.error("Api 모듈이 아직 로드되지 않았습니다.");
                    return;
                }

                console.log("시장 지표 로드 시작");
                const data = await Api.request('/api/stock/market', 'GET');

                const kospiEl = document.getElementById('idx_kospi');
                if(kospiEl && data.kospi) {
                    kospiEl.innerText = `${parseFloat(data.kospi).toLocaleString()}`;
                    renderChange(kospiEl, data.kospi_change);
                }

                // KOSDAQ 등 나머지 업데이트...
            } catch (e) {
                console.error("시장 지표 로드 실패", e);
            }
        }

        function renderChange(el, change) {
            if (!change) return;
            const val = parseFloat(change);
            const color = val > 0 ? '#ff4d4d' : (val < 0 ? '#4d4dff' : '#000');
            const prefix = val > 0 ? '▲' : (val < 0 ? '▼' : '');
            const span = document.createElement('span');
            span.style.color = color;
            span.style.fontSize = '0.6em';
            span.style.marginLeft = '10px';
            span.innerText = `${prefix} ${Math.abs(val)}%`;
            el.appendChild(span);
        }

        // common.js가 로드된 후 실행되도록 보장
        window.addEventListener('load', loadMarketData);
    </script>
</section>
</html>