<!DOCTYPE html>

<html lang="en">
<head>
    <title>Global Benchmark Database</title>
    {% include "header_content.html" %}
</head>
<body>
<div class="position-relative" id="app">
    <b-modal ref="error-modal" hide-footer title="Something went wrong!">
        <div class="d-block text-center">
            <h3>We're sorry ...</h3>
        </div>
        <p>
            ...please check if the attribute in the query exists in the listed attributes below the query input
            field and contact the administration for further troubleshooting.
        </p>
        <b-button class="mt-3" variant="outline-danger" @click="hideErrorModal">Close</b-button>
    </b-modal>
    <b-container id="input-form">
        <b-container>
            <b-img center src="{{ url_for('static', filename='resources/gbd_logo_small.png') }}" fluid
                   alt="GBD-Logo"></b-img>
        </b-container>
        <b-container>
            <footer>
                {% include "footer_content.html" %}
            </footer>
        </b-container>
        {% raw %}
        <b-container>
            <div style="margin-top: 10px">
                <b-form id="gbdForm">
                    <b-form-group>
                        <b-input-group>
                            <b-form-input
                                    name="query"
                                    v-model="form.query"
                                    placeholder="Enter query"
                            ></b-form-input>
                            <b-input-group-append>
                                <b-dropdown variant="outline-dark">
                                    <template v-slot:button-content>
                                        Examples
                                    </template>
                                    <b-dropdown-group>
                                        <div style="padding: 5px; width: 300px">
                                            <b-form-radio-group v-model="form.query" :options="patterns.query_patterns"
                                                                stacked></b-form-radio-group>
                                        </div>
                                    </b-dropdown-group>
                                </b-dropdown>
                                <b-button type="submit" @click="submitQuery" variant="outline-dark">
                                    <b-icon icon="search"></b-icon>
                                </b-button>
                            </b-input-group-append>
                        </b-input-group>
                    </b-form-group>
                    <b-form-group id="feature-selection">
                        <b-container v-for="entry in databases" fluid style="margin: 0;padding: 0">
                            <b-card no-body style="padding: 10px">
                                <b-row>
                                    <b-col>
                                        <b-button-group>
                                            <b-button v-b-toggle="'collapse'+entry[0]" variant="outline-dark">
                                                <b-icon icon="arrow-down-up" aria-hidden="true"></b-icon>
                                            </b-button>
                                            <b-button type="submit" formmethod="get"
                                                      :formaction="'/getdatabase/'+entry[0]"
                                                      variant="outline-dark"
                                                      formtarget="_self">
                                                <b-icon icon="cloud-download-fill" aria-hidden="true"></b-icon>
                                            </b-button>
                                        </b-button-group>
                                    </b-col>
                                    <b-col style="margin: auto; text-align: center">{{ entry[0] }}</b-col>
                                    <b-col></b-col>
                                    <b-col></b-col>
                                </b-row>
                                <b-collapse :id="'collapse'+entry[0]">
                                    <div style="padding-top: 15px; margin-bottom: 10px">
                                        <b-form-checkbox-group
                                                v-model="form.selected_features"
                                                :options="entry[1]"
                                                name="attributes"
                                        ></b-form-checkbox-group>
                                    </div>
                                </b-collapse>
                            </b-card>
                        </b-container>
                    </b-form-group>
                    <b-button-group class="mx-1" style="margin-top: 15px;">
                        <b-button type="submit" formmethod="post" formaction="/getinstances" variant="outline-dark"
                                  formtarget="_self">
                            <b-icon icon="download" style="margin-right: 5px"></b-icon>
                            Download instances
                        </b-button>
                        <input type="hidden" name="selected_features" v-bind:value="form.selected_features">
                        <b-button type="submit" formmethod="post" formaction="/exportcsv" variant="outline-dark"
                                  formtarget="_self">
                            <b-icon icon="archive" style="margin-right: 5px"></b-icon>
                            Download attributes
                        </b-button>
                        <b-button type="button" v-b-toggle.sidebar-2 variant="outline-dark">
                            <b-icon icon="question" aria-hidden="true"></b-icon>
                        </b-button>
                    </b-button-group>
                    <b-sidebar id="sidebar-2" title="" right shadow>
                        <template v-slot:default="{ hide }">
                            <div class="px-3 py-2 overflow-auto">
                                {% endraw %}
                                {% include "help.html" %}
                                {% raw %}
                            </div>
                            <b-button style="display: block; margin: 0 auto;" @click="hide" variant="danger">Ok
                            </b-button>
                        </template>
                    </b-sidebar>
                </b-form>
            </div>
        </b-container>
        <b-container style="padding-bottom: 10px">
            <b-row style="margin-top: 20px; margin-bottom: 10px">
                <b-col>
                    <b-dropdown variant="light">
                        <template v-slot:button-content>
                            <b-icon icon="gear-fill" aria-hidden="true"></b-icon>
                            Table Settings
                        </template>
                        <b-dropdown-group header="Show per page">
                            <div style="padding: 5px">
                                <b-form-radio-group v-model="table.per_page" :options="table.options"
                                                    stacked></b-form-radio-group>
                            </div>
                        </b-dropdown-group>
                    </b-dropdown>
                </b-col>
            </b-row>
            <b-row>
                <b-col>
                    <b-pagination
                            pills
                            v-model="table.current_page"
                            :total-rows="table.rows"
                            :per-page="table.per_page"
                            align="center"
                            aria-controls="result-table"
                    ></b-pagination>
                </b-col>
            </b-row>
            <b-row>
                <b-table
                        id="result-table"
                        :head-variant="table.head_variant"
                        :items="result"
                        :fields="table.fields"
                        :per-page="table.per_page"
                        :current-page="table.current_page"
                        :busy="table.table_busy"
                        :sort-by.sync="table.sortBy"
                        :sort-desc.sync="table.sortDesc"
                        responsive
                        sort-icon-left
                        hover
                        show-empty
                        striped
                        small
                >
                    <template v-slot:table-busy>
                        <div class="text-center text-success my-2">
                            <b-spinner type="grow" variant="success" class="align-middle"></b-spinner>
                            <strong>Loading...</strong>
                        </div>
                    </template>
                </b-table>
            </b-row>
            {% endraw %}
        </b-container>
        <b-overlay :show="loading" no-wrap spinner-type="grow" spinner-variant="success" fixed="true" opacity="0.7"
                   variant="light">
        </b-overlay>
    </b-container>
</div>
</body>
<script type="text/javascript" src="{{ url_for('static', filename='js/index.js') }}">
</script>
</html>
