<template>
    <v-container fluid class="body-color">

      <!-- **** Id Card Select options **** -->

      <v-card flat class="elevation-0 transparent">
        <v-form ref="form" v-model="valid" lazy-validation>
          <v-flex xs12 sm12 lg12>
            <v-layout wrap>

              <v-flex xs12 sm12 lg4>

                <v-layout>

                  <v-flex xs12 sm12 lg10 class="ml-2">

                    <v-autocomplete
                      v-model="getReport.role"

                      label="Select Type"

                      :items="getRoles"
                      item-text="name"
                      item-value="role"

                      @change="getRoleInputs(getReport.role)"
                      required
                    ></v-autocomplete>
                  </v-flex>
                </v-layout>
              </v-flex>

              <v-flex xs12 sm12 lg4 v-if="showClass">

                <v-layout>

                  <v-flex xs12 sm12 lg10 class="ml-2">

                    <v-select
                      v-model="getReport.classId"
                      label="Select Class"
                      :items="classList"
                      item-text="classNum"
                      item-value="_id"

                      @change="getSections(getReport.classId)"
                      required
                    ></v-select>
                  </v-flex>
                </v-layout>
              </v-flex>

              <v-flex xs12 sm12 lg4 v-if="showSections">

                <v-layout>

                  <v-flex xs12 sm12 lg10 class="ml-2">

                    <v-select
                      :items="addSection"
                      label="Select Section"
                      v-model="getReport.sectionId"
                      item-text="name"
                      item-value="_id"
                      name="Select Section"
                      @change="getStudents"

                      required
                    ></v-select>
                  </v-flex>
                </v-layout>
              </v-flex>

              <v-flex xs12 sm12 lg4 v-if="showStudents">

                <v-layout>

                  <v-flex xs12 sm12 lg10 class="ml-2">

                    <v-select

                      :items="getSelectUserData"

                      label="Select Student"
                      v-model="getReport._id"
                      item-text="name"
                      item-value="_id"

                      required
                    ></v-select>
                  </v-flex>
                </v-layout>
              </v-flex>

              <v-flex xs12 sm12 lg4 v-if="showTeacher">

                <v-layout>

                  <v-flex xs12 sm12 lg10 class="ml-2">

                    <v-select
                      v-model="getReport._id"
                      label="Select Teacher"

                      :items="getSelectUserData"

                      item-text="name"
                      item-value="_id"

                      required
                    ></v-select>
                  </v-flex>
                </v-layout>
              </v-flex>

              <v-flex xs12 sm12 lg4 v-if="showAdmin">

                <v-layout>

                  <v-flex xs12 sm12 lg10 class="ml-2">

                    <v-select
                      v-model="getReport._id"
                      label="Select Admin"

                      :items="getSelectUserData"

                      item-text="name"
                      item-value="_id"

                      required
                    ></v-select>
                  </v-flex>
                </v-layout>
              </v-flex>

              <v-flex xs12 sm12 lg4 v-if="showAccountant">

                <v-layout>

                  <v-flex xs12 sm12 lg10 class="ml-2">

                    <v-select
                      v-model="getReport._id"
                      label="Select Accountant"

                      :items="getSelectUserData"

                      item-text="name"
                      item-value="_id"

                      required
                    ></v-select>
                  </v-flex>
                </v-layout>
              </v-flex>

              <v-flex xs12 sm12 lg4 v-if="showLibrarian">

                <v-layout>

                  <v-flex xs12 sm12 lg10 class="ml-2">

                    <v-select
                      v-model="getReport._id"
                      label="Select Librarian"

                      :items="getSelectUserData "

                      item-text="name"
                      item-value="_id"

                      required
                    ></v-select>
                  </v-flex>
                </v-layout>
              </v-flex>

              <v-flex xs12 sm12 lg4>

                <v-layout>

                  <v-flex xs12 sm12 lg10 class="ml-2">

                    <v-autocomplete

                      label="Select View Type"

                      type="text"

                      :items="typeList"
                      v-model="getReport.form"
                      item-text="name"
                      item-value="value"

                      :rules="typeRules"

                      @change="getReportType(getReport.form)"

                      required
                    ></v-autocomplete>
                  </v-flex>
                </v-layout>
              </v-flex>

              <v-flex xs12 sm12 lg4>

                <v-btn
                  @click="getCards"
                  round
                  dark
                  :loading="loading"

                  class="open-dialog-button mt-3"

                >Get Report</v-btn>
              </v-flex>
            </v-layout>
          </v-flex>
        </v-form>
      </v-card>

      <div>

        <v-layout v-show="showReport">
          <v-flex xs12>
            <v-card class="transparent elevation-0">
              <v-layout>
                <v-flex xs12>
                  <v-btn class="open-dialog-button right" round dark @click="prindIDCardReport()">
                    Print
                    <v-icon right dark>print</v-icon>
                  </v-btn>
                </v-flex>
              </v-layout>

            </v-card>
            <v-container grid-list-md id="printMe">
              <v-layout class="col-sm-12">
                <div
                  style="font-family: arial;
                    max-width: 794px;
                    max-height: 1123px;
                    margin-left: auto;
                    margin-right: auto;
                    -webkit-print-color-adjust: exact;"
                >
                  <div
                    style="
                       float: left;
                       height: 520px;
                       width: 520px;
                       background: #fff;
                       border: 1px solid lightgray;
                       position:relative;"
                  >
                    <!-- bottom-right-side-image -->
                    <img
                      src="/static/icon/shape1.png"
                      alt="shape"
                      style="position:absolute;width: 90px;"
                    />
                    <!-- Front Side -->
                    <v-layout
                      style="
                       text-align: center;
                       margin-top: 50px;"
                      v-if="frontPart"
                    >
                      <v-flex xs12>
                        <!-- school Logo Url -->
                        <img
                          v-if="getCard.schoolLogoUrl"
                          :src="getCard.schoolLogoUrl"
                          alt="schoollogo"
                          style="
                           width: 110px;
                           margin-top:10px;
                           overflow:hidden"
                        />

                        <img
                          src="/static/default_thumb.png"
                          v-if="!getCard.schoolLogoUrl"
                          alt="schoollogo"
                          style="
                           width: 110px;
                           margin-top:10px;
                           overflow:hidden"
                        />

                        <v-layout style="margin:auto">
                          <!-- profile url -->
                          <img
                            v-if="getCard.profilePicUrl"
                            :src="getCard.profilePicUrl"
                            alt="profileImage"
                            style=";
                            width: 110px;
                            margin:10px auto;
                            width: 110px;
                            margin: 10px auto;
                            border: 3px solid #323232;
                            border-radius: 12px;"
                          />
                          <img
                            style=";
                          width: 110px;
                          margin:10px auto;
                          width: 110px;
                          margin: 10px auto;"
                            alt="dummy"
                            src="/static/icon/user.png"
                            v-if="!getCard.profilePicUrl && getCard.role != '2'"
                          />
                        </v-layout>
  
                        <p
                          style="color: #302653;font-size:24px;

                            letter-spacing: 4px;
                            margin-bottom:14px;"

                        >
                          <b>{{ getCard.name}}</b>

                        </p>

                        <p

                          style="color: #302653;
                            font-size:14px;
                            letter-spacing: 4px;
                            margin-bottom:14px;"

                        >
                          <b>{{ getCard.gender}}</b>

                        </p>

                        <p
                          v-if="getCard.classId"

                          style="color: #302653;
                            font-size:24px;
                            letter-spacing: 4px;
                            margin-bottom:14px;"

                        >{{ getCard.classId.classNum }}</p>
                        <p
                          v-if="getCard.classId"

                          style="color: #302653;
                            font-size:24px;
                            letter-spacing: 4px;
                            margin-bottom:14px;"

                        >{{ getCard.sectionId.name }}</p>
                        <p
                          v-if="getCard.rollNo"

                          style="color: #302653;
                             font-size:24px;
                            letter-spacing: 2px;
                            margin-bottom:10px;"

                        >Roll: {{ getCard.rollNo }}</p>
                        <p
                          v-if="getCard.joinDate"

                          style="color: #302653;
                            margin-bottom:10px;
                            font-size:16px;

                            letter-spacing: 2px;"
                        >{{ dates(getCard.joinDate) }}</p>
                        <p
                          v-if="getCard.joiningDate"

                          style="color: #302653;
                            margin-bottom:10px;
                            font-size:16px;

                            letter-spacing: 2px;"
                        >{{ dates(getCard.joiningDate) }}</p>
                        <p
                          v-if="getCard.phone"

                          style="color: #302653;
                            margin-bottom:10px;
                            font-size:16px;

                            letter-spacing: 2px;"
                        >{{ getCard.phone }}</p>
                        <p
                          style="
                          font-size: 19px;
                          font-weight: 100;
                          color: rgb(48, 38, 83);

                          letter-spacing: 5px;
                          margin-bottom:10px;"

                        >
                          <span v-if="getCard.mobile">{{ getCard.mobile}}</span>
                          <span v-if="getCard.mobileNo">{{ getCard.mobileNo }}</span>

                        </p>

                        <p
                          style="
                          font-size: 17px;
                          font-weight: 100;
                          color: rgb(48, 38, 83);

                          letter-spacing: 4px;
                          margin-bottom:14px;"

                        >{{ getCard.email}}</p>
                      </v-flex>
                    </v-layout>
                    <!-- back side -->
                    <v-layout style="
                       text-align: center;" v-if="backPart">
                      <v-flex xs12>
                        <!-- school Logo Url -->
                        <img
                          v-if="getCard.schoolLogoUrl"
                          :src="getCard.schoolLogoUrl"
                          alt="schoollogo"
                          style="
                           width: 110px;
                           margin-top:10px;
                           overflow:hidden"
                        />
                        <img
                          v-if="getCard.schoolId"
                          :src="getCard.schoolId.schoolLogoUrl"
                          alt="schoollogo"
                          style="
                           width: 110px;
                           margin-top:10px;
                           overflow:hidden"
                        />

                        <p
                          v-if="getCard.schoolLogoUrl"

                          style="color: #302653;
                            font-size:24px;
                            letter-spacing: 4px;
                            margin-bottom:14px;"

                        >
                          <b>{{ getCard.name}}</b>

                        </p>

                        <p
                          v-if="getCard.city"
                          style="
                          font-size: 17px;
                          font-weight: 100;
                          color: rgb(48, 38, 83);

                          letter-spacing: 4px;
                          margin-bottom:14px;"

                        >{{ getCard.city}}</p>
                        <p
                          style="
                          font-size: 17px;
                          font-weight: 100;
                          color: rgb(48, 38, 83);

                          letter-spacing: 4px;
                          margin-bottom:14px;"

                        >
                          {{ getCard.address }}
                          {{ getCard.presentAddress }}
                          <span
                            v-if="getCard.state"
                          >({{ getCard.state }})</span>

                        </p>

                        <p
                          v-if="getCard.establishmentYear"
                          style="
                          font-size: 17px;
                          font-weight: 100;
                          color: rgb(48, 38, 83);

                          letter-spacing: 4px;
                          margin-bottom:14px;"

                        >{{ getCard.establishmentYear }}</p>
                      </v-flex>
                    </v-layout>
                    <!-- bottom-right-side-image -->

                    <img

                      src="static/icon/shape2.png"
                      alt="shape2"
                      style="bottom: 0;
                        position: absolute;
                        right: 0;
                        width: 110px;"

                    />

                  </div>
                </div>

              </v-layout>

            </v-container>

          </v-flex>
        </v-layout>
      </div>

      <v-snackbar
        :timeout="timeout"
        :top="y === 'top'"
        :right="x === 'right'"
        :vertical="mode === 'vertical'"
        v-model="snackbar"
        :color="color"
      >{{ text }}</v-snackbar>

      <div class="loader" v-if="showLoader">
        <v-progress-circular indeterminate color="white"></v-progress-circular>
      </div>

    </v-container>
  </template>
  
  <script>
  import http from "@/Services/http.js";
  import moment from "moment";
  
  export default {
    data: () => ({

      showLoader: false,

      valid: true,
      report: {},
      userData: {},

      snackbar: false,
      color: "",
      y: "top",
      x: "right",
      mode: "",
      timeout: 10000,
      text: "",

      loading: false,
      showReport: false,
      frontPart: false,
      backPart: false,
      showClass: false,
      showTeacher: false,
      showAdmin: false,
      showAccountant: false,
      showLibrarian: false,
      hideprintIdCard: false,

      hidebackprintIdCard: false,

      showStudents: false,
      showSections: false,

      getRoles: [],
      classList: [],
      getCard: [],
      addSection: [],

      // getStudentsList:
      // teacherList: [],
      getSelectUserData: [],
      // Users: [],

      getReport: {},

      typeRules: [v => !!v || "Type is required"],

      typeList: [
        {
          name: "Front Part",
          value: "frontPart"
        },
        {
          name: "Back Part",
          value: "backPart"
        }
      ],
      backgroundList: ["Yes", "No"]
    }),
  
    mounted() {
      this.token = this.$store.state.token;
      this.getUserData();
      this.getRole();
    },
  
    methods: {

      dates: function(date) {
        return moment(date).format("MMMM DD, YYYY");
        return date;
      },
      getReportType() {

        if (this.getReport.form === "frontPart") {
          this.frontPart = true;
          this.backPart = false;
        }
        if (this.getReport.form === "backPart") {
          this.frontPart = false;
          this.backPart = true;
        }
      },
      getRoleInputs(role) {

        // console.log("role", role);

        this.showReport = false;
        this.getReport._id = "";
        this.getCard = "";

        if (role === 4) {
          // console.log("role", role);
          this.showClass = true;

          this.showTeacher = false;
          this.showAdmin = false;
          this.showAccountant = false;
          this.showLibrarian = false;
          this.showStudents = false;
          this.showSections = false;

          this.getClass();
        }
        if (role === 3) {
          this.showTeacher = true;

          this.showClass = false;
          this.showAdmin = false;
          this.showAccountant = false;
          this.showLibrarian = false;
          this.showStudents = false;
          this.showSections = false;

          this.getTeacherList();
        }
        if (role === 2) {
          this.showAdmin = true;

          this.showTeacher = false;
          this.showClass = false;
          this.showAccountant = false;
          this.showLibrarian = false;
          this.showStudents = false;
          this.showSections = false;

          this.getUserData();
        }
        if (role === 6) {
          this.showAccountant = true;

          this.showAdmin = false;
          this.showTeacher = false;
          this.showClass = false;
          this.showLibrarian = false;
          this.showStudents = false;
          this.showSections = false;

          this.getUsersList(role);

        }
        if (role === 7) {
          this.showLibrarian = true;

          this.showAccountant = false;
          this.showAdmin = false;
          this.showTeacher = false;
          this.showClass = false;
          this.showStudents = false;
          this.showSections = false;

          this.getUsersList(role);

        }
      },
  
      prindIDCardReport() {
        // Pass the element id here
        this.$htmlToPaper("printMe");
      },
      getUserData() {

        this.getSelectUserData = [];

        this.showLoader = true;

        http()
          .get("/getParticularUserDetail")
          .then(response => {

            let mergeObj = {
              name: "Select All",
              id: "Select All"
            };
            this.getSelectUserData.push(mergeObj);
            let getUserDetails = response.data.data;
            this.getSelectUserData.push(getUserDetails);

            this.showLoader = false;

            // this.adminList = response.data.data;
          })
          .catch(error => {

            this.showLoader = false;

            if (error.response.status === 401) {
              this.$router.replace({ path: "/" });
              this.$store.dispatch("setToken", null);
              this.$store.dispatch("Id", null);
            }

          });
      },
      getRole() {
        this.showLoader = true;
        http()
          .get("/getRolesList", {
            headers: { Authorization: "Bearer " + this.token }
          })
          .then(response => {

            var getRoles = [];
            getRoles = response.data.data;

            for (let i = 0; i < getRoles.length; i++) {
              if (getRoles[i].role != "1" && getRoles[i].role != "5") {
                this.getRoles.push(getRoles[i]);
              }

            }

            this.showLoader = false;
          })
          .catch(error => {
            this.showLoader = false;

            if (error.response.status === 401) {
              this.$router.replace({ path: "/" });
              this.$store.dispatch("setToken", null);
              this.$store.dispatch("Id", null);
              this.$store.dispatch("Role", null);
            }

          });
      },
      getClass() {

        // console.log("get classes");

        this.showLoader = true;
        http()
          .get("/getClassesList", {
            headers: { Authorization: "Bearer " + this.token }
          })
          .then(response => {
            this.classList = response.data.data;
            this.showLoader = false;
          })
          .catch(error => {
            this.showLoader = false;
            // console.log("err====>", err);
          });
      },
      getSections(_id) {
        this.showLoader = true;
        http()
          .get(
            "/getSectionsList",
            { params: { classId: _id } },
            {
              headers: { Authorization: "Bearer " + this.token }
            }
          )
          .then(response => {
            this.addSection = response.data.data;

            this.showSections = true;

            this.showLoader = false;
          })
          .catch(err => {
            this.showLoader = false;
            // console.log("err====>", err);
          });
      },
      getStudents() {

        this.getSelectUserData = [];

        this.showLoader = true;
        http()
          .get("/getStudentWithClass", {
            params: {
              classId: this.getReport.classId,
              sectionId: this.getReport.sectionId
            }
          })
          .then(response => {

            response.data.data.unshift({
              name: "Select All",
              _id: "Select All"
            });
            this.getSelectUserData = response.data.data;

            this.showStudents = true;

            this.showLoader = false;
          })
          .catch(error => {
            console.log("err====>", error);
            this.showLoader = false;
          });
      },
      getCards() {

        console.log("this.getSelectUserData", this.getSelectUserData);
        var getSelectUserId = [];
        for (let i = 0; i < this.getSelectUserData.length; i++) {
          console.log("this.getReport._id", this.getReport._id);
          if (this.getReport._id === this.getSelectUserData[i]._id) {
            console.log(
              "this.getSelectUserData[i]._id------------",
              this.getSelectUserData[i]._id
            );
            getSelectUserId.push(this.getSelectUserData[i]._id);
          } else if (this.getReport._id == "Select All") {
            console.log(
              "this.getSelectUserData[i]._id)",
              this.getSelectUserData[i]._id
            );
            getSelectUserId.push(this.getSelectUserData[i]._id);
            if (getSelectUserId[0] == undefined) {
              delete getSelectUserId[0];
            }
          }
        }
        console.log(
          // "this.getSelectUserData[i]._id",/
          // this.getSelectUserData[i]._id,
          "getSelectUserId",
          getSelectUserId
        );

        if (this.$refs.form.validate()) {

          this.showLoader = true;

          http()
            .get("/getIdCardDetail", {
              headers: {
                Authorization: "Bearer " + this.token
              },
              params: {

                profileId: getSelectUserId,

                role: this.getReport.role
              }
            })
            .then(response => {
              this.getCard = "";
              var data = response.data.data;
              if (
                Object.keys(data.adminData).length != 0 &&
                data.adminData.constructor === Object
              ) {
                this.getCard = response.data.data.adminData;

                // console.log("this.getCard ", this.getCard);

              }
              if (
                Object.keys(data.teachersData).length != 0 &&
                data.teachersData.constructor === Object
              ) {
                this.getCard = response.data.data.teachersData;

                // console.log("this.getCard--teachersData ", this.getCard);

              }
              if (
                Object.keys(data.studentData).length != 0 &&
                data.studentData.constructor === Object
              ) {
                this.getCard = response.data.data.studentData;

                // console.log("this.getCard--studentData ", this.getCard);

              }
              if (
                Object.keys(data.usersData).length != 0 &&
                data.usersData.constructor === Object
              ) {
                this.getCard = response.data.data.usersData;

                // console.log("this.getCard--usersData   ", this.getCard);

              }
              // console.log("this.getCard--all ", response.data.data);
              this.showLoader = false;
              this.showReport = true;
            })
            .catch(error => {
              this.showLoader = false;

              // console.log("error", error.response.data.errors);

              if (error.response.data.errors) {
                this.snackbar = true;
                this.text = " Field is required";
                this.color = "error";
              }
            });
        }

      },
      getTeacherList() {

        this.getSelectUserData = [];

        this.showLoader = true;
        var token = this.$store.state.token;
        http()
          .get("/getTeachersList", {
            headers: { Authorization: "Bearer " + token }
          })
          .then(response => {

            response.data.data.unshift({
              name: "Select All",
              _id: "Select All"
            });
            this.getSelectUserData = response.data.data;

            this.showLoader = false;
          })
          .catch(error => {
            this.showLoader = false;
            if (error.response.status === 401) {
              this.$router.replace({ path: "/" });
              this.$store.dispatch("setToken", null);
              this.$store.dispatch("Id", null);
            }
          });
      },

      getUsersList(role) {

        this.getSelectUserData = [];

        this.showLoader = true;
        var token = this.$store.state.token;
        http()

          .get("/getUsersList?role=" + role, {

            headers: { Authorization: "Bearer " + token }
          })
          .then(response => {

            response.data.data.unshift({
              name: "Select All",
              _id: "Select All"
            });
            this.getSelectUserData = response.data.data;

            this.showLoader = false;
          })
          .catch(error => {
            this.showLoader = false;
            if (error.response.status === 401) {
              this.$router.replace({ path: "/" });
              this.$store.dispatch("setToken", null);
              this.$store.dispatch("Id", null);
            }
          });
      },
      getParentDetails() {
        http()
          .get("getParentsList", {
            headers: {
              Authorization: "Bearer " + this.$store.state.token
            }
          })
          .then(response => {
            this.parentsList = response.data.data;
          })
          .catch(error => {
            // console.log("err====>", error.response.data.message);
            this.showLoader = false;
            if (error.response.status === 401) {
              this.$router.replace({ path: "/" });
              this.$store.dispatch("setToken", null);
              this.$store.dispatch("Id", null);
              this.$store.dispatch("Role", null);
            }
          });
      }
    }
  };
  </script>
  
  <style scoped>
  .Data {
    width: 100%;
    float: left;
    margin-bottom: 0px;
    padding: 0 15px;
    font-size: 14px;
    margin-top: 5px;
    text-align: justify;
  }

  .idcardreport {
    font-family: arial;
    max-width: 794px;
    max-height: 1123px;
    margin-left: auto;
    margin-right: auto;
    -webkit-print-color-adjust: exact;
  }

  .idcardreport1 {
    text-align: center;
    margin-left: 35%;
  }

  .icard-front {
    margin: 3px;

    float: left;

    padding: 10px;

    text-align: center;

    height: 520px;
    width: 520px;
    background: #fff;
    border: 1px solid lightgray;

  }
  .print-data {
    margin: 3px;
    float: left;
    /* border: 1px solid #000; */

    padding: 10px;

    /* width: 55%; */

    text-align: center;

    height: 95%;
  }

  .rightside {
    float: right !important;
  }

  .icard-front h2 {

    font-size: 30px;
  }
  .icard-back h2 {
    font-size: 30px;
  }
  .print-data h2 {
    font-size: 30px;
    text-align: center;
  }
  .print-data img {
    width: 70px;
    height: 70px;
    margin-bottom: 5px;

  }
  .icard-front img {

    width: 70px;
    height: 70px;
    margin-bottom: 5px;
  }
  .icard-back img {
    width: 50px;
    height: 50px;
    margin-bottom: 5px;
  }
  .icard-img {

    width: 50px;
    height: 50px;
    margin-bottom: 5px;

    margin-top: 5px;
    border: 1px solid #ddd;

  }
  .icard-data {

    /* font-family: Arial; */

    max-width: 794px;
    max-height: 1123px;
    margin-left: auto;
    margin-right: auto;
    -webkit-print-color-adjust: exact;
  }
  .icard-back {
    margin: 3px;

    /* float: left; */
    /* border: 1px solid #000; */
    padding: 10px;
    /* width: 55%; */
    text-align: center;
    /* height: 95%; */
    /* margin-top: 35%; */
  }
  .back-icard {
    margin: 3px;

    padding: 10px;

  }
  .icard-back h3 {
    background-color: #000;
    color: #fff;
    font-size: 13px;
    padding: 5px 0px;
    margin: 5px;
    margin-top: 13px;
  }
  .icard-back h5 {
    font-size: 11px;
    color: #000;
    font-weight: bold;
    padding: 5px 0px;
  }

  /* .icard-back p {

    font-size: 15px;
    color: #000;
    font-weight: 500px;
    line-height: 17px;

  } */

  .school-address {
    /* width: 40%; */
    font-weight: 500px;
    color: #000;
  }

  .address {
    font-weight: 500px;
    color: #000;
    text-align: center;
  }

  .icard-bottom {
    padding-top: 5px;
    text-align: center;
  }
  .qrcode {
    float: left;
    width: 50%;
  }
  .qrcode img {
    width: 60px;
    height: 60px;

    margin-top: 15px;

  }
  .session {
    float: right;
    width: 70%;

    margin-top: 15px;

  }
  @media screen and (max-width: 360px) {
    .icard-front {
      width: 316px;
      height: 418px;
      float: inherit;
    }
    .icard-back {
      float: left;
    }
  }
  </style>