@php
    $mwsNlGeneralToRecipients = is_array($noticeLetterState['to_recipients'] ?? null)
        ? $noticeLetterState['to_recipients']
        : [];
@endphp
<div class="mws-nl-general-participants-row">
    <div class="mws-nl-general-participants-gutter" aria-hidden="true"></div>
    <div class="mws-nl-general-to-grid" id="mwsNlGeneralToList">
        @foreach ($mwsNlGeneralToRecipients as $recipient)
            @php
                $designation = trim((string) ($recipient['designation'] ?? ''));
                $department = trim((string) ($recipient['department'] ?? ''));
            @endphp
            <div class="mws-nl-general-to-card" data-mws-nl-general-to-card="1">
                <div
                    class="mws-nl-general-to-line mws-nl-general-to-line--designation"
                    @if ($canEditNoticeLetter) contenteditable="true" spellcheck="true" data-mws-nl-general-to-field="designation" @endif
                >{{ $_mwsNlDec($designation) }}</div>
                @if ($department !== '' || $canEditNoticeLetter)
                    <div
                        class="mws-nl-general-to-line mws-nl-general-to-line--department"
                        @if ($canEditNoticeLetter) contenteditable="true" spellcheck="true" data-mws-nl-general-to-field="department" @endif
                        @if ($department === '' && ! $canEditNoticeLetter) hidden @endif
                    >{{ $_mwsNlDec($department) }}</div>
                @endif
                @if ($canEditNoticeLetter)
                    <button type="button" class="mws-nl-general-to-card__remove no-print" title="Remove recipient" aria-label="Remove recipient">&times;</button>
                @endif
            </div>
        @endforeach
    </div>
</div>
@if ($canEditNoticeLetter)
    <div class="mws-nl-general-participants-actions no-print">
        <button type="button" class="btn btn-default btn-xs" id="mwsNlGeneralToAdd">Add recipient</button>
    </div>
    <template id="mwsNlGeneralToCardTemplate">
        <div class="mws-nl-general-to-card" data-mws-nl-general-to-card="1">
            <div class="mws-nl-general-to-line mws-nl-general-to-line--designation" contenteditable="true" spellcheck="true" data-mws-nl-general-to-field="designation"></div>
            <div class="mws-nl-general-to-line mws-nl-general-to-line--department" contenteditable="true" spellcheck="true" data-mws-nl-general-to-field="department"></div>
            <button type="button" class="mws-nl-general-to-card__remove no-print" title="Remove recipient" aria-label="Remove recipient">&times;</button>
        </div>
    </template>
@endif