<template>
  <transition appear enter-active-class="animated slideInRight" leave-active-class="hidden">
    <div class="q-pa-sm">
      <div class="text-h5 q-pb-md">General Information</div>
      <q-card>
        <q-card-section>
          <div class="q-pa-md flex flex-center column">
            <q-uploader
              url
              label="Upload Profile Photo"
              :headers="[{name: 'X-Custom-Timestamp', 
                    value: 1550240306080}]"
              thumbnails
              style="max-width: 400px; max-height:400px;"
            />
            <div
              class="text-subtitle2 text-thin q-ma-md grey-4"
            >Please only upload your clear facial image.</div>
          </div>
        </q-card-section>
        <q-card-section>
          <div class="row">
            <div class="col-6 col-md-6 col-xs-12 q-pa-md row">
              <div class="text-body1 text-bold text-grey-9">Name: </div>
              <div class="text-body1 text-grey-9 q-pl-md">Dr. Zahid Mamon</div>
            </div>
            <div class="col-6 col-md-6 col-xs-12 q-pa-md row">
              <div class="text-body1 text-bold text-grey-9">Email: </div>
              <div class="text-body1 text-grey-9 q-pl-md">dr.zahidMamon@gmail.com</div>
            </div>
          </div>
        </q-card-section>
      </q-card>
    </div>
  </transition>
</template>

<script>
export default {
  data() {
    return {}
  },
};
</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>
