<template>
    <div v-if="showStagingArea" class="staging-card bg-white mx-auto rounded position-relative">
        <div class="p-3">
            <div
                @click="$store.commit('application/showStagingArea', !showStagingArea);"
                class="ui-element close-showStagingArea position-absolute"
            >
                <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
  z-index: 2
  right: 0
  top: 7px
  height: $icon-width
  width: $icon-height

.staging-card
  width: 30rem
  height: 28rem
  opacity: $slight-transparent
</style>