@php
    $activityLabels = \App\Services\ScreenshotPageService::activityPatternLabels($rule);
    $activityPatterns = $rule->resolvedActivityPatterns();
    $summaryActivities = $activityPatterns !== []
        ? implode(', ', array_slice($activityPatterns, 0, 2))
        : __('devices.screenshots.rule_activity_any');
    if (count($activityPatterns) > 2) {
        $summaryActivities .= ' +' . (count($activityPatterns) - 2);
    }
@endphp
<details class="screenshot-rule-card rounded-lg border border-slate-200 bg-white overflow-hidden group">
    <summary class="flex items-center gap-2 px-3 py-2 cursor-pointer select-none list-none [&::-webkit-details-marker]:hidden hover:bg-slate-50/80">
        <span class="scr-chevron text-slate-400 text-[10px] shrink-0 leading-none">▼</span>

        @if(!$rule->isActivityTrigger() && $rule->templates->isNotEmpty())
            <div class="flex gap-0.5 shrink-0">
                @foreach($rule->templates->take(2) as $tpl)
                    <img src="{{ route('devices.screenshots.template', [$device, $tpl]) }}"
                         alt=""
                         class="w-7 h-7 object-contain rounded border border-slate-100 bg-slate-50"
                         title="{{ $tpl->label ?: ('Ref. '.($tpl->sort_order + 1)) }}" />
                @endforeach
            </div>
        @endif

        <div class="flex-1 min-w-0">
            <div class="flex items-center gap-1.5 flex-wrap">
                <span class="font-medium text-sm text-slate-900 truncate">
                    {{ $rule->label ?: $rule->package_name }}
                </span>
                <span class="scr-pill {{ $rule->isActivityTrigger() ? 'scr-pill-emerald' : 'scr-pill-indigo' }}">
                    {{ $rule->isActivityTrigger() ? __('devices.screenshots.badge_activity') : __('devices.screenshots.badge_template') }}
                </span>
                <span class="scr-pill {{ $rule->enabled ? 'scr-pill-green' : 'scr-pill-muted' }}">
                    {{ $rule->enabled ? __('devices.screenshots.enabled') : __('devices.screenshots.disabled') }}
                </span>
            </div>
            <p class="text-[10px] text-slate-500 truncate mt-0.5">
                <span class="font-mono">{{ $rule->package_name }}</span>
                · {{ __('devices.screenshots.rule_interval', ['seconds' => $rule->interval_seconds]) }}
                @if($rule->isActivityTrigger())
                    · {{ $summaryActivities }}
                @endif
            </p>
        </div>

        <label class="scr-switch shrink-0" title="{{ __('devices.screenshots.enabled') }}" onclick="event.stopPropagation()">
            <input type="checkbox" class="screenshot-rule-toggle sr-only peer"
                   data-url="{{ route('devices.screenshots.update', [$device, $rule]) }}"
                   @checked($rule->enabled) />
            <span class="scr-switch-track"></span>
        </label>
    </summary>

    <div class="px-3 pb-3 pt-2 border-t border-slate-100 bg-slate-50/40 space-y-2">
        @if($rule->isActivityTrigger())
            <div class="flex flex-wrap gap-1">
                @foreach($activityLabels as $label)
                    <span class="scr-pill scr-pill-muted text-[10px]">{{ $label }}</span>
                @endforeach
            </div>
        @else
            @if($rule->templates->isNotEmpty())
                <div class="flex gap-1.5 flex-wrap">
                    @foreach($rule->templates as $tpl)
                        <div class="flex items-center gap-1.5 rounded-md border border-slate-200 bg-white px-2 py-1">
                            <img src="{{ route('devices.screenshots.template', [$device, $tpl]) }}"
                                 alt=""
                                 class="w-9 h-9 object-contain rounded border border-slate-100 bg-slate-50"
                                 title="{{ $tpl->label ?: ('Ref. '.($tpl->sort_order + 1)) }}" />
                            <span class="text-[10px] text-slate-600 max-w-[8rem] truncate">
                                {{ $tpl->label ?: ('Ref. '.($tpl->sort_order + 1)) }}
                                · {{ $tpl->is_required ? __('devices.screenshots.field_required') : __('devices.screenshots.field_optional') }}
                            </span>
                        </div>
                    @endforeach
                </div>
            @endif
            @if($activityLabels !== [])
                <div class="flex flex-wrap gap-1">
                    @foreach($activityLabels as $label)
                        <span class="scr-pill scr-pill-muted text-[10px]">{{ $label }}</span>
                    @endforeach
                </div>
            @endif
        @endif

        <p class="text-[11px] text-slate-500">
            {{ __('devices.screenshots.rule_interval', ['seconds' => $rule->interval_seconds]) }}
            @if(!$rule->isActivityTrigger())
                · {{ __('devices.screenshots.rule_threshold', ['value' => number_format($rule->match_threshold, 2)]) }}
                · {{ \App\Services\ScreenshotPageService::logicLabel($rule) }}
            @endif
        </p>

        <div class="flex items-center gap-2 pt-0.5">
            <button type="button"
                    class="scr-btn scr-btn-ghost screenshot-rule-edit text-xs py-1"
                    data-rule-id="{{ $rule->id }}">
                {{ __('devices.screenshots.edit_rule') }}
            </button>
            <button type="button"
                    class="scr-btn scr-btn-danger screenshot-rule-delete text-xs py-1"
                    data-url="{{ route('devices.screenshots.destroy', [$device, $rule]) }}">
                {{ __('devices.screenshots.delete_rule') }}
            </button>
        </div>
    </div>
</details>