<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout/api_tester_layout}">
<body>

<section layout:fragment="contentFragment">
    <script>
        require.config({paths: {'vs': '/plugins/vs'}});
    </script>
    <div id="loading-overlay" style="display: none;">
        <div class="d-flex justify-content-center align-items-center"
             style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 9999;">
            <div class="text-center">
                <span class="sr-only">Loading...</span>
                <br/>
                <button id="cancel-ajax" class="btn btn-danger mt-3">Cancel</button>
            </div>
        </div>
    </div>
    <div class="container-fluid mt-2">
        <div class="toast" role="alert" aria-live="assertive" aria-atomic="true" style="position: absolute; bottom: 0; left: 0;">
            <div class="toast-header">
                <strong class="mr-auto">알림</strong>
                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
            <div class="toast-body">
            </div>
        </div>
        <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}">
        <div class="card">
            <div class="card-header" style="min-height: 50px;">
                <ul class="nav nav-tabs card-header-tabs" role="tablist" id="apiRequestTabTitle">
                </ul>
            </div>
            <div class="card-body" style="min-height: 800px;">
                <div class="tab-content" id="apiRequestTabContent">
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="new_api_request_modal" tabindex="-1" aria-labelledby="new_api_request_modal"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">새로운 API 추가</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <select class="form-select" id="modal_collection"></select>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">닫기</button>
                    <button type="button" class="btn btn-primary add_new_request">추가</button>
                </div>
            </div>
        </div>
    </div>
    <div style="display: none">
        <ul id="servers">
            <li th:each="server : ${servers}" th:data-id="${server.id}" th:data-name="${server.name}" th:data-path="${server.basePath}"></li>
        </ul>
    </div>
</section>
</body>

<th:block layout:fragment="contentScript">
    <script th:src="@{/js/APITester.js}"></script>
    <script>
        $(document).ajaxError(function(event, jqxhr, settings, exception) {
            if (jqxhr.status === 401) {
                window.location.href = '/';
            }
        });
        $(function () {

            //get servers from html convert to array
            const servers = [];
            $('#servers li').each(function () {
                servers.push({
                    id: $(this).data('id'),
                    name: $(this).data('name'),
                    basePath: $(this).data('path')
                });
            });

            const apiTester = new APITester();
            apiTester.init(servers);

            // const timer = setInterval(function () {
            //     $.ajax({
            //         url: '/refreshSessionTimeout.do',
            //         type: 'GET',
            //         contentType: 'application/json',
            //         complete: function () {
            //             apiTester.hideLoadingOverlay();
            //         }
            //     });
            // }, 60000);

        });
    </script>
</th:block>
</html>

