<template>
    <div v-if="showStagingArea" class="card staging-card">
        <div class="card-body staging-card-body">
            <div
                @click="$store.commit('application/showStagingArea', !showStagingArea);"
                class="ui-element close-showStagingArea"
            >
                <i class="fa fa-close"></i>
            </div>
            <div class="card-title mb-4 headline">
                <h4>Staging area</h4>
                <hr>
            </div>
            <div class="d-flex flex-row input-group mb-4"></div>
        </div>
    </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState("application", ["showStagingArea"])
  }
};
</script>

<style lang="sass" scoped>
.close-showStagingArea
  position: absolute
  z-index: 2
  right: 0
  top: 7px
  border-radius: $border-radius
  height: $icon-width
  width: $icon-height

.staging-card
  position: relative
  background-color: white
  width: 30rem
  height: 28rem
  margin-left: auto
  margin-right: auto
  border-radius: $border-radius
  opacity: $slight-transparent
</style>