<!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">
  <div class="container-fluid mt-2" style="height: 100%">
    <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}">
    <div class="card" style="height: 100%">
      <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" style="height: 100%;">
        </div>
      </div>
    </div>
  </div>
  <div id="popperContent" class="variable_popper" style="display: none;">
    <div class="variable_popper">
    </div>
  </div>
  <iframe id="preRequest" class="preRequest"></iframe>
  <iframe id="postRequest" class="postRequest"></iframe>
</section>
</body>

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

    $(document).ready(function() {
      fetch('[[@{/mgmt/servers/list.do}]]').then(response => response.json()).then(data => {
        let options = {};
        options.contextPath = '[[@{/}]]';
        options.servers = data;
        const apiTester = new APITestManager(options);
      });

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

