<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Green Sheet - Pallet {{ doc.pallet_number }}</title>
    <style>
        @page { size: letter; margin: 0.5in; }
        body { font-family: Arial, sans-serif; font-size: 11pt; }
        .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border: 3px solid #28a745; padding: 15px; }
        .logo { max-width: 200px; }
        .title { font-size: 28pt; font-weight: bold; color: #28a745; }
        .subtitle { font-size: 14pt; color: #666; }
        table { width: 100%; border-collapse: collapse; margin: 15px 0; }
        th, td { border: 1px solid #000; padding: 8px; text-align: left; }
        th { background-color: #f0f0f0; font-weight: bold; }
        .section { margin: 20px 0; }
        .section-title { font-size: 14pt; font-weight: bold; background: #28a745; color: white; padding: 5px 10px; margin-bottom: 10px; }
        .info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 15px; }
        .info-field { border: 1px solid #ccc; padding: 8px; }
        .info-label { font-size: 9pt; color: #666; margin-bottom: 3px; }
        .info-value { font-size: 11pt; font-weight: bold; }
        .footer { margin-top: 30px; border-top: 2px solid #28a745; padding-top: 10px; font-size: 9pt; color: #666; }
        .service-level { font-size: 24pt; font-weight: bold; color: #d63384; text-transform: uppercase; border: 3px solid #d63384; padding: 10px; text-align: center; margin: 15px 0; }
        .checkbox { display: inline-block; width: 18px; height: 18px; border: 2px solid #000; margin-right: 5px; }
        .checked { background: #000; }
        .warning { background: #fff3cd; border: 2px solid #ffc107; padding: 10px; margin: 15px 0; font-weight: bold; }
    </style>
</head>
<body>
    <div class="header">
        <div>
            <div class="title">GREEN SHEET</div>
            <div class="subtitle">Data-Bearing Equipment Tracking</div>
        </div>
        <div style="text-align: right;">
            <div><strong>Pallet #:</strong> {{ doc.pallet_number or '______________' }}</div>
            <div><strong>Load #:</strong> {{ doc.load or '______________' }}</div>
            <div><strong>Date Received:</strong> {{ doc.received_date or '______________' }}</div>
        </div>
    </div>

    {% if doc.service_level %}
    <div class="service-level">
        SERVICE LEVEL: {{ doc.service_level }}
    </div>
    {% endif %}

    <div class="section">
        <div class="section-title">Customer Information</div>
        <div class="info-grid">
            <div class="info-field">
                <div class="info-label">Customer Name</div>
                <div class="info-value">{{ doc.customer_name or '________________' }}</div>
            </div>
            <div class="info-field">
                <div class="info-label">Customer #</div>
                <div class="info-value">{{ doc.customer_number or '________________' }}</div>
            </div>
            <div class="info-field">
                <div class="info-label">Address</div>
                <div class="info-value">{{ doc.customer_address or '________________' }}</div>
            </div>
            <div class="info-field">
                <div class="info-label">Contact/Phone</div>
                <div class="info-value">{{ doc.contact_phone or '________________' }}</div>
            </div>
        </div>
    </div>

    <div class="section">
        <div class="section-title">Pallet Details</div>
        <div class="info-grid">
            <div class="info-field">
                <div class="info-label">Status</div>
                <div class="info-value">{{ doc.status or 'Received' }}</div>
            </div>
            <div class="info-field">
                <div class="info-label">Data Status</div>
                <div class="info-value">{{ doc.data_status or 'D0' }}</div>
            </div>
            <div class="info-field">
                <div class="info-label">Inbound Weight (lbs)</div>
                <div class="info-value">{{ doc.inbound_weight or '____' }}</div>
            </div>
            <div class="info-field">
                <div class="info-label">Technician</div>
                <div class="info-value">________________</div>
            </div>
        </div>
        <div style="margin-top: 10px; font-size: 12pt;">
            <span class="checkbox {% if doc.certificate %}checked{% endif %}"></span> <strong>COR/AoR</strong>
            <span style="margin-left: 20px;">
                <span class="checkbox"></span> <strong>RED/R2</strong>
            </span>
            <span style="margin-left: 20px;">
                <span class="checkbox"></span> <strong>AoR/COD</strong>
            </span>
        </div>
    </div>

    <div class="section">
        <div class="section-title">Device List</div>
        <table>
            <thead>
                <tr>
                    <th style="width: 20%;">Serial #</th>
                    <th style="width: 15%;">Device Type</th>
                    <th style="width: 15%;">Manufacturer</th>
                    <th style="width: 15%;">Model</th>
                    <th style="width: 15%;">Erasure Method</th>
                    <th style="width: 10%;">Result</th>
                    <th style="width: 10%;">Grade</th>
                </tr>
            </thead>
            <tbody>
                {% for device in doc.devices %}
                <tr>
                    <td>{{ device.serial_number or '________________' }}</td>
                    <td>{{ device.device_type or '________' }}</td>
                    <td>{{ device.manufacturer or '________' }}</td>
                    <td>{{ device.model or '________' }}</td>
                    <td>{{ device.erasure_method or '________' }}</td>
                    <td>{{ device.erasure_result or '____' }}</td>
                    <td>{{ device.grade or '____' }}</td>
                </tr>
                {% else %}
                <tr><td colspan="7" style="height: 30px;"></td></tr>
                <tr><td colspan="7" style="height: 30px;"></td></tr>
                <tr><td colspan="7" style="height: 30px;"></td></tr>
                <tr><td colspan="7" style="height: 30px;"></td></tr>
                <tr><td colspan="7" style="height: 30px;"></td></tr>
                <tr><td colspan="7" style="height: 30px;"></td></tr>
                <tr><td colspan="7" style="height: 30px;"></td></tr>
                <tr><td colspan="7" style="height: 30px;"></td></tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    <div class="section">
        <div class="section-title">Chain of Custody</div>
        <table>
            <thead>
                <tr>
                    <th style="width: 20%;">Date</th>
                    <th style="width: 20%;">Step</th>
                    <th style="width: 30%;">Technician</th>
                    <th style="width: 30%;">Notes</th>
                </tr>
            </thead>
            <tbody>
                <tr><td>________</td><td>Received</td><td>________________</td><td>________________</td></tr>
                <tr><td>________</td><td>Testing</td><td>________________</td><td>________________</td></tr>
                <tr><td>________</td><td>Erasure</td><td>________________</td><td>________________</td></tr>
                <tr><td>________</td><td>Verification (5%)</td><td>________________</td><td>________________</td></tr>
                <tr><td>________</td><td>Complete</td><td>________________</td><td>________________</td></tr>
            </tbody>
        </table>
    </div>

    <div class="warning">
        ⚠️ <strong>R2 REQUIREMENT:</strong> This pallet contains data-bearing equipment. All devices must be tracked through erasure with 5% verification audit.
    </div>

    <div class="footer">
        <strong>Westech Electronics</strong> | R2 Certified Recycling | Phone: (555) 123-4567<br>
        Printed: {{ doc.modified }} | Page 1 of 1 | <strong>KEEP WITH PALLET AT ALL TIMES</strong>
    </div>
</body>
</html>
