<template>
    <div align="center" class="upload-screen-container">
        <div :class="screenData.imgCls"><img :src="require('./assets/' + screenData.imageUrl)" /></div>
        <div class="title-div">{{screenData.text}}</div>
        <div @click="handleBackClick" class="subtitle-div">{{screenData.subtext}}</div>
        <div class="phone-upload-div">
            <img src="./assets/ic-upload.png" />
            UPLOAD FROM PHONE OR CAMERA
            <input type="file" accept=".png, .jpg, .jpeg; capture='camera';" @change="uploadImageHandler" />
        </div>
        <div class="computer-upload-div">
            <div>
                <img src="./assets/ic-camera.png" />
                UPLOAD FROM COMPUTER
            </div>
            <input type="file" accept=".png, .jpg, .jpeg" @change="uploadImageHandler" />
        </div>
        <div class="later-upload-div" @click="handleBackClick">
                <img src="./assets/ic-upload.png" />
                BACK
        </div>
        <div class="overlay" @click="handleBackClick"></div>
    </div>
</template>
<script>
    import uploadScreen from './upload-screen';
    export default uploadScreen;
</script>