<!DOCTYPE html>
<html lang="en">
<head>
    <title>NLDB</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        th {
            text-align: left;
            font-weight: 500;
        }
        table {
            border-spacing: 0 0.1em;
        }
        td {
            padding-top: 0px;
        }
        .light-green {
            color: aquamarine;
        }
    </style>
</head>

<body class="w-100 avenir black-80 bg-pink">
    <div id="app" class="mw7 center">
        <form @submit="formSubmit" class="pa2 black-80">
            <div>
                <h1 class="f-subheadline-ns f1 lh-solid mb4 near-black"><span class="light-green">Co</span>Da</h1>
                <label for="question" class="f4 db mb3">Your question:</label>
                <input id="question" class="input-reset f4 ba b--black-20 pa2 mb1 db w-100 br2" type="text"
                    v-model.lazy="question">
                <input id="submit" class="dim mt3 pointer ph3 pv2 input-reset ba b--black br2 bg-transparent f4 mb3"
                    type="submit" :value="button_text">
                <div class="mt0 f4" v-html="answer"></div>
                <div class="mt3 mb2" v-if="answer.length">
                    <a class="light-green dim" href="#" @click="toggleText()">show workings</a>
                </div>
                <div id="context" v-if="sql.length" v-show="display"
                    class="mv3 f5 bg-light-pink pt2 ph2 pb1 br2 lh-copy">
                    <span class="near-white">Query:</span>
                    <div v-html="sql" class="mv2"></div>
                    <span class="near-white">Results:</span>
                    <div v-html="results" class="mv2"></div>
                    <span class="near-white mt2">Cost:</span> ${{ cost }} ({{ tokens }} tokens)<br />
                    <span class="near-white mt2">Timing:</span>
                    building query: {{ parseFloat(timings[0].toFixed(3)) }},
                    running query: {{ parseFloat(timings[1].toFixed(3)) }},
                    explaining results: {{ parseFloat(timings[2].toFixed(3)) }}
                </div>
            </div>
        </form>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                question: '',
                answer: '',
                results: '',
                tokens: 0,
                cost: 0,
                timings: [],
                sql: '',
                button_text: 'Tell me',
                display: false,
            },
            methods: {
                formSubmit(e) {
                    e.preventDefault();
                    app.button_text = "Working it out...";
                    app.answer = "";
                    app.sql = "";
                    api_url = "/api/ask?q=" + app.question;
                    fetch(api_url)
                        .then(async function (response) {
                            let json = await response.json();
                            let resp = json['response'];
                            app.answer = resp['answer'];
                            app.results = resp['results'];
                            app.tokens = resp['tokens'];
                            app.sql = resp['sql'];
                            app.cost = parseFloat(resp['cost'].toFixed(4))
                            app.timings = resp['timings'];
                            app.button_text = "Tell me";
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                },
                toggleText() {
                    this.display = !this.display;
                }
            }
        })
    </script>
</body>
</html>