<script setup lang="ts">
  const props = defineProps(["invoice"])
</script>

<template>
  <div class="print-preview-header">
    <div class="logo-container"> 
      <img src="../assets/placeholderlogo.png"/>
    </div>

    <div> 
      <div class="firm-name">
        <p>{{ props.invoice.IssuerFirmName }}</p>
      </div>
      <div class="firm-address">
        {{ props.invoice.IssuerFirmAddress }}
      </div>
    </div>

    <div class="header-col3"> 
      <div class="firm-contact">
        <div class="label">
          <span><strong>Phone:</strong></span>
          <span>{{ props.invoice.IssuerFirmPhone }}</span>
        </div>
        <div class="label">
          <span><strong>Email:</strong></span>
          <span>{{ props.invoice.IssuerFirmEmail }}</span>
        </div>
        <div class="label">
          <span><strong>Website:</strong></span>
          <span>{{ props.invoice.IssuerFirmWebsite }}</span>
        </div>
        <div class="label">
          <span><strong>GSTIN:</strong></span>
          <span>{{ props.invoice.IssuerFirmGstin }}</span>
        </div>
      </div>
      <div class="qr-container"> 
        <img src="../assets/placeholderqr.png"/>
      </div>
    </div>
  </div>
</template>

<style>
.print-preview-header {
  display: grid;
  grid-template-columns: 1.7in 2.4in auto;
  grid-column-gap: 1em;
  width: 100%;
  margin-bottom: 1em;
}
.logo-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  max-width: 1.7in;
}
.logo-container img {
  max-width: 100%;
  max-height: 100%;
}
.firm-name {
  height: 2em;
}
.firm-name p {
  line-height: 0.8em;
  font-size: 1.6em;
  font-weight: bold;
}
.firm-address {
  font-size: 0.9em;
  line-height: 1.2em;
  white-space: pre-wrap;
}
.header-col3 {
  display: grid;
  grid-template-columns: auto 0.8in;
}
.firm-contact {
  display: flex;
  flex-direction: column;
  font-size: 0.9em;
}
.firm-contact .label {
  display: grid;
  grid-template-columns: 4.5em auto;
}
.qr-container {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  width: 100%;
}
.qr-container img {
  max-width: 100%;
}
</style>
