!!! 5
%html{ lang: html_lang, class: yield(:root_class) }
  %head
    %meta{ "http-equiv": "Content-Type", content: "text/html; charset=UTF-8" }
    %meta{ "http-equiv": "X-UA-Compatible", content: "IE=edge" }
    %meta{ name: "viewport", content: "width=device-width, initial-scale=1" }
    = csrf_meta_tags

    %title
      = content_for?(:title) ? "#{yield(:title)} · #{APPLICATION_NAME}" : APPLICATION_NAME

    = favicon_link_tag(image_url("#{FAVICON_16PX_SRC}"), type: "image/png", sizes: "16x16")
    = favicon_link_tag(image_url("#{FAVICON_32PX_SRC}"), type: "image/png", sizes: "32x32")
    = favicon_link_tag(image_url("#{FAVICON_96PX_SRC}"), type: "image/png", sizes: "96x96")

    %link{ rel: "stylesheet", href: "https://unpkg.com/graphiql/graphiql.min.css" }
    %link{ rel: "stylesheet", href: "https://unpkg.com/@graphiql/plugin-explorer/dist/style.css" }
    %script{ crossorigin: true, src: "https://unpkg.com/react@17/umd/react.development.js" }
    %script{ crossorigin: true, src: "https://unpkg.com/react-dom@17/umd/react-dom.development.js" }
    %script{ crossorigin: true, src: "https://unpkg.com/graphiql/graphiql.min.js" }
    %script{ crossorigin: true, src: "https://unpkg.com/@graphiql/plugin-explorer/dist/graphiql-plugin-explorer.umd.js" }

    = Gon::Base.render_data(camel_case: true, init: true, nonce:  request.content_security_policy_nonce)

    :css
      body {
        height: 100%;
        margin: 0;
        width: 100%;
        overflow: hidden;
      }

      #graphiql {
        height: 100vh;
      }

  %body
    #graphiql
      Loading...

    :javascript
      function csrfToken() {
        var meta = document.querySelector('meta[name=csrf-token]');
        return meta && meta.content;
      }
      var defaultQuery = window.gon.defaultQuery;
      var defaultVariables = window.gon.defaultVariables;

      var fetcher = GraphiQL.createFetcher({
        url: '/api/v2/graphql',
        headers: { 'x-csrf-token': csrfToken() }
      });

      function GraphiQLWithExplorer() {
        var [query, setQuery] = React.useState(defaultQuery);
        var explorerPlugin = GraphiQLPluginExplorer.useExplorerPlugin({
          query: query,
          onEdit: setQuery,
        });
        return React.createElement(GraphiQL, {
          fetcher: fetcher,
          defaultEditorToolsVisibility: true,
          plugins: [explorerPlugin],
          query: query,
          variables: defaultVariables,
          onEditQuery: setQuery,
          defaultEditorToolsVisibility: true,
          isHeadersEditorEnabled: false
        });
      }

      ReactDOM.render(
        React.createElement(GraphiQLWithExplorer),
        document.getElementById('graphiql'),
      );