{{-- Email Item - Card Design --}}
<div class="activity-card border-info" wire:key="email-{{ $email->id }}" x-data="{ expanded: false }">
    {{-- Header --}}
    <div class="card-header">
        {{-- Icon --}}
        <div class="card-icon">
            <span class="icon-circle bg-primary-dim">
                <x-ui.nicon name="mail" class="text-primary"/>
            </span>
        </div>
        
        {{-- Content --}}
        <div class="card-content">
            {{-- Badges --}}
            <div class="card-badges">
                <span class="activity-badge bg-primary-dim text-primary">
                    <x-ui.nicon name="mail" class="me-1"/>
                    {{ __('Email') }}
                </span>
                @if($email->reply_to)
                    <span class="activity-badge bg-secondary-dim text-secondary">
                        <x-ui.nicon name="reply" class="me-1"/>
                        {{ __('From') }}: {{ Str::limit($email->reply_to, 30) }}
                    </span>
                @endif
            </div>

            {{-- Subject --}}
            <div class="card-title">{{ $email->subject }}</div>

            {{-- Meta Info --}}
            <div class="card-meta">
                <span class="meta-item">
                    <x-ui.nicon name="send"/>
                    <span>{{ __('To') }}:</span>
                    <strong>{{ Str::limit($email->to, 40) }}</strong>
                </span>
            </div>
        </div>

        {{-- Timestamp --}}
        <div class="card-time">
            <span class="time-date">{{ $email->created_at->format('d/m/y') }}</span>
            <span class="time-hour">{{ $email->created_at->format('H:i') }}</span>
        </div>
    </div>

    {{-- Actions --}}
    <div class="card-actions">
        <x-ui.button 
            color="outline-light"
            size="xs"
            icon="eye"
            x-on:click="expanded = !expanded"
        >
            <span x-text="expanded ? '{{ __('Hide preview') }}' : '{{ __('Show preview') }}'"></span>
        </x-ui.button>
        <x-ui.button
            wire:click="$emit('showModal', 'modals.notifications.show-sent-email-modal', {{ $email->id }})"
            color="primary"
            size="xs"
            icon="external"
            :label="__('View full')"
        />
    </div>

    {{-- Preview Content (Collapsible) --}}
    <div x-show="expanded" x-collapse>
        <div class="card-preview preview-email">
            {!! Str::limit(strip_tags($email->body), 600) !!}
        </div>
    </div>
</div>