<template>
<transition appear enter-active-class="animated slideInRight" leave-active-class="hidden">

    <div class="q-pa-sm">
        <div class="text-h5 q-pb-md">
            Introductory Video
        </div>

        <q-card class="q-pa-md">
            <div class="row flex flex-center">
                <div class="col-12 col-md-7 q-ma-sm">
                    <q-card class="my-card">
                        <q-card-section>
                            <div class="q-pa-md">
                                <q-video :ratio="16/9" src="https://www.youtube.com/embed/P_B-ZZ705zo" />
                            </div>

                            <div class="flex flex-center q-py-lg">
                                <q-btn unelevated color="primary" text-color="grey-2" @click="startComputing(3)" icon="cloud_upload" style="width: 200px">
                                    Upload Video
                                </q-btn>
                            </div>
                            <q-linear-progress size="25px" :value="progress1" color="secondary">
                                <div class="absolute-full flex flex-center">
                                    <q-badge color="white" text-color="secondary" :label="progressLabel1" />
                                </div>
                            </q-linear-progress>
                        </q-card-section>
                    </q-card>

                </div>
                <div class="col-12 col-md-4 q-ma-sm">
                    <q-card class="my-card">
                        <q-card-section>
                            <div class="text-center text-subtitle1">
                                How to create an introductory video?
                            </div>
                            <div class="flex flex-center">
                                <q-img src="statics/howToUpload.png" style="" class="rounded-borders">
                                </q-img>

                            </div>
                        </q-card-section>
                    </q-card>

                </div>
            </div>
            <div class="row">
                <div class="col-12 col-md-12 q-mt-md">
                    <q-expansion-item v-model="expanded1" label="Read the instructions" header-class="text-h6 text-grey-8 text-thin text-center bg-grey-3" default-opened>
                        <q-card>
                            <q-card-section>
                                <div class="row">
                                    <div class="col-12 col-md-6">
                                        <strong>Why upload a demo? </strong>
                                        <ul>
                                            <li>Helpfull for students to judge your expertise.</li>
                                            <li>More interactive &amp; result oriented. </li>
                                            <li>Plan your video keeping in view that why should student chose you. </li>
                                            <ul>
                                                <li>Create a 60 - second introductory video.</li>
                                                <li>Record your video in a natural daylight, avoiding lightening issue.</li>
                                                <li>Record in a quiet space free of echoes, pops or white noise.</li>
                                                <li>While recording, speak directly into the camera as if you were speaking to a student.</li>
                                                <li>For PC users. Open VLC player then File &gt; Open Capture Device.</li>
                                                <li>For MAC users. Go to Quicktime Player then File &gt; New Movie Recording.</li>
                                                <li>Send us only those videos you created by yourself to avoid copyright issues.</li>
                                            </ul>
                                        </ul>

                                    </div>
                                    <div class="col-12 col-md-6">
                                        <strong>How to upload a demo? </strong>
                                        <ul>
                                            <li class="first">Create a <strong>60 - second</strong> video introducing yourself and tutoring skills.</li>
                                            <li>Record video from your mobile and send us at our Whatsapp or <br> imo number <strong>+923452410728</strong></li>
                                        </ul>
                                    </div>
                                </div>

                            </q-card-section>
                        </q-card>
                    </q-expansion-item>

                </div>
                <div class="col-12 text-center q-py-md">
                    <b class="text-red">NOTE: </b> It's highly advisible to upload a demo video to maximize your earning,
                    but you may skip this step and upload it later on.

                </div>
            </div>
        </q-card>

    </div>
</transition>
</template>

<script>

export default {
    data() {
        return {
            model: null,
            step: 1,
            time: '',
           
            value: '',
            inputValue: '',
            date: '',
            options: [],
            myModel: []
        }
    },
    computed: {
        progressLabel1() {
            return (this.progress1 * 100).toFixed(2) + '%'
        },
        scrollerPopupStyle150() {
            if (this.$q.screen.lt.sm) {
                return {
                    width: '90vw',
                    height: '70vh'
                }
            } else {
                return {
                    maxHeight: '200px',
                    height: '200px',
                    width: '250px'
                }
            }
        }

    },
   
   

}
</script>

<style lang="css">
.q-uploader__file--img {
    height: 300px !important;
    min-width: 200px !important;
}

.my-image {
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
}

@media only screen and (min-width: 0px) and (max-width: 900px) {

   
}
</style>
