<div class="f-row wrappable">
    <div class="f-row wrappable smallest nice-width centered">
        <div class="f-row wrappable column-at-top row-at-center">
            <div class="f-row">
                <form id="plot_astrosource_form" class="f-cell fit centered styled-box" :style="showPlot ? { margin: '0 auto'  } : {}"  onsubmit="load_source_plot(this); return false;">
                    {% csrf_token %}
                    <div class="form-block">
                        <div class="form-row">
                            <label>Select a source from the catalog:</label>
                        </div>
                        <div class="form-row">
                            <input v-model="input_astrosource" type="text" name="source_name" list="source_name_list" placeholder="source (↓ to list)" title="Select a source from the catalog" required>
                            <input class="button" type="button" :value="[[ showPlot ? 'again' : 'plot' ]]" onclick="load_source_plot(this.form);">
                        </div>
                        <div class="form-row wrappable">
                            <input v-model="input_date_start" type="text" name="date_start" placeholder="From..." title="Select a start date (yyyy-mm-dd HH:MM)">
                            <input v-model="input_date_end" type="text" name="date_end" placeholder="To..." title="Select an end date (yyyy-mm-dd HH:MM)">
                        </div>
                        <div class="form-row wrappable">
                            <q-select label="band" v-model="plot_config_band" name="band" :options="plot_config_band_options" required></q-select>
                            <label><q-toggle v-model="plot_config_fast" color="blue"></q-toggle><span>fast</span></label>
                            <input type="checkbox" style="display:none" name="plot_config_fast" v-model="plot_config_fast" hidden />
                        </div>
                        <q-list padding bordered class="rounded-borders">
                            <q-expansion-item
                              dense
                              header-style="height: 1.5em; min-height: 1em !important;"
                              icon="settings"
                              label="Other settings"
                            >
                              <q-card>
                                <q-card-section style="padding: 8px 16px 0 16px;">
                                    <div class="form-row wrappable" id="plot_config_fast_checkboxes">
                                        <div><label><input type="checkbox" name="enable_full_lc" v-model="enable_full_lc" :disabled="plot_config_fast"/><span style="margin-left: 0.8em;">Full curve</span></label></div>
                                        <div><label><input type="checkbox" name="enable_errorbars" v-model="enable_errorbars" :disabled="plot_config_fast"/><span style="margin-left: 0.8em;">Enable errorbars</span></label></div>
                                        <div><label><input type="checkbox" name="enable_crosscheckpts" v-model="enable_crosscheckpts" :disabled="plot_config_fast"/><span style="margin-left: 0.8em;">Crosscheck data</span></label></div>
                                        <div><label><input type="checkbox" name="use_hostcorrected" v-model="use_hostcorrected" :disabled="plot_config_fast"/><span style="margin-left: 0.8em;">Plot host-corrected values</span></label></div>
                                    </div>
                                </q-card-section>
                              </q-card>
                            </q-expansion-item>
                        </q-list>
                        <input type="submit" style="display:none" hidden />
                    </div>
                </form>
            </div> 
            <div v-show="showPlot" class="f-row">
                <div v-show="showPlot" id="plotControlsContainerDiv" class="f-cell fit centered styled-box" style="display: none;">
                    <div id="controls" style="margin-bottom: 16px;"><label>Toggle errorbars <input onclick="plot_update_errorbars_status();" id="cbox_errorbars" type="checkbox" :disabled="!(enable_errorbars)" checked/></label></div>
                    <div id="legendDiv"></div>
                </div>
            </div>
            <div v-show="showPlot" class="f-row centered">
                <div v-show="showPlot" class="f-cell styled-box nice-width" id="FlagGUI">
                    <q-card flat bordered>
                        <q-card-section class="row items-center q-gutter-sm" flat bordered>
                            <div class="col-12 col-md-auto">
                                <q-item-label>Flag GUI <q-toggle v-model="flag_gui_popup" color="blue"></q-toggle></q-item-label>
                            </div>
                            
                            <div class="col-12 col-md-auto">
                                <q-btn label="show selected points" color="primary" @click="show_selected_plot_pts = true" :disable="selected_plot_pts.length == 0" size="sm"></q-btn>
                            </div>

                            <div class="col-12 col-md-auto">
                                <q-item-label>[[ selected_plot_pts.length ]] points selected</q-item-label>
                            </div>
                            
                            <div class="col-12">
                                <div class="row q-gutter-x-sm">
                                    <q-checkbox v-model="selected_plot_pts_flagsummary.bad_photometry" @click="set_flag(1<<1, selected_plot_pts, !!selected_plot_pts_flagsummary.bad_photometry)" :disable="selected_plot_pts.length == 0" label="bad photometry" size="sm"></q-checkbox>
                                    <q-checkbox v-model="selected_plot_pts_flagsummary.bad_polarimetry"  @click="set_flag(1<<2, selected_plot_pts, !!selected_plot_pts_flagsummary.bad_polarimetry)"  :disable="selected_plot_pts.length == 0" label="bad polarimetry" size="sm"></q-checkbox>
                                </div>
                            </div>
                        </q-card-section>                          
                    </q-card>
                </div>
                <q-dialog v-model="show_selected_plot_pts">
                    <q-markup-table style="max-width: 95vw !important;">
                        <table>
                            <thead>
                                <tr>
                                    <!--<th>CDS index</th>-->
                                    <th>pk</th>
                                    <th>mjd</th>
                                    <th>date</th>
                                    <th>mag</th>
                                    <th>p (%)</th>
                                    <th>chi (º)</th>
                                    <th>flag (int)</th>
                                    <!-- <th>flags (str)</th> -->
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(point, index) in selected_plot_pts" :key="index">
                                    <!-- <td>[[ index ]]</td> -->
                                    <td><a v-bind:href="`/iop4/admin/iop4api/photopolresult/?id=${point.pk}`">[[ point.pk ]]</a></td>
                                    <td>[[ formatFloat(point.x1,5) ]]</td>
                                    <td>[[ point.datestr ]]</td>
                                    <td v-if="!isNaN(point.y1)">[[ formatFloat(point.y1,3) ]] &#177; [[ formatFloat(point.y1_err,3) ]]</td><td v-else>-</td>
                                    <td v-if="!isNaN(point.y2)">[[ formatFloat(100*point.y2,3) ]] &#177; [[ formatFloat(100*point.y2_err,3) ]]</td><td v-else>-</td>
                                    <td v-if="!isNaN(point.y3)">[[ formatFloat(point.y3,3) ]] &#177; [[ formatFloat(point.y3_err,3) ]]</td><td v-else>-</td>
                                    <td>[[ point.flags ]]</td>
                                    <!-- <td>[[ point.flagsstr ]]</td> -->
                                    <td>
                                        <q-chip :selected="point.has_flag_bad_photometry" @click="toggle_flag(1<<1, [point])" color="black" text-color="white" :outline="!point.has_flag_bad_photometry">bad photometry</q-chip>
                                        <q-chip :selected="point.has_flag_bad_polarimetry" @click="toggle_flag(1<<2, [point])" color="black" text-color="white" :outline="!point.has_flag_bad_polarimetry">bad polarimetry</q-chip>
                                    </td>
                                </tr>
                            </tbody>
                            <!-- <q-table :rows="selected_plot_pts" columns="" row-key="pk"></q-table> -->
                        </table>
                    </q-markup-table>
                </q-dialog>
            </div>
            <div v-show="showPlot" class="f-row centered">
                <div v-show="showPlot" id="plotTableContainerDiv" class="f-cell styled-box nice-width">
                    <div id="tablePlotDiv"></div>
                </div>
            </div>
        </div>
    </div>
    <div v-show="showPlot" class="f-row nice-width centered">
        <div v-show="showPlot" id="plotContainerDiv" class="f-cell styled-box">
            <div id="plotDiv"></div>
        </div>
    </div>
</div>
