{% autoescape %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ trans('QR Code') }} for {{ item.name }}</title>
    <style>
        body { font-family: Arial, sans-serif; text-align: center; margin: 20px; }
        .qr-container { border: 1px solid #000; padding: 20px; display: inline-block; }
        .qr-code { width: 200px; height: 200px; }
        .details { margin-top: 20px; }
        @media print { body { margin: 0; } .qr-container { page-break-inside: avoid; } }
    </style>
</head>
<body>
    <div class="qr-container">
        <h2>{{ item.name }}</h2>
        <p>{{ trans('ID Code') }}: {{ item.id_code }}</p>
        <img src="/uploads/qr/{{ item.id_code }}.svg" alt="QR Code" class="qr-code">
        <div class="details">
            <p><strong>Description:</strong> {{ item.description }}</p>
            <p><strong>Category:</strong> {{ item.category_path ?: 'Uncategorized' }}</p>
            {% if item.location %}
                <p><strong>Location:</strong> {{ item.location }}</p>
            {% endif %}
        </div>
    </div>
    <div style="text-align: center; margin-top: 20px;">
        <button onclick="window.close()">{{ trans('Close') }}</button>
    </div>
    <script>
        window.print();
        // Optionally, close after print, but browser support varies
        // window.onafterprint = function() { window.close(); };
    </script>
</body>
</html>
{% endautoescape %}