<!DOCTYPE html>
<!-- vr.html -->
    <head>
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=no" />
    <meta charset="utf-8">

    <!-- The Viewer CSS -->
    <link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.min.css" type="text/css">

    <!-- Developer CSS -->
    <style>
        body {
            margin: 0;
        }
        #MyViewerDiv {
            width: 100%;
            height: 100%;
            margin: 0;
            background-color: #F0F8FF;
        }
    </style>
    {{ headContent() }}
</head>
<body>

    <!-- The Viewer will be instantiated here -->
    <div id="MyViewerDiv"></div>

    <!-- The Viewer JS -->
    <script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.min.js"></script>

    <!-- Developer JS -->
    <script>
        var viewer;
        var options = {
            env: 'AutodeskProduction',
            api: 'derivativeV2',
            getAccessToken: function(onGetAccessToken) {
                //
                // TODO: Replace static access token string below with call to fetch new token from your backend
                // Both values are provided by the APS Authentication (OAuth) API.
                //
                var accessToken = {{ accessToken }};
                var expireTimeSeconds = 60 * 30;
                onGetAccessToken(accessToken, expireTimeSeconds);
            }
        };
        var documentId = {{ documentID }};

        Autodesk.Viewing.Initializer(options, function onInitialized() {
            var container = document.getElementById('MyViewerDiv');
            viewer = new Autodesk.Viewing.GuiViewer3D(container, { extensions: ['Autodesk.Viewing.WebVR'] });
            viewer.start();
            Autodesk.Viewing.Document.load(documentId, onDocumentLoadSuccess, onDocumentLoadFailure);
        });

        function onDocumentLoadSuccess(doc) {
            var viewables = doc.getRoot().getDefaultGeometry();
            viewer.loadDocumentNode(doc, viewables).then(function() {
                console.log('onItemLoadSuccess()!');
            });
        }

        function onDocumentLoadFailure(viewerErrorCode) {
            console.error('onDocumentLoadFailure() - errorCode:' + viewerErrorCode);
        }

        function onItemLoadFail(errorCode) {
            console.error('onItemLoadFail() - errorCode:' + errorCode);
        }

    </script>
  </body>
</html>
