<template>
    <div class="q-my-md">
              <q-banner class="bg-blue-1 rounded-borders shadow-1">
                <q-icon class="float-right text-grey-5" size="sm" name="cancel" />
                <div class="text-h5">Incomplete Signup!</div>
                <template v-slot:avatar>
                  <q-icon name="warning" color="warning" />
                </template>
                You must complete signup and get approved before you can start tutoring.
                <template
                  v-slot:action
                >
                  <q-btn flat color="primary">COMPLETE SIGNUP</q-btn>
                </template>
              </q-banner>
              <div class="text-h5 q-pb-md">Welcome</div>
              <q-card class="shadow-up-1">
                <q-card-section></q-card-section>
                <q-card-section class="q-ma-none">
                  <div class="box-ribbon-wrapper" style="margin-left:-17px;">
                    <q-ribbon
                      class="q-pb-md cursor-pointer text-subtitle1"
                      decoration="rounded-out"
                      background-color="secondary"
                      inline
                      leaf-color="darkgreen"
                      leaf-position="top"
                    >
                      <a href="#/tutortips" target="_blank" style="color:white;">
                        <q-avatar>
                          <img src="statics/grphImg2.png" />
                        </q-avatar>Read Tutring Tips To Booste Your Rank.
                      </a>
                    </q-ribbon>
                  </div>
                </q-card-section>
              </q-card>
              <div class="text-h5 text-grey-9 q-py-md">My Request(s)</div>
              <q-card>
                <q-card-section>
                  <q-item class="q-my-lg">
                    <q-item-section top avatar class="show">
                      <q-avatar color="grey-3" text-color="grey-5" style="font-size: 6em;">
                        <q-icon style="font-size: 1em" name="mail" />
                      </q-avatar>
                    </q-item-section>

                    <q-item-section>
                      <q-item-label class="text-h6 q-pb-md">You have active request(s).</q-item-label>
                      <q-item-label>
                        <b class="text-red">NOTE:</b> When students send you tutoring request, they will expect a prompt response. Top tutors respond within 5 hours or less.
                      </q-item-label>
                    </q-item-section>
                  </q-item>
                </q-card-section>
              </q-card>
              <div class="text-h5 text-grey-9 q-py-md">Create Course(s)</div>
              <q-card>
                <q-card-section>
                  <q-item class="q-my-lg">
                    <q-item-section top avatar class="show">
                      <q-avatar color="grey-3" text-color="grey-5" style="font-size: 6em;">
                        <!-- <q-icon style="font-size: 1em" name="mail" /> -->
                        <img src="statics/crsIcn.png" alt="icon" />
                      </q-avatar>
                    </q-item-section>

                    <q-item-section>
                      <q-item-label class="text-h6 q-pb-md">
                        You have
                        <a class="no-line" href="/#/manage-course" target="_blank">5</a> course(s). See how to
                        <a
                          href="#"
                          traget="_blank"
                          class="no-line"
                        >create new course</a> to maximize your earning.
                      </q-item-label>
                    </q-item-section>
                  </q-item>
                </q-card-section>
              </q-card>
              <div class="text-h5 text-grey-9 q-py-md">Payment History</div>
              <q-card>
                <q-card-section style="display:none;">
                  <q-item class="q-my-lg">
                    <q-item-section top avatar class="show">
                      <q-avatar color="grey-3" text-color="grey-5" style="font-size: 6em;">
                        <img src="statics/pymntIcn.png" alt="icon" />
                      </q-avatar>
                    </q-item-section>

                    <q-item-section>
                      <q-item-label class="text-h6 q-pb-md">You have no payment information</q-item-label>
                    </q-item-section>
                  </q-item>
                </q-card-section>
                <q-card-section>
                  <div class="row text-center">
                    <div class="col-4 col-md-4 col-xs-12 q-pa-md border rounded-borders">
                      <div class="text-blue-10 text-bold text-h6 text-grey-8">Panding Balance</div>
                      <q-separator class="q-mb-md" inset />
                      <div class="text-amber-10">US $ 550.00</div>
                    </div>
                    <div class="col-4 col-md-4 col-xs-12 q-pa-md border rounded-borders">
                      <div class="text-blue-10 text-bold text-h6 text-grey-8">Last Payment</div>

                      <q-separator class="q-mb-md" inset />
                      <div class="text-blue-10 text-bold">US $ 400.00</div>
                      <div class="text-thin">was sent 24-12-2019</div>
                    </div>
                    <div class="col-4 col-md-4 col-xs-12 q-pa-md border rounded-borders">
                      <div class="text-blue-10 text-bold text-h6 text-grey-8">Payment Status</div>
                      <q-separator class="q-mb-md" inset />
                      <div class="text-green-10">Eligible for Payments</div>
                    </div>
                  </div>
                </q-card-section>
              </q-card>
            </div>
</template>

<script>
    export default {
        data() {
    return {
      right: false,
      link: "req",
      left: false,
      slide: 1,
      exams: 1
    };
  }, 
    }
</script>

<style lang="css" scoped>
a {
  text-decoration: none;
  color: #04b1ed;
}

.hide {
  display: none;
}

.show {
  display: inline;
}
.border {
  border: none;
}
.my-card {
  width: 100%;
  /* max-width: 430px; */
}

@media only screen and (min-width: 0px) and (max-width: 900px) {
  .hide {
    display: inline;
  }

  .show {
    display: none;
  }
  .border {
    border: 1px solid #d1d1d1;
    margin: 5px;
  }
}

@media only screen and (min-width: 899px) and (max-width: 1280px) {
}
</style>
