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

.input textarea, .results pre {
  height: 35rem;
}

.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">
      <textarea
        class="form-control"
        rows="25"
        id="editor"
        placeholder="Enter a GraphQL query here"
        name="query">{{query}}</textarea>
      <script>
        /* Reduce effects of FOUC for JS users */
        document.getElementById('editor').style.display = 'none';
      </script>
    </div>
    <div class="col-md-6 results">
      {{results}}
      <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: "#"
  }
});

const el = document.getElementById('editor');
let cm = CodeMirror(elt => {
  el.parentNode.replaceChild(elt, el);
}, {
  value: el.value,
  mode: 'graphql',
  lineNumbers: true,
});

document.querySelector('button[type="submit"]').addEventListener('click', ev => {
  ev.preventDefault();
  let form = document.getElementById('query-form');
  let node = document.createElement('input');
  node.type = 'hidden';
  node.name = 'query';
  node.value = cm.getValue();
  form.appendChild(node);
  form.submit();
});
</script>
<style>
@media(prefers-color-scheme: dark) {
  .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 %}