<template>
  <div class="b-panel-list-modal">
    <div class="b-panel-list-modal__content">
      <panel-list :panels="panels" :first-panel="firstPanel"></panel-list>
    </div>
    <div class="b-panel-list-modal__backdrop modal-backdrop"></div>
  </div>
</template>
<style lang="scss">
.b-panel-list-modal {
  &__content {
    position: fixed;
    top: 10vh;
    left: 10vw;
    right: 10vw;
    bottom: 10vh;
    z-index: 2;
  }
  &__backdrop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100vw;
    height: 100vh;
    background-color: var(--bs-backdrop-bg);
    opacity: var(--bs-backdrop-opacity);
  }

  .b-panel {
    max-width: 40vw;
    margin: 0 auto;
  }
}
</style>
<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';
import PanelList from './PanelList.vue';

@Component({
  components: {
    PanelList
  },
  directives: {
  },
  filters: {
  }
})
export default class PanelListModal extends Vue {
  @Prop() panels;
  @Prop() firstPanel;
}
</script>
