<!--
 *  Copyright (c) 2021 GraphQL Contributors
 *  All rights reserved.
 *
 *  This source code is licensed under the license found in the
 *  LICENSE file in the root directory of this source tree.
-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
    <title>{{ title }}</title>
    <style>
      body {
        height: 100%;
        margin: 0;
        width: 100%;
        overflow: hidden;
      }

      #graphiql {
        height: 100vh;
      }

      #graphiql-loading {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        color: #545454;
        font-size: 1.5em;
        font-family: sans-serif;
        font-weight: bold;
      }
    </style>
    <link rel="stylesheet" href="https://unpkg.com/graphiql@3.3.2/graphiql.min.css" integrity="sha384-PNLpacmXJKoE7OSGX9OropkrZb2wdZx12taF1om8oQKkwJmzbqWEW9rKK8WT7IZ1" crossorigin />
    {% if enable_explorer_plugin %}
    <link rel="stylesheet" href="https://unpkg.com/@graphiql/plugin-explorer@3.1.0/dist/style.css" integrity="sha384-YN9MumWidbWKuNj8VfH5ggrFvm9YqAoIOMnKYpeGL3dr7Eg1qnQ+SAqSthdNZCjz" crossorigin />
    {% endif %}
  </head>

  <body>
    <div id="graphiql">
      <div id="graphiql-loading">Loading {{ title }}...</div>
    </div>

    <script
      crossorigin
      integrity="sha384-7Er69WnAl0+tY5MWEvnQzWHeDFjgHSnlQfDDeWUvv8qlRXtzaF/pNo18Q2aoZNiO"
      src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"
    ></script>
    <script
      crossorigin
      integrity="sha384-vj2XpC1SOa8PHrb0YlBqKN7CQzJYO72jz4CkDQ+ePL1pwOV4+dn05rPrbLGUuvCv"
      src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"
    ></script>

    <script
      crossorigin
      integrity="sha384-/jufPMBJpSyP7vyv2ht40LRJmcmVS5SWfhAYFyfsumlltrrnl/XjZljb5+cxgZUM"
      src="https://unpkg.com/graphiql@3.3.2/graphiql.min.js"
    ></script>

    {% if enable_explorer_plugin %}
    <script
      crossorigin
      integrity="sha384-vzwQ46f1E2uHaJFa97UTJK8OjEVtvAg+E0Rf9p+5G34Q4ZfUjYIqy7ZV7SBZE2Bz"
      src="https://unpkg.com/@graphiql/plugin-explorer@3.1.0/dist/index.umd.js"
    ></script>
    {% endif %}

    <script>
      var fetcher = GraphiQL.createFetcher({
        url: window.location.href,
        {% if subscription_url %}
        subscriptionUrl: "{{ subscription_url }}",
        {% else %}
        subscriptionUrl: (window.location.protocol === "https:" ? "wss" : "ws") + "://" + window.location.host + window.location.pathname,
        {% endif %}
      });

      function AriadneGraphiQL() {
        var [query, setQuery] = React.useState(
          '{% raw default_query %}',
        );
        {% if enable_explorer_plugin %}
        var explorerPlugin = GraphiQLPluginExplorer.explorerPlugin();
        {% endif %}
        return React.createElement(GraphiQL, {
          fetcher: fetcher,
          defaultEditorToolsVisibility: true,
          {% if enable_explorer_plugin %}
          plugins: [explorerPlugin],
          {% endif %}
          query: query,
          onEditQuery: setQuery,
        });
      }

      ReactDOM.render(
        React.createElement(AriadneGraphiQL),
        document.getElementById('graphiql'),
      );
    </script>
  </body>
</html>
