<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
    xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
    layout:decorate="~{layouts/layout}"
    layout:fragment="content" lang="ko" xml:lang="ko">
    <head>
        <title>API Explorer</title>
    </head>
    <body>
        <main id="main" class="main">
            <div class="pagetitle">
                <div class="row align-items-center">
                    <div class="col">
                        <h1><i class="bi bi-search"></i> API Explorer</h1>
                    </div>
                    <div class="col-auto">
                        <nav>
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item">홈</li>
                                <li class="breadcrumb-item active">API Explorer</li>
                            </ol>
                        </nav>
                    </div>
                </div>
            </div>

            <section class="section">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <button class="btn btn-link text-dark text-start" data-bs-toggle="collapse" data-bs-target="#apiList" aria-expanded="false" aria-controls="apiList">
                                <i class="bi bi-list"></i> API 목록
                            </button>
                            <div class="card-body">
                                <div class="collapse" id="apiList" style="max-height: 200px; overflow-y: auto;">
                                    <ul class="list-group">
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title fs-6 text-dark">
                                    <i class="bi bi-send"></i> API 요청
                                </h5>
                                <form id="apiForm" class="row g-3">
                                    <div class="col-md-2">
                                        <div class="form-floating">
                                            <select class="form-select" id="method" name="method">
                                                <option value="GET">GET</option>
                                                <option value="POST">POST</option>
                                                <option value="PUT">PUT</option>
                                                <option value="DELETE">DELETE</option>
                                            </select>
                                            <label for="method"><i class="bi bi-gear"></i> HTTP 메소드</label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-floating">
                                            <input type="text" class="form-control" id="url" name="url" placeholder="URL">
                                            <label for="url"><i class="bi bi-link"></i> URL</label>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <button type="submit" class="btn btn-primary h-100 w-100">
                                            <i class="bi bi-send"></i> 전송
                                        </button>
                                    </div>
                                </form>

                                <div class="mt-4">
                                    <h6 class="text-dark"><i class="bi bi-braces"></i> 요청 헤더</h6>
                                    <div id="headerEditor" style="height: 80px; border: 1px solid #ddd;"></div>
                                </div>

                                <div class="mt-4">
                                    <h6 class="text-dark"><i class="bi bi-braces"></i> 요청 본문</h6>
                                    <div id="requestEditor" style="height: 150px; border: 1px solid #ddd;"></div>
                                </div>
                            </div>
                        </div>

                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title fs-6 text-dark">
                                    <i class="bi bi-arrow-return-left"></i> 응답 결과
                                </h5>
                                <div class="mb-3">
                                    <span class="badge bg-secondary" id="statusCode"></span>
                                    <span class="badge bg-info" id="responseTime"></span>
                                </div>
                                <div id="responseEditor" style="height: 200px; border: 1px solid #ddd;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <script type="module" th:src="@{/js/pages/endpoint/endpoint.js}" defer></script>
        </main>
    </body>
</html>