<template>
  <q-page class="q-py-xl q-mx-auto bg-grey-4" style="overflow: auto">
    <div id="analysis-list-form" style="display: block">
      <q-card class="q-mx-auto page-middle" style="">
        <q-tab-panel name="analysis" class="q-mx-auto page-middle">
            <div class="text-h6 q-px-lg q-pb-lg q-pt-sm" style="min-height: 800px">
              <q-list bordered class="rounded-borders q-my-md" v-for="(file, index) in analysis" :key="index" style="display: -webkit-inline-box">

                <q-item clickable v-ripple class="q-px-lg" @click="initialAnalysisDetails(file)" style="width: 1420px">
                  <q-item-section>
                    <q-item-label lines="1" >{{ file.name }}</q-item-label>
                    <q-item-label caption lines="2">
                      <span class="text-weight-bold"></span>
                      ip: {{ file.info }}
                    </q-item-label>
                  </q-item-section>

                  <q-item-section side class="q-mx-xl text-subtitle1 text-weight-medium">
                    {{ file.status }}
                  </q-item-section>

                  <q-item-section side class="text-subtitle1 text-weight-medium">
                    {{ file.date }}
                  </q-item-section>
                </q-item>

                <q-btn-dropdown flat dense dropdown-icon="more_vert" style="margin-top: 8px">
                  <q-item clickable v-close-popup class="text-subtitle1 text-weight-medium" @click="rename(file)" style="">
                    <q-item-section side class="text-subtitle1 text-weight-medium">
                      <q-item-label>Rename</q-item-label>
                    </q-item-section>
                  </q-item>
                </q-btn-dropdown>

              <!-- Go to Details button here -->
              <q-btn flat dense label="Go to Details" @click="goToAnalysisDetails(file.id)" style="margin-top: 8px" />

              </q-list>
            </div>
          </q-tab-panel>
      </q-card>
    </div>

    <div id="rename-popup-window" style="height: 350px; width: 450px; z-index: 1; display: none" class="bg-grey-3 fixed-center">
      <q-btn flat round color="primary" icon="close" class="absolute-top-right" @click="closeRenamePopUp"/>
      <div id="chart-container" style="height: 250px; width: 350px; margin: 30px">
        <q-form
          @submit="onSubmitRename"
          class="q-ma-lg q-py-lg"
        >

          <h6 style="margin: 0">Current Name: </h6>
          <q-input
            filled
            v-model="currFileName"
            label="current file name *"
            readonly 
          /><br>
          <h6 style="margin: 0">New Name: </h6>
          <q-input
            filled
            v-model="newFileName"
            label="new file name *"
          />
          <div id="rename-error-empty" class="text-caption" style="color: red; display: none">Error: New name cannot be empty</div>
          <div id="rename-error-duplicate" class="text-caption" style="color: red; display: none">Error: New name already exist</div>
          <div id="rename-error-same" class="text-caption" style="color: red; display: none">Error: New name cannot same as current name</div>
          <div>
            <q-btn label="Submit" style="float:right; margin-top: 15px" type="submit" color="primary"/>
          </div>
        </q-form>
      </div>
    </div>
  </q-page>
</template>

<script>
import Analysis from '../static/js/analysis.js'

export default {
  ...Analysis
}
</script>

<style>
@import '../css/analysis.css'
</style>