{% macro sender_card(prefix, title="Send files", subtitle="Add files, then send when connected") %}
<div class="board-panel sharing-zone entrance-hidden span-6" id="{{ prefix }}-card">
    <div class="panel-header">
        <div class="panel-title">
            <i class="fas fa-paper-plane text-brand"></i>
            {{ title }}
        </div>
        <div class="status-badge status-waiting" id="{{ prefix }}-status-text">
            Awaiting Peer
        </div>
    </div>

    <div class="drop-zone corporate-drop" id="{{ prefix }}-drop-zone">
        <svg class="upload-icon-corporate" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12"/>
        </svg>
        <p>Drag files here or <button type="button" class="link-text" id="{{ prefix }}-browse-trigger">browse</button></p>
        <input type="file" id="{{ prefix }}-file-input" multiple hidden>
    </div>

    <div id="{{ prefix }}-selected-files" class="mt-4 hidden">
        <div class="selected-header">
            <span id="{{ prefix }}-file-count" class="font-semibold text-xs">0 Staged</span>
            <div class="flex flex-wrap gap-2">
                <button class="blocks-button blocks-button-primary blocks-button-sm" id="{{ prefix }}-btn-send-files" disabled>Send</button>
                <button type="button" class="blocks-button blocks-button-secondary blocks-button-sm" id="{{ prefix }}-btn-send-as-zip" disabled>Send as ZIP</button>
                <button class="blocks-button blocks-button-secondary blocks-button-sm" id="{{ prefix }}-btn-clear">Clear</button>
            </div>
        </div>
        <div id="{{ prefix }}-file-list" class="stream-list"></div>
    </div>

    <!-- Overall Transfer Progress -->
    <div id="{{ prefix }}-transfer-progress" class="mt-4 hidden">
        <div class="flex justify-between gap-2 mb-2">
            <span id="{{ prefix }}-progress-filename" class="font-semibold text-xs truncate-text">Preparing...</span>
            <span id="{{ prefix }}-progress-text" class="text-brand font-bold text-xs">0%</span>
        </div>
        <div class="progress-bar mb-2">
            <div id="{{ prefix }}-progress-fill" class="progress-fill w-0" ></div>
        </div>
        <div class="flex justify-between gap-2 text-xs text-muted">
            <span id="{{ prefix }}-progress-metrics">0 B/s • 0s left</span>
            <span id="{{ prefix }}-transfer-status">Transferring...</span>
        </div>
    </div>
</div>
{% endmacro %}

{% macro receiver_card(prefix, title="Receive files", subtitle="Incoming files appear here") %}
<div class="board-panel receiving-zone entrance-hidden span-6" id="{{ prefix }}-card">
    <div class="panel-header">
        <div class="panel-title">
            <i class="fas fa-inbox text-success"></i>
            {{ title }}
        </div>
        <div class="status-badge status-waiting" id="{{ prefix }}-status-text">
            Offline
        </div>
    </div>

    <div id="{{ prefix }}-empty-state" class="text-center py-4">
        <i class="fas fa-ghost fa-2x text-muted mb-2 opacity-25"></i>
        <p class="text-muted text-xs">{{ subtitle }}</p>
    </div>

    <div id="{{ prefix }}-incoming-files" class="hidden">
        <div class="selected-header">
            <span id="{{ prefix }}-file-count" class="font-semibold text-xs">0 Received</span>
        </div>
        <div id="{{ prefix }}-received-file-list" class="stream-list"></div>
    </div>

    <!-- Overall Transfer Progress -->
    <div id="{{ prefix }}-transfer-progress" class="mt-4 hidden">
        <div class="flex justify-between gap-2 mb-2">
            <span id="{{ prefix }}-progress-filename" class="font-semibold text-xs truncate-text">Waiting...</span>
            <span id="{{ prefix }}-progress-text" class="text-brand font-bold text-xs">0%</span>
        </div>
        <div class="progress-bar mb-2">
            <div id="{{ prefix }}-progress-fill" class="progress-fill w-0" ></div>
        </div>
        <div class="flex justify-between gap-2 text-xs text-muted">
            <span id="{{ prefix }}-progress-metrics">0 B/s • 0s left</span>
            <span id="{{ prefix }}-transfer-status">Downloading...</span>
        </div>
    </div>
</div>
{% endmacro %}