<!DOCTYPE html>
<html>

<head>
    <title>Editor Demo</title>
    <meta charset="utf-8" />

    <style>
        #editor {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }

        #viewer {
            position: absolute;
            left: 0;
            top: 0;
            width: 40%;
            height: 40%;
        }

        #chunks {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 40%;
            height: 60%;
        }

        #data {
            position: absolute;
            right: 0;
            top: 0;
            width: 60%;
            height: 100%;
        }

        .warning {
            background-color: goldenrod;
        }

        .severe {
            background-color: cadetblue;
        }

        .error {
            background-color: tomato;
        }

        li {
            border: 1px solid;
            border-color: black;
            margin: 1px;
            padding: 1px;
        }
    </style>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <div id="editor" v-show="model">
            <canvas id="viewer"></canvas>

            <div id="chunks" v-if="model">
                <table>
                    <tr>
                        <td><button @click="chunk = 'model'">Model information</button></td>
                    </tr>
                    <tr>
                        <td><button @click="chunk = 'sequences'">Sequences ({{ model.sequences.length }})</button></td>
                    </tr>
                    <tr>
                        <td><button @click="chunk = 'globalSequences'">Global sequences
                                ({{ model.globalSequences.length }})</button></td>
                    </tr>
                    <tr>
                        <td><button @click="chunk = 'materials'">Materials ({{ model.materials.length }})</button></td>
                    </tr>
                    <tr>
                        <td><button @click="chunk = 'textures'">Textures ({{ model.textures.length }})</button></td>
                    </tr>
                    <tr>
                        <td><button @click="chunk = 'textureAnimations'">Texture animations
                                ({{ model.textureAnimations.length }})</button></td>
                    </tr>
                    <tr>
                        <td><button @click="chunk = 'geosets'">Geosets ({{ model.geosets.length }})</button></td>
                    </tr>
                    <tr>
                        <td><button @click="chunk = 'geosetAnimations'">Geoset animations
                                ({{ model.geosetAnimations.length }})</button></td>
                    </tr>
                    <tr>
                        <td><button @click="chunk = 'bones'">Bones ({{ model.bones.length }})</button></td>
                    </tr>
                </table>
            </div>

            <div id="data" v-if="model">
                <model v-show="chunk === 'model'" :model="model" :model="model"></model>
                <sequences v-show="chunk === 'sequences'" :model="model" :objects="model.sequences"></sequences>
                <global-sequences v-show="chunk === 'globalSequences'" :model="model" :objects="model.globalSequences">
                </global-sequences>
                <materials v-show="chunk === 'materials'" :model="model" :objects="model.materials"></materials>
                <textures v-show="chunk === 'textures'" :model="model" :objects="model.textures"></textures>
            </div>
        </div>
        <div v-show="!model">{{ loadMessage }}</div>
    </div>


    <script src="../../dist/viewer.min.js"></script>
    <script src="../thirdparty/filesaver.js"></script>
    <script src="../camera.js"></script>
    <script src="index.js"></script>
</body>

</html>