<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
/* Setting up the page size for landscape orientation - 6x4 inches */
@page {
  size: 6in 4in;  /* Landscape orientation */
  margin: 0;
}

/* Force page breaks after each label */
body {
  margin: 0;
  padding: 0;
  width: 6in;  /* Adjusted for landscape */
  height: 4in; /* Adjusted for landscape */
  position: relative;
  font-family: Arial, sans-serif;
}

.label-container {
  width: 100%;
  height: 100%;
  position: relative;
  box-sizing: border-box;
  padding: 0.25in;
  page-break-after: always;  /* Ensures a page break after each label */
}

/* Return address image in top left */
.return-address {
  position: absolute;
  top: 0.25in;
  left: 0.25in;
  width: 2.75in;
  height: 0.85in;
  object-fit: contain;
}

/* Stamp area in top right */
.stamp-area {
  position: absolute;
  top: 0.25in;
  right: 0.25in;
  width: 0.8in;
  height: 0.9in;
  border: 1px dashed #999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.stamp-text {
  font-size: 8pt;
  color: #999;
  text-align: center;
}

/* Main address centered in the middle */
.address {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 3.5in;
  text-align: center;
}

.recipient-name {
  font-size: 14pt;
  font-weight: bold;
  margin-bottom: 0.1in;
}

.address-line {
  font-size: 12pt;
  line-height: 1.3;
  margin-bottom: 0.05in;
}

.city-line {
  font-size: 12pt;
  font-weight: bold;
  text-transform: uppercase;
}
</style>
</head>
<body>
  <div class="label-container">
    <img src="{{ return_address_path }}" class="return-address" alt="Return Address">
    
    <div class="stamp-area">
      <span class="stamp-text">PLACE<br>STAMP<br>HERE</span>
    </div>
    
    <div class="address">
      <div class="recipient-name">{{ recipient_name }}</div>
      <div class="address-line">{{ address_line1 }}</div>
      {% if address_line2 %}<div class="address-line">{{ address_line2 }}</div>{% endif %}
      <div class="city-line">{{ city }}, {{ state }} {{ zip_code }}</div>
    </div>
  </div>
</body>
</html>
