<template>
  <div id="juxtaposition" ref="juxtaposition">
    <div class="buttons">
      Scaffold:
      <span class="protein-name censor">
        {{ getScaffold.displayName }}:{{ getScaffold.chain }}
      </span>
      <ComputeLoopsButton
        @click="computeLoops(getScaffold.name)"
        example-act="scaffold-download-loops"
      />
      <RemoveButton @click="deleteLoops({ proteinName: getScaffold.name })" />
    </div>
    <StraightendProtein class="protein" :protein="getScaffold" example-act="scaffold-loop-rep" />
    <div class="dividor"></div>
    <div class="buttons">
      Insert:
      <span class="protein-name censor">
        {{ getInsert.displayName }}:{{ getInsert.chain }}</span
      >
      <ComputeLoopsButton
        @click="computeLoops(getInsert.name)"
        example-act="insert-download-loops"
      />
      <RemoveButton @click="deleteLoops({ proteinName: getInsert.name })" />
    </div>
    <StraightendProtein class="protein" :protein="getInsert" />
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
import StraightendProtein from "./StraightendProtein";
import RemoveButton from "../PanelButtons/RemoveButton";
import ComputeLoopsButton from "../PanelButtons/ComputeLoopsButton";

export default {
  name: "Juxtaposition",
  data() {
    return {
      editorMode: { name: "loop", description: "Loop Editor" },
      editorModes: [
        { name: "loop", description: "Loop Editor" },
        { name: "ss", description: "SS Editor" },
      ],
    };
  },
  components: {
    StraightendProtein,
    RemoveButton,
    ComputeLoopsButton,
  },
  methods: {
    ...mapActions([
      "removeRole",
      "lookupArchDBLoops",
      "computeLoops",
      "deleteLoops",
    ]),
  },
  computed: {
    ...mapGetters(["getProteins", "getScaffold", "getInsert"]),
  },
};
</script>

<style scoped>
#juxtaposition {
  width: 100%;
  padding-bottom: 5px;
}

.protein {
  margin-top: 5px;
}
.detail {
  width: 45%;
}
#details {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}
#juxtaposition {
  display: flex;
  flex-direction: column;
}

.buttons {
  display: flex;
}
.buttons > * {
  margin: 0px 5px;
}
</style>