<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
@page {
  size: letter;
  margin: 0.5cm;
}

body {
  font-family: Arial, sans-serif;
  line-height: 1.2;
  font-size: 9pt;
}

.header {
  text-align: center;
  margin-bottom: 10px;
}

.header h1 {
  margin-bottom: 2px;
  font-size: 12pt;
}

.header p {
  color: #666;
  margin: 0;
  font-size: 8pt;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  border: 2px solid #000;
}

th {
  background-color: #f5f5f5;
  padding: 4px;
  text-align: left;
  border: 1px solid #000;
  font-size: 8pt;
  font-weight: bold;
}

td {
  padding: 3px;
  border: 1px solid #000;
  font-size: 9pt;
}

tr:hover {
  background-color: #f9f9f9;
}

.foil {
  font-weight: bold;
  background-color: #e0e0e0;
}

.multiple {
  font-style: italic;
}

.foil.multiple {
  font-weight: bold;
  font-style: italic;
  background-color: #e0e0e0;
}

.quantity {
  text-align: center;
  width: 30px;
}

.set {
  width: 150px;
}

.rarity {
  width: 30px;
  text-align: center;
}

.card-number {
  width: 50px;
  text-align: center;
}

.product-name {
  width: 200px;
}

/* Add alternating row colors */
tbody tr:nth-child(even) {
  background-color: #f0f0f0;
}

/* Ensure hover effect works with alternating colors */
tbody tr:hover {
  background-color: #e0e0e0;
}
</style>
</head>
<body>
  <div class="header">
    <h1>Pull Sheet</h1>
    <p>Generated on {{ generation_date }}</p>
  </div>

  <table>
    <thead>
      <tr>
        <th class="product-name">Product Name</th>
        <th class="quantity">Qty</th>
        <th class="set">Set</th>
        <th class="rarity">Rarity</th>
        <th class="card-number">Card #</th>
      </tr>
    </thead>
    <tbody>
      {% for item in items %}
      <tr class="{{ 'foil' if 'Foil' in item.condition else '' }} {{ 'multiple' if item.quantity|int > 1 else '' }}">
        <td class="product-name">{{ item.product_name }}</td>
        <td class="quantity">{{ item.quantity }}</td>
        <td class="set">{{ item.set }}</td>
        <td class="rarity">{{ item.rarity }}</td>
        <td class="card-number">{{ item.card_number }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</body>
</html> 