<template>
  <div>
    <div class="name">
      Scaffold:
      {{ getScaffold.representation }}
    </div>
    <SecondaryStructreRefinment
      class="refinment"
      example-act="scaffold-edit"
      role="scaffold"
    />
    <div class="dividor"></div>
    <div class="name">
      Insert:
      {{ getInsert.representation }}
    </div>
    <SecondaryStructreRefinment class="refinment" role="insert" />
  </div>
</template>

<script>
import { mapGetters, mapActions, mapMutations } from "vuex";
import ProteinLoader from "./ProteinSelection/ProteinLoader";
import RemoveButton from "./PanelButtons/RemoveButton";
import LabelButton from "./PanelButtons/TextLabelButton";
import SecondaryStructreRefinment from "./SecsRefinment/SecondaryStructreRefinment";
export default {
  components: {
    ProteinLoader,
    RemoveButton,
    LabelButton,
    SecondaryStructreRefinment,
  },
  methods: {
    ...mapActions(["removeRole"]),
  },
  computed: {
    ...mapGetters(["getScaffold", "getInsert", "exampleMode"]),
  },
};
</script>

<style scoped>
.refinment {
  background: white;
  padding: 4px;
  border-radius: 10px;
}
.name{
  padding-bottom: 5px;
}
</style>