<div class="fif" style='max-width: 90%; margin: auto; margin-bottom: 40px; background: #f6f6f6; box-shadow: 10px 10px 5px grey; padding: 25px 25px 25px 0px;' id="{{ data.fif_id }}">

  <div>
    <h3>{{ data.fif_id }} &ensp; ({{ data.num }} of {{ data.total }})</h3>
  </div>

  <div class="flex-container" style="display: flex">

  <div class="flex-child" style="flex: 1">
    <div class="tab" style="display: grid">
        <button class="button1" onclick="openTab(event, '{{ data.fif_id }}_info', this.id)" style="border-top-style: solid">Info</button>
        <button class="button1" onclick="openTab(event, '{{ data.fif_id }}_timeseries', this.id)">Time Series</button>
        <button class="button1" onclick="openTab(event, '{{ data.fif_id }}_channels', this.id)">Channels</button>
        <button class="button1" onclick="openTab(event, '{{ data.fif_id }}_spectra', this.id)">Power Spectra</button>
        <button class="button1" onclick="openTab(event, '{{ data.fif_id }}_digitisation', this.id)">Digitisation</button>
        {% if data.plt_ica is defined %}
            <button class="button1" onclick="openTab(event, '{{ data.fif_id }}_ica', this.id)">ICA</button>
        {% endif %}
    </div>
  </div>

  <div class="flex-child" style="flex: 5; padding-left: 25px">

    <div class="tabpage" style='width: 100%' id={{ data.fif_id }}_info>
        <div>
            <b>Original file:</b> {{ data.filename }}</br>
            {% if data.preproc_fif_filename != None %}
                <b>Preprocessed file:</b> {{ data.preproc_fif_filename }}</br>
            {% endif %}
            <b>Project name:</b> {{ data.projname }}</br>
            <b>Experimenter:</b> {{ data.experimenter }}</br>
            <b>Data acquired:</b> {{ data.meas_date }}</br>
            {{ data.acq_samples }} samples at {{ data.acq_sfreq }} Hz - {{ data.acq_duration}} seconds
        </div>
        
        <div style="width: 100%; display: table; margin-top: 50px">
            <div style="display: table-row; height: 100px;">
                <div class='tablebox'>
                    {{ data.chantable }}
                </div>
                <div class='tablebox'>
                    {{ data.digitable }}
                </div>
                <div class='tablebox'>
                    {{ data.eventtable }}
                </div>
            </div>
        </div>
    </div>
    
    <div class="tabpage" style="width: 100%; display: none" id={{ data.fif_id }}_timeseries>
        {% if data.bad_seg != [] %}
            <div style="width: 100%">
                <h4>Bad segments</h4>
                <span>{{ '<br/>'.join(data.bad_seg[::-1]) }}</span>
            </div>
        {% endif %}
        <div style="width: 100%">
            <h4>Variance Across Sensors</h4>
            <img src="{{ data.plt_temporalsumsq }}" alt="" style='max-width: 100%'/>
        </div>
        <div style="width: 100%">
            <h4>Variance Across Sensors Excluding Bad Chans and Segs</h4>
            <img src="{{ data.plt_temporalsumsq_exclude_bads }}" alt="" style='max-width: 100%'/>
        </div>
        {% if data.plt_artefacts_eog is not none %}
            <div style="width: 100%">
                <h4>EOG Recording</h4>
                <img src="{{ data.plt_artefacts_eog }}" alt="" style='max-width: 100%'/>
            </div>
        {% endif %}
        {% if data.plt_artefacts_ecg is not none %}
            <div style="width: 100%">
                <h4>ECG Recording</h4>
                <img src="{{ data.plt_artefacts_ecg }}" alt="" style='max-width: 100%'/>
            </div>
        {% endif %}
    </div>
        
    <div class="tabpage" style="width: 100%; display: none" id={{ data.fif_id }}_channels>
        <div style="width: 75%; margin:0 auto">
            <h4>Distribution of Per-Sensor Variance</h4>
            <img src="{{ data.plt_channeldev }}" alt="" style='max-width: 100%'/>
        </div>
        <div style="width: 75%; margin:0 auto">
            <h4>Distribution of Per-Sensor Variance Excluding Bad Chans and Segs</h4>
            <img src="{{ data.plt_channeldev_exclude_bads }}" alt="" style='max-width: 100%'/>
        </div>
        <div style="width: 100%">
            <h4>Bad channels</h4>
            <div style="width: 90%; margin:0 auto">
                <img src="{{ data.plt_badchans }}" alt="" style='max-width: 100%'/>
            </div>
            <span>{{ data.bad_chans }}</span>
        </div>
    </div>
        
    <div class="tabpage" style="width: 100%; display: none" id={{ data.fif_id }}_spectra>
        <div style="width: 100%; display: table">
            <div style="display: table-row; height: 100px;">
                <div class='figbox'>
                    <h4>Full Power Spectra Excluding Bad Chans and Segs</h4>
                    <img src="{{ data.plt_spectra }}" alt="" style='max-width: 100%'/>
                </div>
                <div class='figbox'>
                    <h4>1-48Hz Power Spectra Excluding Bad Chans and Segs</h4>
                    <img src="{{ data.plt_zoomspectra }}" alt="", style='max-width: 100%'/>
                </div>
            </div>
        </div>
    </div>

    <div class="tabpage" style="width: 100%; display: none" id={{ data.fif_id }}_digitisation>
        <div style="width: 100%">
            <h4>Digitisation and Headshape</h4>
            <img src="{{ data.plt_digitisation }}" alt="" style='max-width: 100%'/>
        </div>
    </div>

    {% if data.plt_ica is defined %}
        <div class="tabpage" style="width: 100%; display: none" id={{ data.fif_id }}_ica>
            <div style="width: 100%">
                <h4>ICA</h4>
                <img src="{{ data.plt_ica }}" alt="" style='max-width: 100%'/>
            </div>
        </div>
    {% endif %}

    </div>
  </div>
</div>

<script>

function openTab(event, figTag, button) {
    // Get all elements with class="tabpage" and hide them
    tabpage = document.getElementsByClassName("tabpage");
    for (i = 0; i < tabpage.length; i++) {
        tabpage[i].style.display = "none";
    }
    // Show the current tab
    document.getElementById(figTag).style.display = "block";
    if (figTag.includes('info')) {
        currentButton = 0;
    }
    if (figTag.includes('timeseries')) {
        currentButton = 1;
    }
    if (figTag.includes('channels')) {
        currentButton = 2;
    }
    if (figTag.includes('spectra')) {
        currentButton = 3;
    }
    if (figTag.includes('digitisation')) {
        currentButton = 4;
    }
    if (figTag.includes('ica')) {
        currentButton = 5;
    }
}

</script>
