<div class="header">
    <h1>Explore data &nbsp;<span class="material-symbols-outlined">&#xE8B6;</span></h1>
    <div>
        <q-tabs v-model="selectedTabs[1]">
            <q-tab name="catalog" label="catalog"></q-tab>
            {% comment %} <q-tab name="query" label="Query"></q-tab> {% endcomment %}
            <q-tab name="plot" label="Plot"></q-tab>
            <q-tab name="data" label="Data"></q-tab>
            <q-tab name="logs" label="logs"></q-tab>
        </q-tabs>
    </div>
</div>

<div id="explore_container" class="tab-container">

    <datalist id="source_name_list">
        {% for source_name in source_name_list %}
            <option value="{{ source_name }}">{{ source_name }}</option>
        {% endfor %}
    </datalist>

    <div v-show="selectedTabs[1] === 'catalog'" class="tab-content" id="catalog-tab">
        {% include 'iop4api/catalog.html' %}
    </div>
 
    {% comment %} <div v-show="selectedTabs[1] === 'query'" class="tab-content" id="query-tab">
        {% include 'iop4api/query.html' %}
    </div> {% endcomment %}

    <div v-show="selectedTabs[1] === 'plot'" class="tab-content" id="plot-tab">
        {% include 'iop4api/plot.html' %}
    </div>

    <div  v-show="selectedTabs[1] == 'data'" class="tab-content" id="data-tab">
        {% include 'iop4api/data.html' %}
    </div>

    <div v-show="selectedTabs[1] == 'logs'" class="tab-content" id="logs-tab"> 
        {% include 'iop4api/logs.html' %}
    </div>

</div>

{% comment %} <div class="footer">
</div> {% endcomment %}
