<script>
import VulnerabilityHeader from './header.vue';
import VulnerabilityDetails from './details.vue';
import VulnerabilityFooter from './footer.vue';

export default {
  components: { VulnerabilityHeader, VulnerabilityDetails, VulnerabilityFooter },

  props: {
    vulnerability: {
      type: Object,
      required: true,
    },
  },

  methods: {
    refreshHeader() {
      this.$refs.header.refreshVulnerability();
    },
    refreshFooter() {
      this.$refs.footer.fetchDiscussions();
    },
  },
};
</script>

<template>
  <div>
    <vulnerability-header
      ref="header"
      :initial-vulnerability="vulnerability"
      @vulnerability-state-change="refreshFooter"
    />
    <vulnerability-details :vulnerability="vulnerability" />
    <vulnerability-footer
      ref="footer"
      :vulnerability="vulnerability"
      @vulnerability-state-change="refreshHeader"
    />
  </div>
</template>
