<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>GraphiQL</title>
        <meta name="robots" content="noindex" />
        <style>
            html, body, #graphiql {
                height: 100%;
                margin: 0;
                overflow: hidden;
                width: 100%;
            }
        </style>
        <link href="https://unpkg.com/graphiql@{{GRAPHIQL_VERSION}}/graphiql.min.css" rel="stylesheet" crossorigin="anonymous" />
        <script src="https://unpkg.com/whatwg-fetch@3.6.2/dist/fetch.umd.js" crossorigin="anonymous"></script>
        <script src="https://unpkg.com/react@{{REACT_VERSION}}/umd/react.production.min.js" crossorigin="anonymous"></script>
        <script src="https://unpkg.com/react-dom@{{REACT_VERSION}}/umd/react-dom.production.min.js" crossorigin="anonymous"></script>
        <script src="https://unpkg.com/graphiql@{{GRAPHIQL_VERSION}}/graphiql.min.js" crossorigin="anonymous"></script>
        {% if supports_subscriptions %}
            <script src="https://unpkg.com/subscriptions-transport-ws@{{SUBSCRIPTIONS_TRANSPORT_VERSION}}/browser/client.js" crossorigin="anonymous"></script>
            <script src="https://unpkg.com/graphiql-subscriptions-fetcher@0.0.2/browser/client.js" crossorigin="anonymous"></script>
        {% endif %}
    </head>
    <body>
        <div id="graphiql"></div>
        <script>
            // Collect the URL parameters
            var parameters = {};
            window.location.search.substr(1).split('&').forEach(function (entry) {
                var eq = entry.indexOf('=');
                if (eq >= 0) {
                    parameters[decodeURIComponent(entry.slice(0, eq))] =
                        decodeURIComponent(entry.slice(eq + 1));
                }
            });
            // Produce a Location query string from a parameter object.
            function locationQuery(params, location) {
                return (location ? location: '') + '?' + Object.keys(params).map(function (key) {
                    return encodeURIComponent(key) + '=' +
                    encodeURIComponent(params[key]);
                }).join('&');
            }
            // Derive a fetch URL from the current URL, sans the GraphQL parameters.
            var graphqlParamNames = {
                query: true,
                variables: true,
                operationName: true
            };
            var otherParams = {};
            for (var k in parameters) {
                if (parameters.hasOwnProperty(k) && graphqlParamNames[k] !== true) {
                    otherParams[k] = parameters[k];
                }
            }
            var fetcher;
            var supports_subscriptions = {{ supports_subscriptions|lower }};
            if (supports_subscriptions) {
                var subscriptionsClient = new window.SubscriptionsTransportWs.SubscriptionClient('{{subscriptionsEndpoint}}', {
                    reconnect: true
                });
                fetcher = window.GraphiQLSubscriptionsFetcher.graphQLFetcher(subscriptionsClient, graphQLFetcher);
            } else {
                fetcher = graphQLFetcher;
            }
            // We don't use safe-serialize for location, because it's not client input.
            var fetchURL = locationQuery(otherParams, '{{endpointURL}}');
            // Defines a GraphQL fetcher using the fetch API.
            function graphQLFetcher(graphQLParams) {
                return fetch(fetchURL, {
                    method: 'post',
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(graphQLParams),
                    credentials: 'include',
                }).then(function (response) {
                    return response.text();
                }).then(function (responseBody) {
                    try {
                        return JSON.parse(responseBody);
                    } catch (error) {
                        return responseBody;
                    }
                });
            }
            // When the query and variables string is edited, update the URL bar so
            // that it can be easily shared.
            function onEditQuery(newQuery) {
                parameters.query = newQuery;
                updateURL();
            }
            function onEditVariables(newVariables) {
                parameters.variables = newVariables;
                updateURL();
            }
            function onEditOperationName(newOperationName) {
                parameters.operationName = newOperationName;
                updateURL();
            }
            function updateURL() {
                history.replaceState(null, null, locationQuery(parameters) + window.location.hash);
            }
            // Render <GraphiQL /> into the body.
            ReactDOM.render(
                React.createElement(GraphiQL, {
                    fetcher: fetcher,
                    onEditQuery: onEditQuery,
                    onEditVariables: onEditVariables,
                    onEditOperationName: onEditOperationName,
                }),
                document.getElementById('graphiql')
            );
        </script>
    </body>
</html>
