<!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" style="max-width: 800px; margin: 50px auto;">
        <header class="major">
            <h2>한국투자증권 API 설정</h2>
            <p>보안을 위해 입력하신 키는 DB에 저장되지 않으며, 세션 종료 시 즉시 파기됩니다.</p>
        </header>

        <form id="kisConfigForm" class="box">
            <div class="row gtr-uniform">
                <div class="col-12">
                    <label for="kis_app_key">App Key (실전투자)</label>
                    <input type="text" id="kis_app_key" placeholder="App Key를 입력하세요" required />
                </div>
                <div class="col-12">
                    <label for="kis_app_secret">App Secret</label>
                    <input type="password" id="kis_app_secret" placeholder="App Secret을 입력하세요" required />
                </div>
                <div class="col-12">
                    <label for="kis_account_no">계좌번호</label>
                    <input type="text" id="kis_account_no" placeholder="'-' 제외 10자리 (예: 1234567801)" maxlength="10" required />
                </div>
                <div class="col-12">
                    <ul class="actions fit">
                        <li><button type="button" id="btn_save_kis" class="button primary fit">연결 및 시작하기</button></li>
                    </ul>
                </div>
            </div>
        </form>
    </div>

    <script type="module">
        document.getElementById('btn_save_kis').addEventListener('click', async () => {
            const data = {
                appKey: document.getElementById('kis_app_key').value,
                appSecret: document.getElementById('kis_app_secret').value,
                accountNo: document.getElementById('kis_account_no').value
            };

            const res = await Api.request('/api/stock/config', 'POST', data);
            if (res.resultCode === 0) {
                location.href = "/stock/dashboard.bs";
            } else {
                UI.showAlert("연결 실패", res.resultMsg);
            }
        });
    </script>
</section>
</html>