<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Print Tags - {{ booking.booking_id }}</title>
    <style>
        body {
            font-family: 'Courier New', Courier, monospace;
            width: 300px;
            margin: 0 auto;
            text-align: center;
            font-size: 14px;
            font-weight: bold;
            color: #000;
        }
        .tag-container {
            padding: 20px 10px;
        }
        .user-name {
            text-transform: uppercase;
            font-size: 16px;
            margin-bottom: 10px;
        }
        .item-name {
            text-transform: uppercase;
            font-size: 16px;
            margin-bottom: 5px;
        }
        .details {
            margin: 5px 0;
        }
        .service {
            text-transform: uppercase;
            margin: 5px 0;
        }
        .ids {
            margin: 10px 0;
            line-height: 1.4;
        }
        .dates {
            margin-top: 10px;
            font-size: 12px;
            line-height: 1.4;
        }
        .separator {
            margin: 5px 0;
            border-bottom: 1px dashed #000;
        }
        @page {
            margin: 0;
        }
        @media print {
            .no-print { display: none; }
            body { width: auto; margin: 0; }
        }
    </style>
</head>
<body>
    <div class="no-print" style="margin-bottom: 20px; margin-top: 20px;">
        <button onclick="window.print()" style="padding: 10px 20px; cursor: pointer;">Print All Tags</button>
        <button onclick="window.close()" style="padding: 10px 20px; cursor: pointer;">Close</button>
    </div>

    {% for entry in print_items %}
    <div class="tag-container">
        <div class="user-name">{{ booking.user.first_name }} {{ booking.user.last_name }}</div>
        
        <div class="item-name">
            {{ entry.item.garment.name }} - [ {{ entry.specific_total }} ] - {{ entry.specific_index|stringformat:"02d" }}
        </div>
        
        <div class="details">
            {% comment %} ( {{ entry.index }} ) [  {% endcomment %}
            {{ entry.item.category.name }} 
        </div>
        
        <div class="service">
            {{ entry.item.service.service_name }}
        </div>
        
        <div class="ids">
            ORDER_{{ booking.booking_id }}<br>
            {{ entry.item.tag }}
        </div>
        
        <div class="dates">
            OD : {{ booking.created_at|date:"M d, Y" }}<br>
            DD : {{ delivery_date|date:"M d, Y" }}
        </div>
        
        <div class="separator"></div>
    </div>
    {% endfor %}
    
    <script>
        // Automatically open print dialog
        // window.onload = function() { window.print(); }
    </script>
</body>
</html>