<!DOCTYPE html>
<html>

<head>
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.9.95/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/vuetify@2.3.19/dist/vuetify.min.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">

    <style>
        tr {
            padding: 4px;
        }

        td {
            padding: 4px;
        }

        th {
            padding: 4px;
        }

        .download {
            background-color: #999999;
            width: 60px;
            height: 60px;
            border: 3px solid;
            border-radius: 10px;
            border-color: #BBBBBB;
            position: fixed;
            top: 50%;
            right: 50%;
            -webkit-animation: rotation 1s infinite linear;
            z-index: 9999;
        }

        @-webkit-keyframes rotation {
            from {
                -webkit-transform: rotate(0deg);
            }

            to {
                -webkit-transform: rotate(359deg);
            }
        }
    </style>

</head>

<body>
    <div id="app" color="indigo">
        <v-app>
            <v-app-bar dense app>
                <!--
                <v-toolbar-title>LiQuer</v-toolbar-title>
                <v-toolbar-items>
                    <v-btn v-for="(item, index) in menu" :key="index" :to="item.link" text>{{ item.title }}</v-btn>
                </v-toolbar-items>
                -->
                <v-menu offset-y v-for="(item, index) in menu" :key="index">
                    <template v-slot:activator="{ on }">
                        <v-btn text v-on="on">{{item.title}}</v-btn>
                    </template>
                    <v-list>
                        <v-list-item v-for="(subitem, subindex) in item.items" :key="subindex"
                            @click="goto(subitem.link)">
                            <v-list-item-title>{{ subitem.title }}</v-list-item-title>
                        </v-list-item>
                    </v-list>
                </v-menu>
                <v-spacer></v-spacer>
                <v-progress-circular v-if="status=='LOADING'" indeterminate color="primary"></v-progress-circular>
                <v-toolbar-items>
                    <v-btn :href="xlsx_link" color="green" v-if="mode=='dataframe'">xlsx</v-btn>
                    <v-btn :href="csv_link" color="orange" v-if="mode=='dataframe'">csv</v-btn>
                    <v-btn :href="external_link" color="orange" v-if="mode=='iframe'">link</v-btn>
                    <v-btn :href="external_link" color="orange" v-if="mode=='image'">image</v-btn>
                </v-toolbar-items>
                <v-menu offset-y>
                    <template v-slot:activator="{ on }">
                        <v-btn icon v-on="on">
                            <v-icon>mdi-dots-vertical</v-icon>
                        </v-btn>
                    </template>
                    <v-list>
                        <v-list-item @click="mode='commands'" />
                        <v-list-item-icon>
                            <v-icon>mdi-clipboard-list</v-icon>
                        </v-list-item-icon>
                        <v-list-item-title>Commands</v-list-item-title>
                        </v-list-item>
                        <v-list-item @click="mode='inspect'" />
                        <v-list-item-icon>
                            <v-icon>mdi-information</v-icon>
                        </v-list-item-icon>
                        <v-list-item-title>Inspect</v-list-item-title>
                        </v-list-item>
                        <v-list-item @click="query_status_mode()" />
                        <v-list-item-icon>
                            <v-icon>mdi-monitor-dashboard</v-icon>
                        </v-list-item-icon>
                        <v-list-item-title>Running queries</v-list-item-title>
                        </v-list-item>

                        <v-list-item @click="goto(query_basis+'/gui')" />
                        <v-list-item-icon>
                            <v-icon>mdi-pencil</v-icon>
                        </v-list-item-icon>
                        <v-list-item-title>Edit</v-list-item-title>
                        </v-list-item>
                        <v-list-item v-for="(item, i) in context_menu" :key="i" @click="goto_rel(item.link)" />
                        <v-list-item-title>{{ item.title }}</v-list-item-title>
                        </v-list-item>
                        <v-divider></v-divider>
                        <v-list-item @click="clean_cache()" />
                        <v-list-item-icon>
                            <v-icon color="red">mdi-delete</v-icon>
                        </v-list-item-icon>
                        <v-list-item-title>Clean cache</v-list-item-title>
                        </v-list-item>
                    </v-list>
                </v-menu>
            </v-app-bar>
            <v-main>
                <!--div class="download" v-if="status=='LOADING'"></div-->
                <span v-html="html"></span>

                <v-container class="fill-height" fluid v-if="waiting_mode">
                    <v-row>
                        <v-col>
                            <h4>{{metadata.query}}</h4>
                            <v-chip :color="data_status_color(metadata.status)">{{metadata.status}}</v-chip>
                            <v-chip>{{metadata.updated}}</v-chip>
                        </v-col>
                    </v-row>
                    <v-row>
                        <v-col>
                            <div>{{metadata.message}}</div>
                        </v-col>
                    </v-row>
                    <v-row>
                        <v-col>
                            <p v-for="p in metadata.progress_indicators">
                                <v-progress-linear v-if="p.total_steps != null" v-model="p.step*100/p.total_steps"
                                    color="primary" height="25">
                                    <span>{{ p.message }}</span>
                                </v-progress-linear>
                                <v-progress-circular v-if="p.total_steps == null" indeterminate color="primary">
                                </v-progress-circular>
                                <span v-if="p.total_steps == null">{{ p.message }}</span>
                            </p>
                            <p v-for="p in metadata.child_progress_indicators">
                                <v-progress-linear v-if="p.total_steps != null" v-model="p.step*100/p.total_steps"
                                    color="secondary" height="25">
                                    <span>{{ p.message }}</span>
                                </v-progress-linear>
                                <v-progress-circular v-if="p.total_steps == null" indeterminate color="secondary">
                                </v-progress-circular>
                                <span v-if="p.total_steps == null">{{ p.message }}</span>
                            </p>
                        </v-col>
                    </v-row>
                    <v-row>
                        <v-col>
                            <span v-html="metadata.html_preview"></span>
                        </v-col>
                    </v-row>
                    <v-row>
                        <v-col>
                            <div v-for="(xitem, index) in metadata_log_slice">
                                <div v-if="xitem.kind=='info'">
                                    <v-icon color="blue">mdi-information-outline</v-icon>
                                    {{xitem.message}}
                                </div>
                                <div v-if="xitem.kind=='error'">
                                    <v-icon color="red">mdi-alert-circle</v-icon>
                                    {{xitem.message}}
                                    <pre>{{xitem.traceback}}</pre>
                                </div>
                                <div v-if="xitem.kind=='warning'">
                                    <v-icon color="orange">mdi-alert</v-icon>{{item.message}}
                                </div>
                                <div v-if="xitem.kind=='debug'">
                                    <v-icon color="yellow">mdi-bug</v-icon>{{xitem.message}}
                                </div>
                                <div v-if="xitem.kind=='command'">
                                    </template>
                                    <v-icon color="gray">mdi-label</v-icon>
                                    <span>{{xitem.command_number}}</span>
                                    <v-chip label outline v-for="cmd in xitem.qv">{{cmd}}
                                    </v-chip>
                                </div>
                            </div>
                        </v-col>
                        <v-col>
                            <div v-for="(xitem, index) in metadata.child_log">
                                <div v-if="xitem.kind=='info'">
                                    <v-icon color="blue">mdi-information-outline</v-icon>
                                    {{xitem.message}}
                                </div>
                                <div v-if="xitem.kind=='error'">
                                    <v-icon color="red">mdi-alert-circle</v-icon>
                                    {{xitem.message}}
                                    <pre>{{xitem.traceback}}</pre>
                                </div>
                                <div v-if="xitem.kind=='warning'">
                                    <v-icon color="orange">mdi-alert</v-icon>{{item.message}}
                                </div>
                                <div v-if="xitem.kind=='debug'">
                                    <v-icon color="yellow">mdi-bug</v-icon>{{xitem.message}}
                                </div>
                                <div v-if="xitem.kind=='command'">
                                    </template>
                                    <v-icon color="gray">mdi-label</v-icon>
                                    <span>{{xitem.command_number}}</span>
                                    <v-chip label outline v-for="cmd in xitem.qv">{{cmd}}
                                    </v-chip>
                                </div>
                            </div>
                        </v-col>
                    </v-row>
                </v-container>

                <v-container class="fill-height" fluid v-if="mode==''">

                </v-container>

                <v-container class="fill-height" fluid v-if="mode=='queries_status'">
                    <v-row>
                        <h1>Running queries</h1>
                    </v-row>
                    <v-row>
                        <v-col>
                            <v-card>
                                <v-container>
                                    <template v-for="item in queries_status">
                                        <v-row>
                                            <v-col>
                                                <v-tooltip top>
                                                    <template v-slot:activator="{ on, attrs }">
                                                        <span
                                                          v-bind="attrs"
                                                          v-on="on"
                                                        >{{item.short}}</span>
                                                      </template>
                                                    <span>{{item.query}}</span>
                                                  </v-tooltip>
                                            </v-col>
                                            <v-col>
                                                <v-chip :color="data_status_color(item.status)">{{item.status}}</v-chip>
                                            </v-col>
                                            <v-col>
                                                <v-btn @click="inspect_query(item.query)" fab small><v-icon>mdi-information</v-icon></v-btn>
                                                <v-btn @click="view_query(item.query)" fab small><v-icon>mdi-monitor-dashboard</v-icon></v-btn>
                                                <v-btn @click="remove_query(item.query)" fab small><v-icon>mdi-trash-can</v-icon></v-btn>
                                            </v-col>
                                            <v-col>
                                                <v-chip>{{item.updated}}</v-chip>
                                            </v-col>
                                            <v-col>{{item.message}}</v-col>
                                            <v-col>
                                                <template v-for="p in item.progress">
                                                <v-progress-linear v-if="p.total_steps != null"
                                                    v-model="p.step*100/p.total_steps" color="primary" height="12">
                                                    <span style="font-size: 8pt;">{{ p.message }}</span>
                                                </v-progress-linear>
                                                <v-progress-circular v-if="p.total_steps == null" indeterminate
                                                    color="primary">
                                                </v-progress-circular>
                                                <span v-if="p.total_steps == null">{{ p.message }}</span>
                                                </template>
                                            </v-col>
                                        </v-row>
                                    </template>
                                </v-container>
                            </v-card>
                        </v-col>
                    </v-row>
                </v-container>

                <v-container class="fill-height" fluid v-if="mode=='inspect'">
                    <v-row>
                        <v-card width="100%">
                            <v-toolbar color="secondary" dark>
                                <v-toolbar-title>Execution</v-toolbar-title>
                            </v-toolbar>
                            <table>
                                <tr>
                                    <th>
                                        Query
                                    </th>
                                    <td>{{state.query}}</td>
                                </tr>
                                <tr>
                                    <th>
                                        Parent
                                    </th>
                                    <td>{{state.parent_query}}</td>
                                </tr>
                                <tr>
                                    <th v-if="state.is_error">
                                        <v-chip color="red">Error</v-chip>
                                    </th>
                                    <th v-else>
                                        <v-chip color="green">Ok</v-chip>
                                    </th>
                                    <td>{{state.message}}</td>
                                </tr>
                                <tr>
                                    <th>Filename</th>
                                    <td>{{state.filename}} <a :href="state.url">(open)</a>
                                        <v-chip>{{state.extension}}</v-chip>
                                        <v-chip>{{state.mime}}</v-chip>
                                    </td>
                                </tr>
                                <tr>
                                    <th>Created</th>
                                    <td>{{state.created}}</td>
                                </tr>
                                <tr>
                                    <th>Sources</th>
                                    <td>
                                        <ul>
                                            <li v-for="url in state.sources"><a :href="url">{{url}}</a></li>
                                        </ul>
                                    </td>
                                </tr>
                                <tr>
                                    <th>Log</th>
                                    <td>
                                        <ul>
                                            <li v-for="item in state.log">
                                                <div v-if="item.kind=='error'">
                                                    <v-icon color="red">mdi-alert-circle</v-icon>
                                                    {{item.message}}
                                                    <pre>{{item.traceback}}</pre>
                                                </div>
                                                <div v-if="item.kind=='warning'">
                                                    <v-icon color="orange">mdi-alert</v-icon>{{item.message}}
                                                </div>
                                                <div v-if="item.kind=='info'">
                                                    <v-icon color="blue">mdi-information-outline</v-icon>
                                                    {{item.message}}
                                                </div>
                                                <div v-if="item.kind=='debug'">
                                                    <v-icon color="yellow">mdi-bug</v-icon>{{item.message}}
                                                </div>
                                                <div v-if="item.kind=='command'">
                                                    </template>
                                                    <v-icon color="gray">mdi-label</v-icon>
                                                    <span>{{item.command_number}}</span>
                                                    <v-chip label outline v-for="cmd in item.qv">{{cmd}}
                                                    </v-chip>
                                                </div>
                                            </li>
                                        </ul>
                                    </td>
                                </tr>
                            </table>
                        </v-card>
                    </v-row>
                    <v-row>
                        <v-card width="100%">
                            <v-toolbar color="secondary" dark>
                                <v-toolbar-title>References</v-toolbar-title>
                            </v-toolbar>
                            <h4 v-if="state.argument_queries.length">Argument queries</h4>
                            <ul>
                                <li v-for="q in state.argument_queries">
                                    <a :href="url_prefix+q.query">{{q.description}}</a>
                                </li>
                            </ul>
                            <h4>Direct sub-queries</h4>
                            <ul>
                                <li v-for="q in state.direct_subqueries">
                                    <a :href="url_prefix+q.query">{{q.description}}</a>
                                </li>
                            </ul>
                        </v-card>
                    </v-row>
                    <v-row>
                        <v-card width="100%">
                            <v-toolbar color="secondary" dark>
                                <v-toolbar-title>Command Sequence</v-toolbar-title>
                            </v-toolbar>
                            <table>
                                <tr>
                                    <th>Command</th>
                                    <th>Namespace</th>
                                    <th>Parameters</th>
                                </tr>
                                <tr v-for="c in state.extended_commands">
                                    <td><a :href="'#ns-meta/help-'+c.command_name+'-'+c.ns">{{c.command_name}}</a>
                                    </td>
                                    <td>{{c.ns}}</td>
                                    <td>
                                        <ul>
                                            <li v-for="arg in c.arguments">
                                                <span>{{safearg(arg).label}}:</span>
                                                <b>{{safearg(arg).value}}</b>
                                                <em>({{safearg(arg).type}})</em>
                                            </li>
                                        </ul>
                                    </td>
                                </tr>
                            </table>
                        </v-card>
                    </v-row>
                    <v-row>
                        <v-card width="100%">
                            <v-toolbar color="secondary" dark>
                                <v-toolbar-title>Attributes</v-toolbar-title>
                            </v-toolbar>
                            <table>
                                <tr>
                                    <th>Attribute</th>
                                    <th>Value</th>
                                </tr>
                                <tr v-for="(value,name) in state.attributes">
                                    <th>{{name}}</th>
                                    <td>{{value}}</td>
                                </tr>
                            </table>
                        </v-card>
                    </v-row>
                    <v-row>
                        <v-card width="100%">
                            <v-toolbar color="secondary" dark>
                                <v-toolbar-title>State Variables</v-toolbar-title>
                            </v-toolbar>
                            <table>
                                <tr>
                                    <th>Variable</th>
                                    <th>Value</th>
                                </tr>
                                <tr v-for="(value,name) in state.vars">
                                    <th>{{name}}</th>
                                    <td>{{value}}</td>
                                </tr>
                            </table>
                        </v-card>
                    </v-row>
                </v-container>
                <v-container class="fill-height" fluid v-if="mode=='iframe'">
                    <iframe width="100%" height="100%" :src="external_link" frameBorder="0"></iframe>
                </v-container>
                <v-container class="fill-height" fluid v-if="mode=='image'">
                    <img :src="external_link" aspect-ratio="1"></img>
                </v-container>
                <v-container class="fill-height" fluid v-if="mode=='dataframe'">
                    <v-layout row wrap>
                        <v-flex>Pandas version: {{data.schema.pandas_version}}</v-flex>
                        <v-flex xs12 v-if="data!=null">
                            <v-data-table :headers="dataframe_headers" :items="dataframe_rows" class="elevation-1">
                                <!--                                <template v-slot:items="props">
                                    <td class="text-xs-right" v-for="i in commands_headers">{{ props.item[i.value] }}
                                    </td>
                                </template>
                                -->
                            </v-data-table>
                        </v-flex>
                    </v-layout>
                </v-container>
                </v-content>
                <v-container class="fill-height" v-if="mode=='commands'">
                    <v-card v-if="commands!=null">
                        <v-card-title>
                            List of commands
                            <v-spacer></v-spacer>
                            <v-text-field v-model="search" append-icon="mdi-magnify" label="Search" single-line
                                hide-details>
                            </v-text-field>
                        </v-card-title>

                        <v-data-table :headers="commands_headers" :items="commands_rows" :search="search"
                            class="elevation-1">
                            <template v-slot:item.name="{ item }">
                                <a :href="'#ns-meta/help-'+item.name+'-'+item.ns">{{item.name}}</a>
                            </template>
                            <template v-slot:item.example_link="{ item }">
                                <a v-if="item.example_link" :href="'#'+item.example_link">{{item.example_link}}</a>
                            </template>
                            <template v-slot:item.doc="{ item }">
                                {{item.doc.split('\n')[0]}}
                            </template>
                        </v-data-table>
                    </v-card>
                </v-container>
            </v-main>
            <v-footer padless>
                <v-chip :color="status_color">{{status}}</v-chip>&nbsp;&nbsp;<span>{{message}}</span>
                <v-spacer></v-spacer>
                <v-chip>{{mode}}</v-chip>&nbsp;
                <a href="https://orest-d.github.io/liquer/">LiQuer</a>,&nbsp;2019
            </v-footer>
        </v-app>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuetify@2.3.19/dist/vuetify.min.js"></script>
    <script src="liquer.js"></script>
</body>

</html>