<template>
  <transition appear enter-active-class="animated slideInRight" leave-active-class="hidden">
    <div class="q-pa-sm">
      <div class="text-h5 q-pb-md">Proposal(s) for my connect request</div>
      <div class="row">
        <div class="col-12 col-md-12">
          <q-card class="my-card">
            <q-card-section>
              <div class="row">
                <div class="col-2 col-md-2 col-sm-12 col-xs-12 q-pa-sm text-bold">My Request: </div>
                <div class="col-9 col-md-9 col-sm-12 col-xs-12 q-pa-xs text-body1 text-grey-9 ellipsis-2-lines">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo et veniam eius, quos mollitia, ad optio sit nisi blanditiis delectus quibusdam laborum nihil, nam reiciendis laudantium fugiat magnam rerum ea.</div>
              </div>
            </q-card-section>
            <q-card-section>
              <div class="text-body1">Showing active proposal(s) by tutor(s)</div>
            </q-card-section>
            <q-card-section>
              <q-markup-table  class="no-shadow" style="border:1px solid #d1d1d1;">
              <thead>
                <tr>
                  <th class="text-left text-uppercase">Tutor(s)</th>
                  <th class="text-left text-uppercase">Proposal(s)</th>
                  <th class="text-right text-uppercase">date</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td class="text-left">
                    <q-avatar class="q-mx-md">
                      <img src="statics/photo1.jpg" alt="Tutor Photo">
                    </q-avatar>
                    Dr. Natasha Joe
                  </td>
                  <td class="text-left">
                    <div class="ellipsis" style="width: 350px;">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perferendis ad deleniti officia possimus sint esse sit quas et alias earum molestiae excepturi, id maxime suscipit ullam. Nisi atque praesentium et.</div>
                    <div
                      class="text-blue-5 cursor-pointer hover float-right"
                      @click="dialog = true"
                    >Go to proposal</div>
                  </td>
                  <td class="text-right">
                    2020-04-30
                  </td>
                </tr>
                 <tr>
                  <td class="text-left">
                    <q-avatar class="q-mx-md">
                      <img src="statics/photo2.jpg" alt="Tutor Photo">
                    </q-avatar>
                    Dr. Natasha Joe
                  </td>
                  <td class="text-left">
                    <div class="ellipsis" style="width: 350px;">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perferendis ad deleniti officia possimus sint esse sit quas et alias earum molestiae excepturi, id maxime suscipit ullam. Nisi atque praesentium et.</div>
                    <div
                      class="text-blue-5 cursor-pointer hover float-right"
                      @click="dialog = true"
                    >Go to proposal</div>
                  </td>
                  <td class="text-right">
                    2020-04-30
                  </td>
                </tr>
                 <tr>
                  <td class="text-left">
                    <q-avatar class="q-mx-md">
                      <img src="statics/photo3.jpg" alt="Tutor Photo">
                    </q-avatar>
                    Dr. Natasha Joe
                  </td>
                  <td class="text-left">
                    <div class="ellipsis" style="width: 350px;">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perferendis ad deleniti officia possimus sint esse sit quas et alias earum molestiae excepturi, id maxime suscipit ullam. Nisi atque praesentium et.</div>
                    <div
                      class="text-blue-5 cursor-pointer hover float-right"
                      @click="dialog = true"
                    >Go to proposal</div>
                  </td>
                  <td class="text-right">
                    2020-04-30
                  </td>
                </tr>
                 <tr>
                  <td class="text-left">
                    <q-avatar class="q-mx-md">
                      <img src="statics/photo4.jpg" alt="Tutor Photo">
                    </q-avatar>
                    Dr. Natasha Joe
                  </td>
                  <td class="text-left">
                    <div class="ellipsis" style="width: 350px;">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perferendis ad deleniti officia possimus sint esse sit quas et alias earum molestiae excepturi, id maxime suscipit ullam. Nisi atque praesentium et.</div>
                    <div
                      class="text-blue-5 cursor-pointer hover float-right"
                      @click="dialog = true"
                    >Go to proposal</div>
                  </td>
                  <td class="text-right">
                    2020-04-30
                  </td>
                </tr>
              </tbody>
            </q-markup-table>
            </q-card-section>
          </q-card>
        </div>
      </div>
      <q-dialog v-model="dialog">
        <q-card style="width: auto; max-width: 80vw; max-height: 100vh;">
          <q-card-section class="row items-center q-pb-none">
            <div class="text-h6 text-grey-9">Request Details</div>
            <q-space />
            <q-btn icon="close" flat round dense v-close-popup />
          </q-card-section>
          <q-card-section class="row">
            <div class="col-3 col-md-3 col-xs-6 q-pa-sm">
              <div class="text-bold text-grey-8 q-pb-xs">Tutor:</div>
              <div class="text-body1 text-grey-8 q-pb-xs">Asim Khan</div>
            </div>
            <div class="col-3 col-md-3 col-xs-6 q-pa-sm">
              <div class="text-bold text-grey-8 q-pb-xs">Start Date:</div>
              <div class="text-body1 text-grey-8 q-pb-xs">2020/02/22</div>
            </div>
            <div class="col-3 col-md-3 col-xs-6 q-pa-sm">
              <div class="text-bold text-grey-8 q-pb-xs">Expiry Date:</div>
              <div class="text-body1 text-grey-8 q-pb-xs">2020/03/01</div>
            </div>
            <div class="col-3 col-md-3 col-xs-6 q-pa-sm">
              <div class="text-bold text-grey-8 q-pb-xs">Phone Number:</div>
              <div class="text-body1 text-grey-8 q-pb-xs">(+996) 123 45678</div>
            </div>
            <div class="col-12 col-md-12 q-pa-sm">
              <div class="text-bold text-grey-8 q-pb-xs">My Message:</div>
              <div
                class="text-body1 text-grey-8 q-pb-xs"
              >Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ad quod eos necessitatibus id, reprehenderit laboriosam perspiciatis?</div>
              <div
                class="text-body1 text-grey-8 q-pb-xs"
              >Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ad quod eos necessitatibus id, reprehenderit laboriosam perspiciatis? Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe reprehenderit placeat unde non numquam ad sequi ea, aperiam, sint ratione corrupti eveniet. Debitis, ullam! Ipsa vero quam in unde hic.</div>
            </div>

            <div class="col-12">
              <div class="text-h6 q-py-md">Course Content:</div>
              <q-markup-table dense>
                <tbody>
                  <tr>
                    <td>Physician/MOH UAE/General Practitioner (GP)/Internal Medicine/Respiratory</td>
                  </tr>
                  <tr>
                    <td>Physician/MOH UAE/General Practitioner (GP)/Internal Medicine/Infectious Disease</td>
                  </tr>
                  <tr>
                    <td>Physician/MOH UAE/General Practitioner (GP)/Internal Medicine/Endocrinology</td>
                  </tr>
                </tbody>
              </q-markup-table>
            </div>
            <div class="col-12">
              <div class="text-h6 q-py-md">Days &amp; Time:</div>
              <q-markup-table dense>
                <tbody>
                  <tr>
                    <td>Sunday/15:56:00 - 15:56:00</td>
                  </tr>
                  <tr>
                    <td>Sunday/15:56:00 - 15:56:00</td>
                  </tr>
                  <tr>
                    <td>Sunday/15:56:00 - 15:56:00</td>
                  </tr>
                  <tr>
                    <td>Sunday/15:56:00 - 15:56:00</td>
                  </tr>
                </tbody>
              </q-markup-table>
            </div>
          </q-card-section>
          <q-card-section>
            <div class="col-12 flex flex-center"><q-btn
              class="q-ma-sm"
              outline
              color="white"
              text-color="primary"
              label="Cancel"
              @click="dialog = false"
            /></div>
          </q-card-section>
        </q-card>
      </q-dialog>
    </div>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      stdname: "",
      dialog: false
    };
  }
};
</script>

<style lang="css" scoped>
.hide {
  display: none;
}
a {
  text-decoration: none;
}
.show {
  display: inline;
}
.hover {
  filter: grayscale(0);
  transition: all 0.3s ease;
}
.hover:hover {
  filter: grayscale(100%);
  transition: all 0.3s ease;
}

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

  .show {
    display: none;
  }
}

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