<x-app-layout>
    <x-slot name="header">
        <div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
            <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
                {{ __('Historia clínica') }} — {{ $patient->name }}
            </h2>
            <div class="flex flex-wrap gap-2">
                <a href="{{ route('clients.patients.show', [$client, $patient]) }}" class="text-sm text-gray-600 dark:text-gray-400 hover:underline">{{ __('Volver al paciente') }}</a>
                @can('medical_records.edit')
                    <a href="{{ route('clients.patients.medical-records.create', [$client, $patient]) }}"
                       class="inline-flex items-center gap-2 rounded-lg bg-indigo-600 px-3 py-2 text-sm font-bold !text-white shadow-md ring-2 ring-indigo-800/30 hover:bg-indigo-700 hover:!text-white">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
                        <span class="text-white">{{ __('Nueva entrada') }}</span>
                    </a>
                @endcan
            </div>
        </div>
    </x-slot>

    <div class="py-8">
        <div class="max-w-4xl mx-auto sm:px-6 lg:px-8 space-y-4">
            @forelse ($records as $record)
                <div class="flex flex-col gap-3 rounded-lg border border-gray-200 bg-white p-5 shadow-sm dark:border-gray-700 dark:bg-gray-800 sm:flex-row sm:items-start sm:justify-between">
                    <div class="min-w-0 flex-1">
                        <p class="font-medium text-gray-900 dark:text-gray-100">{{ $record->title ?: __('Consulta / nota') }}</p>
                        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                            {{ $record->recorded_at->translatedFormat('d M Y H:i') }}
                            @if ($record->author)
                                · {{ $record->author->name }}
                            @endif
                        </p>
                        @if ($record->attachments_count > 0)
                            <p class="mt-1 text-xs text-gray-500">{{ $record->attachments_count }} {{ $record->attachments_count === 1 ? __('adjunto') : __('adjuntos') }}</p>
                        @endif
                    </div>
                    <div class="flex shrink-0 flex-wrap items-center gap-2">
                        <a href="{{ route('clients.patients.medical-records.show', [$client, $patient, $record]) }}"
                           class="inline-flex items-center gap-1 rounded-lg bg-teal-600 px-3 py-1.5 text-xs font-semibold text-white shadow-sm hover:bg-teal-700">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
                            {{ __('Ver') }}
                        </a>
                        <a href="{{ route('clients.patients.medical-records.print', [$client, $patient, $record]) }}"
                           target="_blank" rel="noopener"
                           class="inline-flex items-center gap-1 rounded-lg border border-gray-300 bg-white px-3 py-1.5 text-xs font-semibold text-gray-800 shadow-sm hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"/></svg>
                            {{ __('Imprimir') }}
                        </a>
                    </div>
                </div>
            @empty
                <div class="bg-white dark:bg-gray-800 shadow-sm sm:rounded-lg p-8 text-center text-gray-500 dark:text-gray-400">
                    {{ __('No hay entradas en la historia todavía.') }}
                </div>
            @endforelse
            <div>{{ $records->links() }}</div>
        </div>
    </div>
</x-app-layout>
