<template>
    <div class="container" style="margin-top: 3rem; margin-bottom: 3rem;">
        <div class="d-flex justify-content-center" >
            <b-card class="text-left " style="width: 20rem; margin-top: .8rem;" >
                <b-container v-if="dataLoading">
                    <b-row>
                        <b-col cols="3">
                            <b-spinner variant="primary" label="Spinning"></b-spinner>
                        </b-col>
                        <b-col >
                            <b-card-text block>
                                Guardando Datos...
                            </b-card-text>
                        </b-col>
                    </b-row>
                </b-container>
                <b-alert v-else-if="dataSaved" variant="success" show style="margin: 0rem">Datos Guardados</b-alert>
                <b-alert v-else show variant="danger">Los datos no se pudieron guardar</b-alert>
            </b-card>
        </div>
        <div class="d-flex justify-content-center">
           
            <b-card class="text-left" style="width: 20rem; margin-top: .8rem;" >
                <b-container v-if="imageLoading">
                    <b-row>
                        <b-col cols="3">
                            <b-spinner variant="primary" label="Spinning"></b-spinner>
                        </b-col>
                        <b-col >
                            <b-card-text block>
                                Guardando Imagen...
                            </b-card-text>
                        </b-col>
                        
                    </b-row>
                </b-container>
                 <b-alert v-else-if="imageSaved" variant="success" show style="margin: 0rem">Imagen Guardada</b-alert>
                 <b-alert v-else show variant="danger">La imagen no se pudo guardar</b-alert>
            </b-card>
        </div>
        <div class="d-flex justify-content-center">
            <b-card class="text-left" style="width: 20rem; margin-top: .8rem;" >
                <b-container v-if="pdfLoading">
                    <b-row>
                        <b-col cols="3">
                            <b-spinner variant="primary" label="Spinning"></b-spinner>
                        </b-col>
                        <b-col >
                            <b-card-text block>
                                Guardando PDF...
                            </b-card-text>
                        </b-col>
                        
                    </b-row>
                </b-container>
                <b-alert v-else-if="pdfSaved" variant="success" show style="margin: 0rem">PDF Guardado</b-alert>
                <b-alert v-else show variant="danger">El pdf no se pudo guardar</b-alert>
            </b-card>
        </div>
        <h3 style="margin-top: 2rem;"><strong>Cargando...</strong></h3>
    </div>
</template>
<script>
export default {
    props: {
        imageLoading: Boolean,
        pdfLoading: Boolean,
        dataLoading: Boolean, 
        imageSaved: Boolean,
        pdfSaved: Boolean,
        dataSaved: Boolean, 
  },
    data() {
        return {
           
    }}
}
</script>
<style scoped>
 
</style>