<template>
  <div class="flexibilities">
    <FlexibilityPanel
      :protein="getScaffold"
      v-if="getScaffold.availableBfactors.length == 0"
    />
    <FlexibilityVizualization :protein="getScaffold" v-else />

    <!-- <div v-for="protein in getProteins" :key="protein.id" class="flexibility">
    </div> -->
  </div>
</template>

<script>
import FlexibilityPanel from "./FlexibilityDialog/FlexibilityPanel";
import FlexibilityVizualization from "./FlexibilityVisualizations/FlexibilityVizualization";
import { mapGetters } from "vuex";

export default {
  components: {
    FlexibilityPanel,
    FlexibilityVizualization,
  },

  computed: {
    ...mapGetters(["getProteins", "getScaffold"]),
  },
};
</script>

<style scoped>
.flexibilities {
  flex-direction: column;
  width: 100%;
}
.flexibility {
  width: 100%;
  margin: 10px 0px;
}
</style>