<!DOCTYPE html>
<!--
# Copyright (C) DATADVANCE, 2010-2020
#
# Permission is hereby granted, free of charge, to any person obtaining
# a copy of this software and associated documentation files (the
# "Software"), to deal in the Software without restriction, including
# without limitation the rights to use, copy, modify, merge, publish,
# distribute, sublicense, and/or sell copies of the Software, and to
# permit persons to whom the Software is furnished to do so, subject to
# the following conditions:
#
# The above copyright notice and this permission notice shall be
# included in all copies or substantial portions of the Software.
#
# THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
# EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
# MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
# IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
# CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
# TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
# SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-->
<html>

<head>
    <style>
        html,
        body {
            height: 100%;
            margin: 0;
            overflow: hidden;
            width: 100%;
        }
    </style>
    <link href="//cdn.jsdelivr.net/npm/graphiql@0.11.11/graphiql.css" rel="stylesheet" />
    <script src="//cdn.jsdelivr.net/react/15.4.2/react.min.js"></script>
    <script src="//cdn.jsdelivr.net/react/15.4.2/react-dom.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/graphiql@0.11.11/graphiql.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/graphql-transport-ws@0.8.3/browser/client.js"></script>
</head>

<body>
    <script>
        // Setup subscription client.
        const GRAPHQL_ENDPOINT =
            (location.protocol === 'https' ? 'wss' : 'ws')
            + '://' + location.host + "{% url 'graphql' %}";
        let subClient = new window.SubscriptionsTransportWs.SubscriptionClient(
            GRAPHQL_ENDPOINT,
            { reconnect: true }
        );
        subFetcher = subClient.request.bind(subClient)

        // Render <GraphiQL /> into the body.
        ReactDOM.render(
            React.createElement(GraphiQL, {
                fetcher: subFetcher, //graphQLFetcher
            }),
            document.body
        );
    </script>
</body>

</html>