{% extends "layout-full.html" %}
{% block head %}
<link rel="stylesheet" href="/static/codemirror.css">
<style>
.CodeMirror {
  background: #e9ecef;
  height: 29rem;
}

details.panel > summary {
  font-weight: bold;
}

details.panel {
  background: #e9ecef;
  padding: 0px;
}

details.panel > :is(summary, small, .invalid-feedback) {
  padding: 2px 5px;
}

.invalid-feedback {
  /* smth. about this layout seems to break the CSS rules for this */
  display: block !important;
}

.cm-s-variables {
  height: 8rem;
}

.input textarea, .results pre {
  height: 100%;
}

.highlight .err {
  /* work around outdated gql implementation in pygments */
  border: none !important;
}
</style>
{% endblock %}
{% block body %} 
<form class="container-fluid" id="query-form" method="POST">
  {{csrf_token()}}
  <noscript class="alert alert-info d-block">
    <strong>Notice:</strong> This page works without JavaScript, but the
    experience is improved if you enable it.
  </noscript>
  <div class="row">
    <div class="col-md-6 input">
      <details class="panel form-control" open="true">
        <summary>Query</summary>
        <textarea
	  class="form-control"
          rows="20"
          id="editor"
          placeholder="Enter a GraphQL query here"
          name="query">{{query}}</textarea>
      </details>
      <script>
        /* Reduce effects of FOUC for JS users */
        document.getElementById('editor').style.display = 'none';
      </script>
      <details style="margin-top: 1rem" {{'' if variables == '' else 'open="true"'}} class="panel form-control {{valid.cls("variables")}}">
        <summary>Variables</summary>
        <textarea
	  class="form-control"
          rows="5"
          id="variables"
          placeholder="Enter a JSON object here"
	  name="variables">{{variables}}</textarea>
	{{valid.summary("variables")}}
	<small class="form-text text-muted">
	  Variables must be a single valid JSON object.
        </small>
      </details>
    </div>
    <div class="col-md-6 results">
      <details class="panel form-control" style="height: 100%" open="true" inert="true">
        <summary>Result</summary>
        {{results}}
      </details>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12" style="margin-top: 1rem">
      <button class="btn btn-primary pull-right" type="submit">
        Submit query {{icon('caret-right')}}
      </button>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <details style="margin-top: 1rem">
        <summary>View GraphQL schema</summary>
        {{schema}}
      </details>
    </div>
  </div>
</form>
{% endblock %}
{% block scripts %}
<script src="/static/codemirror.js"></script>
<script src="/static/simple.js"></script>
<script>
CodeMirror.defineSimpleMode("graphql", {
  start: [
    {regex: /"(?:[^\\]|\\.)*?(?:"|$)/, token: "string"},
    {regex: /#.*/, token: "comment"},
    {regex: /\w[a-zA-Z]+/, token: "atom"},
  ],
  meta: {
    lineComment: "#"
  }
});
CodeMirror.defineSimpleMode("json", {
  start: [
    {regex: /"(?:[^\\]|\\.)*?(?:"|$)/, token: "string"},
  ],
});

const ed = document.getElementById('editor');
const va = document.getElementById('variables');
let cme = CodeMirror(elt => {
  ed.parentNode.replaceChild(elt, ed);
}, {
  value: ed.value,
  mode: 'graphql',
  lineNumbers: true,
});
let cmv = CodeMirror(elt => {
  va.parentNode.replaceChild(elt, va);
}, {
  value: va.value,
  mode: 'json',
  theme: 'default variables',
  lineNumbers: true,
});

document.querySelector('button[type="submit"]').addEventListener('click', ev => {
  ev.preventDefault();
  let form = document.getElementById('query-form');
  let edNode = document.createElement('input');
  edNode.type = 'hidden';
  edNode.name = 'query';
  edNode.value = cme.getValue();
  form.appendChild(edNode);
  let vaNode = document.createElement('input');
  vaNode.type = 'hidden';
  vaNode.name = 'variables';
  vaNode.value = cmv.getValue();
  form.appendChild(vaNode);
  form.submit();
});
</script>
<style>
@media(prefers-color-scheme: dark) {
  details.panel { background: #131618; color: white; }
  .cm-s-default.CodeMirror { background: #131618; color: white; }
  .cm-s-default div.CodeMirror-selected { background: #49483E; }
  .cm-s-default .CodeMirror-line::selection, .cm-s-default .CodeMirror-line > span::selection, .cm-s-default .CodeMirror-line > span > span::selection { background: rgba(73, 72, 62, .99); }
  .cm-s-default .CodeMirror-line::-moz-selection, .cm-s-default .CodeMirror-line > span::-moz-selection, .cm-s-default .CodeMirror-line > span > span::-moz-selection { background: rgba(73, 72, 62, .99); }
  .cm-s-default .CodeMirror-gutters { background: #272822; border-right: 0px; }
  .cm-s-default .CodeMirror-guttermarker { color: white; }
  .cm-s-default .CodeMirror-guttermarker-subtle { color: #d0d0d0; }
  .cm-s-default .CodeMirror-linenumber { color: #d0d0d0; }
  .cm-s-default .CodeMirror-cursor { border-left: 1px solid #f8f8f0; }

  .cm-s-default span.cm-comment { color: #75715e; }
  .cm-s-default span.cm-atom { color: #ae81ff; }
  .cm-s-default span.cm-number { color: #ae81ff; }

  .cm-s-default span.cm-comment.cm-attribute { color: #97b757; }
  .cm-s-default span.cm-comment.cm-def { color: #bc9262; }
  .cm-s-default span.cm-comment.cm-tag { color: #bc6283; }
  .cm-s-default span.cm-comment.cm-type { color: #5998a6; }

  .cm-s-default span.cm-property, .cm-s-default span.cm-attribute { color: #a6e22e; }
  .cm-s-default span.cm-keyword { color: #f92672; }
  .cm-s-default span.cm-builtin { color: #66d9ef; }
  .cm-s-default span.cm-string { color: #e6db74; }

  .cm-s-default span.cm-variable { color: #f8f8f2; }
  .cm-s-default span.cm-variable-2 { color: #9effff; }
  .cm-s-default span.cm-variable-3, .cm-s-default span.cm-type { color: #66d9ef; }
  .cm-s-default span.cm-def { color: #fd971f; }
  .cm-s-default span.cm-bracket { color: #f8f8f2; }
  .cm-s-default span.cm-tag { color: #f92672; }
  .cm-s-default span.cm-header { color: #ae81ff; }
  .cm-s-default span.cm-link { color: #ae81ff; }
  .cm-s-default span.cm-error { background: #f92672; color: #f8f8f0; }

  .cm-s-default .CodeMirror-activeline-background { background: #373831; }
  .cm-s-default .CodeMirror-matchingbracket {
    text-decoration: underline;
    color: white !important;
  }
}
</style>
{% endblock %}