<template>
  <div>
    <div class="block">
      <svg
        class="block-svg flex flex-center"
        fill="none"
        height="100%"
        width="100%"
        xmlns="http://www.w3.org/2000/svg"
        preserveAspectRatio="none"
      >
        <path :d="clipPath" fill="#D9D9D9" fill-opacity=".8" />
      </svg>
      <q-card class="block-card flex flex-center bg-transparent">
        <q-card-section class="row items-center">
          <q-avatar icon="signal_wifi_off" color="primary" text-color="white" />
          <span class="q-ml-sm">
            You are currently not connected to any network.
          </span>
        </q-card-section>
        <q-card-actions align="right">
          <q-btn flat label="Cancel" color="primary" v-close-popup />
          <q-btn flat label="Turn on Wifi" color="primary" v-close-popup />
        </q-card-actions>
      </q-card>
    </div>
    <q-resize-observer @resize="onResize" />
  </div>
</template>

<script>
export default {
  name: "blockWithCroppedCorners",
  setup() {
    return {};
  },
  data() {
    return {
      clipPath: null,
      viewBox: null,
      cathetus: 13,
    };
  },

  methods: {
    onResize(size) {
      console.log(size);
      const { width, height } = size;
      this.clipPath = `M${this.cathetus},0 H${width} V${
        height - this.cathetus
      } L${height - this.cathetus},${width} L0,${width} L0,${this.cathetus}Z `;
      this.viewBox = `0 0 ${height} ${width}`;
    },
  },
};
</script>
<style scoped>
.block {
  display: grid !important;
  position: relative;
}
.block-svg,
.block-card {
  grid-area: 1/-1;
}
</style>
