<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
</head>

<body>
<aside class="api-catalog border" th:fragment="collectionFragment">
    <div style="background: rgba(0,0,0,.03);">
        API 목록
    </div>
    <div class="pt-links" aria-label="sidebar menu">
        <ul class="list-unstyled" id="side_menubar">
        </ul>
    </div>
    <div class="modal fade" id="new_scenario_modal" tabindex="-1" aria-labelledby="new_scenario_modal" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">새로운 시나리오 추가</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <input type="text" id="new_scenario_name" class="form-control" placeholder="이름을 입력하세요" aria-label="이름을 입력하세요" name="scenario_name" required/>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">닫기</button>
                    <button type="button" class="btn btn-primary create_scenario">저장</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="new_collection_modal" tabindex="-1" aria-labelledby="new_collection_modal" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">새로운 컬렉션 추가</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <input type="text" id="new_collection_name" class="form-control" placeholder="이름을 입력하세요" aria-label="이름을 입력하세요" name="collection_name" required/>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">닫기</button>
                    <button type="button" class="btn btn-primary save_collection">저장</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="edit_name_modal" tabindex="-1" aria-labelledby="edit_name_modal" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">새로운 이름</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <input type="text" class="form-control" placeholder="이름을 입력하세요" aria-label="이름을 입력하세요" name="name" required/>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">닫기</button>
                    <button type="button" class="btn btn-primary change_name">저장</button>
                </div>
            </div>
        </div>
    </div>
    <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="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">
                    <div class="form-floating">
                        <select class="form-select" id="modal_collection"></select>
                        <label for="modal_collection">컬렉션 선택</label>
                    </div>
                    <div class="input-group mt-2">
                        <span class="input-group-text">API 이름</span>
                        <input type="text" class="form-control" id="new_api_name">
                    </div>
                    <div class="form-floating">
                        <select name="type" class="mt-2 form-select method" id="new_api_type">
                            <option value="HTTP">HTTP</option>
                            <option value="HTTPFlat">HTTP Flat</option>
                            <option value="TCP">TCP</option>
                        </select>
                        <label for="new_api_type">API유형</label>
                    </div>
                </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 class="modal fade" id="confirm_delete_modal" tabindex="-1" aria-labelledby="confirm_delete_modal" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">컬렉션 삭제</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div>삭제 하시겠습니까?</div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">닫기</button>
                    <button type="button" class="btn btn-primary confirm_delete">삭제</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="confirm_delete_scenario_modal" tabindex="-1" aria-labelledby="confirm_delete_scenario_modal" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">시나리오 삭제</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div>삭제 하시겠습니까?</div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">닫기</button>
                    <button type="button" class="btn btn-primary confirm_delete_scenario">삭제</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="confirm_delete_api_modal" tabindex="-1" aria-labelledby="confirm_delete_api_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">
                    <div>삭제 하시겠습니까?</div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">닫기</button>
                    <button type="button" class="btn btn-primary confirm_delete_api">삭제</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="variable_modal" tabindex="-1" aria-labelledby="variable_modal" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">환경 변수</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div>Globals</div>
                    <table class="table">
                        <thead>
                        <tr>
                            <th scope="col">키</th>
                            <th scope="col">값</th>
                            <th scope="col">
                                <button type="button" class="btn btn-secondary btn-sm btn_add_variables">추가</button>
                            </th>
                        </tr>
                        </thead>
                        <tbody class="variables">
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">닫기</button>
                </div>
            </div>
        </div>
    </div>
</aside>

<!-- menu script -->
<th:block th:fragment="collectionScript">
    <script th:inline="javascript">
        $(document).ready(function () {

            var showingScenario = false;

            $('#toggle_tester').on('click', function () {
                console.log(showingScenario);
                showingScenario = !showingScenario;
                if (showingScenario) {
                    $('.api-scenario').show();
                    $('.api-tester').hide();
                    $('#toggle_tester').text('테스터 보기');
                } else {
                    $('#toggle_tester').text('시나리오 보기');
                    $('.api-scenario').hide();
                    $('.api-tester').show();
                }
            });

            if (showingScenario) {
                $('.api-scenario').show();
                $('.api-tester').hide();
            } else {
                $('.api-scenario').hide();
                $('.api-tester').show();
            }
        });
    </script>
</th:block>
</body>

</html>
