{{ if .HasShortcode "yasgui" }}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@triply/yasgui@4.2.27/build/yasgui.min.css" />
<script src="https://cdn.jsdelivr.net/npm/@triply/yasgui@4.2.27/build/yasgui.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/codemirror@5.65.8/theme/{{ .Site.Params.CodeMirrorTheme }}.css">
<script>
  const yasgui = {};
  function setYasguiQuery(yasguiId, tabName, query, endpoint) {
    let yasguiInstance = yasgui[yasguiId];
    let tab = yasguiInstance.getTab(tabName);
    if (!tab) {
      tab = yasguiInstance.addTab(true, {
         ...Yasgui.Tab.getDefaults(),
         requestConfig: endpoint ? {endpoint: endpoint} : yasguiInstance.config.requestConfig,
         name: tabName,
         id: tabName
      });
    }
    try {
      tab.setQuery(query);
    } catch (error) {
      tab.close();
      tab = yasguiInstance.addTab(true, {
        ...Yasgui.Tab.getDefaults(),
        requestConfig: endpoint ? {endpoint: endpoint} : yasguiInstance.config.requestConfig,
        name: tabName,
        id: tabName
      });
    }
    tab.yasqe.query();
  }
</script>
<style>
  .yasr table.dataTable {
    max-width: 100%;
  }
  .yasr table.dataTable tbody td {
    padding: 2px 4px;
    font-size: 90%;
  }
</style>
{{ end }}