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


<head th:replace="fragment/head :: headFragment">
    <meta charset="utf-8">
</head>

<body>

<!-- header -->
<header th:replace="fragment/header :: headerFragment"></header>
<th:block th:replace="fragment/header :: headerScript"></th:block>
<nav th:replace="fragment/header :: navFragment"></nav>



<!-- csrf -->
<input id="csrf" type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}">
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" style="position: absolute; top: 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>
<div class="api-tester-layout">
    <div class="tester-toolbar">
        <button type="button" class="btn btn-primary btn-sm" id="toggle_tester">시나리오 보기</button>
        <button type="button" class="btn btn-primary btn-sm" id="new_collection"><i class="fa fa-plus"></i> 새 컬렉션
        </button>
        <button type="button" class="btn btn-primary btn-sm" id="new_request"><i class="fa fa-plus"></i> 새 요청</button>
        <button type="button" class="btn btn-primary btn-sm" id="new_scenario"><i class="fa fa-plus"></i> 새로운 시나리오
        </button>
        <button type="button" class="btn btn-primary btn-sm" id="full_screen"><i class="fa-solid fa-display"></i> 전체화면</button>
        <button type="button" class="btn btn-primary btn-sm" id="show_variable"><i class="fa-solid fa-list"></i> 변수 보기</button>
    </div>
    <div class="tester">
        <section th:replace="page/tester/apiScenario :: scenarioFragment">
        </section>
        <aside th:replace="page/tester/apiCollection :: collectionFragment"></aside>
        <section class="api-tester" layout:fragment="contentFragment">
        </section>
        <section th:replace="page/tester/apiScenario :: scenarioScript">

        </section>
    </div>
    <th:block th:replace="page/tester/apiCollection :: collectionScript">

    </th:block>
    <th:block layout:fragment="contentScript">
    </th:block>
    <link th:href="@{/css/resizable.css}" rel="stylesheet" />
    <script>
        $(function () {
            const container = document.querySelector('.api-tester-layout');
            $('#full_screen').on('click', function () {
                container.classList.toggle('full-screen');
            });

            function populateVariablesTable() {
                var tbody = $('.variables');
                tbody.empty(); // Clear existing rows

                $.each(window.globals, function(key, value) {
                    var row = $('<tr>');
                    var keyInput = $('<input>').attr('type', 'text').addClass('form-control key-input').val(key);
                    var valueInput = $('<input>').attr('type', 'text').addClass('form-control value-input').val(value);
                    var deleteButton = $('<button>').attr('type', 'button').addClass('btn btn-danger btn-sm delete-variable').html('<i class="fa fa-trash"></i>');

                    row.append($('<td>').append(keyInput));
                    row.append($('<td>').append(valueInput));
                    row.append($('<td>').append(deleteButton));
                    tbody.append(row);
                });

                // Event listener for changes in key
                $('.key-input').on('change', function() {
                    var oldKey = $(this).closest('tr').find('.value-input').attr('data-old-key');
                    var newKey = $(this).val();
                    var value = window.globals[oldKey];

                    delete window.globals[oldKey];
                    window.globals[newKey] = value;
                    $(this).closest('tr').find('.value-input').attr('data-old-key', newKey);
                });

                // Event listener for changes in value
                $('.value-input').on('change', function() {
                    var key = $(this).closest('tr').find('.key-input').val();
                    var newValue = $(this).val();
                    window.globals[key] = newValue;
                });

                $('.delete-variable').on('click', function() {
                    var key = $(this).closest('tr').find('.key-input').val();
                    delete window.globals[key];
                    $(this).closest('tr').remove();
                });

                // Set data-old-key attribute for tracking key changes
                $('.value-input').each(function() {
                    var key = $(this).closest('tr').find('.key-input').val();
                    $(this).attr('data-old-key', key);
                });
            }

            $('#show_variable').on('click', function () {
                populateVariablesTable();
                $('#variable_modal').modal('show');
            });

            $('.btn_add_variables').on('click', function() {
                var tbody = $('.variables');

                // Create a new row with empty key and value inputs
                var newRow = $('<tr>');
                var keyInput = $('<input>').attr('type', 'text').addClass('form-control key-input');
                var valueInput = $('<input>').attr('type', 'text').addClass('form-control value-input');
                var deleteButton = $('<button>').attr('type', 'button').addClass('btn btn-danger btn-sm delete-variable').html('<i class="fa fa-trash"></i>');

                newRow.append($('<td>').append(keyInput));
                newRow.append($('<td>').append(valueInput));
                newRow.append($('<td>').append(deleteButton));
                tbody.append(newRow);

                // Event listeners for the new inputs
                keyInput.on('change', function() {
                    var newKey = $(this).val();
                    window.globals[newKey] = ''; // Initialize the key with an empty value
                    valueInput.attr('data-old-key', newKey);
                });

                valueInput.on('change', function() {
                    var key = $(this).closest('tr').find('.key-input').val();
                    var newValue = $(this).val();
                    window.globals[key] = newValue;
                });

                deleteButton.on('click', function() {
                    var key = $(this).closest('tr').find('.key-input').val();
                    delete window.globals[key];
                    $(this).closest('tr').remove();
                });
            });

            document.addEventListener('keydown', (event) => {
                if (event.key === 'Escape') {
                    container.classList.remove('full-screen');
                }
            });

        });
    </script>
</div>

<!--<footer th:replace="fragment/footer :: footerFragment"></footer>-->

</body>
</html>
