{% extends "base.html" %}

{% block title %}{{ 'badges'|t }} - {{ event.name }}{% endblock %}

{% block content %}
<div class="badges-page">
    <div class="badges-header">
        <h1>{{ event.name }}</h1>
        <p>{{ 'attendee_badges'|t }}</p>
        <div class="header-actions">
            <a href="{{ url_for('event_scan', event_id=event.id) }}" class="btn btn-secondary">📷 {{ 'scan_qr_codes'|t }}</a>
            <a href="{{ url_for('download_rectangular_badges', event_id=event.id) }}" class="btn btn-secondary">🏷️ Rectangular Labels (80x50mm)</a>
            <a href="{{ url_for('download_attendees_excel', event_id=event.id) }}" class="btn btn-secondary">📥 Download Excel</a>
            <button onclick="window.print()" class="btn btn-primary">{{ 'print_badges'|t }}</button>
        </div>
    </div>

    <div class="badges-grid">
        {% for attendee in attendees %}
            <div class="badge-card" data-first="{{ attendee.first_name }}" data-last="{{ attendee.last_name }}">
                <div class="badge-header">
                    <h3 class="badge-name">
                        <span class="first-name">{{ attendee.first_name }}</span>
                        <span class="last-name">{{ attendee.last_name }}</span>
                    </h3>
                </div>
                <div class="badge-qr">
                    <img src="{{ attendee.qr_code }}" alt="QR Code" width="100" height="100">
                </div>
                <div class="badge-body">
                    <p class="badge-org">{{ (attendee.organisation)|spacify if attendee.organisation else '' }}</p>
                    <p class="badge-role">{{ (attendee.role)|spacify if attendee.role else '' }}</p>
                    {% if attendee.introduction %}
                        <p class="badge-intro">{{ attendee.introduction[:80] }}{% if attendee.introduction|length > 80 %}...{% endif %}</p>
                    {% endif %}
                </div>
                <div class="badge-footer">
                    <span class="badge-id">#{{ attendee.id }}</span>
                    <span class="badge-check {% if attendee.checked_in %}checked-in{% endif %}">
                        {% if attendee.checked_in %}✓ {{ 'checked_in'|t }}{% else %}{{ 'pending'|t }}{% endif %}
                    </span>
                </div>
                <div class="badge-event-bar">
                    {{ event.name }} — {{ event.start_time|localized_date if event.start_time else 'TBD' }}
                </div>
            </div>
        {% endfor %}
    </div>

    <style>
    .badge-header h3 { margin: 0; font-size: 30pt; line-height: 1.1; }
    .badge-header h3 .first-name,
    .badge-header h3 .last-name { display: inline; line-height: 1.1; font-size: 30pt; }
    .badge-header h3 .last-name:before { content: ' '; }
@media print {
    .navbar, .footer, .badges-header .header-actions button, .flash-messages { display: none !important; }
    .badges-page { padding: 0; }
    .badges-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .badge-card { border: 2px solid #000; padding: 15px; page-break-inside: avoid; }
    .badge-header h3 { margin: 0; font-size: 30pt; line-height: 1.1; }
    .badge-header h3 .first-name,
    .badge-header h3 .last-name { display: inline !important; line-height: 1.1; font-size: 30pt; }
    .badge-header h3 .last-name:before { content: ' '; }
    .badge-qr img { width: 80px !important; height: 80px !important; }
    .badge-body p { margin: 5px 0; }
    .badge-footer { display: flex; justify-content: space-between; margin-top: 10px; padding-top: 10px; border-top: 1px solid #ccc; }
    .badge-event-bar { background: #000; color: #fff; padding: 8px 15px; margin: 10px -15px -15px; font-size: 12pt; text-align: center; }
    .badge-event-bar { background: #000; color: #fff; padding: 8px 15px; margin: 10px -15px -15px; font-size: 12pt; text-align: center; }
}
    </style>
    <script>
    (function() {
        // Create offscreen canvas for text measurement
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        ctx.font = '30pt sans-serif';

        // Container width limit (badge width)
        const BADGE_WIDTH_LIMIT = 280;

        function measureText(text, fontSize, fontFamily) {
            ctx.font = fontSize + 'px ' + (fontFamily || 'sans-serif');
            return ctx.measureText(text).width;
        }

        function formatBadgeNames() {
            const cards = document.querySelectorAll('.badge-card');
            cards.forEach(card => {
                const firstName = card.dataset.first || '';
                const lastName = card.dataset.last || '';
                const firstSpan = card.querySelector('.first-name');
                const lastSpan = card.querySelector('.last-name');

                // Measure first + last name at 20pt
                const combinedWidth = measureText(firstName + ' ' + lastName, 30);

                // If combined width exceeds limit, insert br before last name
                if (combinedWidth > BADGE_WIDTH_LIMIT) {
                    if (!lastSpan.previousElementSibling || lastSpan.previousElementSibling.tagName !== 'BR') {
                        const br = document.createElement('br');
                        lastSpan.parentNode.insertBefore(br, lastSpan);
                    }
                }
            });
        }

        // Run after DOM is ready
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', formatBadgeNames);
        } else {
            formatBadgeNames();
        }
    })();
    </script>
</div>
{% endblock %}