<template>
  <main>
    <div class="workspace workspace-grid">
      <div>
        <div v-if="!infopanelIsHidden">
          <div class="static-element-header light">
            Introduction
            <CancelButton
              class="cancButton"
              @click="infopanelIsHidden = !infopanelIsHidden"
            />
          </div>
          <div class="static-element">
            LoopGrafter is intended to provide guidance on transplanting loops
            between two structurally related proteins, (<span
              style="color: var(--scaffold-light)"
              >scaffold</span
            >
            or source, and
            <span style="color: var(--insert)">insert</span> or target),
            while assessing their dynamic properties. For the tool to work as
            intended, we recommend performing the grafting on proteins that
            differ in no more than 8 Angstroms RMSD and than 20% of sequence
            length.
          </div>
        </div>

        <div class="static-element-header grad">Input Structures</div>
        <div class="static-element">
          <LoopsProteinSelection />
        </div>

        <div class="static-element-header grad">Job Information</div>
        <div class="static-element">
          <JobInformation />
        </div>
      </div>

      <RightInfoPanel />
    </div>

    <div class="workspace">
      <!-- <div class="static-element-header light">Disclamer</div> -->
      <div class="static-element footer-block">
        <b>Disclamer</b>: LoopGrafter is a non-profit service to the academic
        and nonacademic scientific community. The responsibility of the author
        is limited to applying best efforts in providing an useful service. The
        authors can not be held liable in any way for the service provided here.
        <br />
        <b>Keywords</b>: protein engineering, protein loop grafting,
        multiple-point mutants, protein dynamics, protein stability
        <br />
        <router-link :to="{ name: 'terms' }"> Terms Of Use</router-link>
        |
        <router-link :to="{ name: 'privacy' }">Privacy</router-link>
      </div>
    </div>
  </main>
</template>

<script>
import LoopsProteinSelection from "../components/LoopsProteinSelection";
import JobInformation from "../components/JobInformation";
import RightInfoPanel from "../components/RightInfoPanel";
import LabelButton from "../components/PanelButtons/TextLabelButton";
import CancelButton from "../components/PanelButtons/CancelButton";
import { mapActions } from "vuex";

export default {
  components: {
    LoopsProteinSelection,
    JobInformation,
    LabelButton,
    RightInfoPanel,
    CancelButton,
  },

  data() {
    return {
      infopanelIsHidden: false,
    };
  },

  mounted() {
    if (localStorage.infopanelIsHidden) {
      this.infopanelIsHidden = localStorage.infopanelIsHidden;
    }
  },
  watch: {
    infopanelIsHidden(newInfopanelIsHidden) {
      localStorage.infopanelIsHidden = newInfopanelIsHidden;
    },
  },
};
</script>

<style scoped>
.static-element-header.nested {
  margin: 10px 0px 0px 0px;
}

.footer-block {
  color: var(--cancel-grey);
  font-size: small;
  border-radius: 10px 10px 0 0;
}

@media (min-width: 950px) {
  .workspace-grid {
    display: grid;
    grid-template-columns: auto 340px;
  }
}

.cancButton {
  float: right;
}

.static-element-header.light {
  color: var(--cancel-grey);
  background: var(--neutral);
}

.static-element-header.grad {
  background: var(--gradient);
}

.static-element-header {
  /* min-height: 25px; */
  padding: 3px 10px;
}

.static-element {
  padding: 5px 10px;
}

.labelButton {
  /* width: 50%; */
  height: 30px;
  margin: 10px auto 50px 10px;
  /* background: var(--gradient); */
}
</style>
