<x-app-layout>
<x-module-hero title="Email Templates" description="Create and manage reusable email templates" icon="fa-file-lines">
    <x-slot name="tabs">
        @can('view emails')
        <a href="{{ route('emails.index') }}"
           class="module-hero-tab inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0
                  {{ request()->routeIs('emails.index') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}">
            <i class="fas fa-tachometer-alt text-sm"></i> Inbox
        </a>
        @endcan
        @can('create emails')
        <a href="{{ route('emails.compose') }}"
           class="module-hero-tab inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0
                  {{ request()->routeIs('emails.compose') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}">
            <i class="fas fa-pen text-sm"></i> Compose
        </a>
        @endcan
        @can('view emails')
        <a href="{{ route('emails.history') }}"
           class="module-hero-tab inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0
                  {{ request()->routeIs('emails.history') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}">
            <i class="fas fa-history text-sm"></i> History
        </a>
        @endcan
        @can('manage email templates')
        <a href="{{ route('emails.templates') }}"
           class="module-hero-tab inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0
                  {{ request()->routeIs('emails.templates') || request()->routeIs('emails.*template*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}">
            <i class="fas fa-file-lines text-sm"></i> Templates
        </a>
        @endcan
    </x-slot>
    <x-slot name="actions">
        @can('manage email templates')
        <a href="{{ route('emails.create-template') }}" class="inline-flex items-center gap-2 px-4 py-2 bg-white text-[#1a4731] text-sm font-semibold rounded-lg hover:bg-white/90 transition">
            <i class="fas fa-plus"></i> New Template
        </a>
        @endcan
    </x-slot>
</x-module-hero>

<div class="p-6">
    @if(session('success'))
        <div class="mb-4 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg flex items-center gap-2">
            <i class="fas fa-check-circle"></i> {{ session('success') }}
        </div>
    @endif

    @if($templates->count() > 0)
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            @foreach($templates as $template)
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden hover:shadow-md transition">
                    <div class="p-4 border-b border-gray-100">
                        <div class="flex items-start justify-between gap-2">
                            <h3 class="font-semibold text-gray-800 text-sm">{{ $template->name }}</h3>
                            @if($template->is_system)
                                <span class="px-2 py-0.5 text-xs bg-purple-100 text-purple-700 rounded-full flex-shrink-0">System</span>
                            @endif
                        </div>
                        <p class="text-xs text-gray-500 mt-1">{{ $template->subject }}</p>
                    </div>
                    <div class="p-4">
                        <p class="text-xs text-gray-600 line-clamp-3">{{ Str::limit(strip_tags($template->html_content), 120) }}</p>
                        <div class="flex items-center justify-between mt-3 text-xs text-gray-400">
                            <span><i class="fas fa-clock mr-1"></i>{{ $template->updated_at->diffForHumans() }}</span>
                            <span><i class="fas fa-user mr-1"></i>{{ $template->creator->name ?? 'System' }}</span>
                        </div>
                    </div>
                    <div class="px-4 py-3 border-t border-gray-100 flex items-center justify-between">
                        <a href="{{ route('emails.compose', ['template' => $template->id]) }}" class="btn-action-approve text-xs">
                            <i class="fas fa-paper-plane"></i> Use
                        </a>
                        @can('manage email templates')
                            @if($template->canBeDeleted())
                                <div class="flex gap-2">
                                    <a href="{{ route('emails.edit-template', $template) }}" class="btn-action-edit text-xs">
                                        <i class="fas fa-edit"></i> Edit
                                    </a>
                                    <form action="{{ route('emails.destroy-template', $template) }}" method="POST" class="inline" onsubmit="return confirm('Delete this template?')">
                                        @csrf @method('DELETE')
                                        <button type="submit" class="btn-action-delete text-xs"><i class="fas fa-trash"></i></button>
                                    </form>
                                </div>
                            @endif
                        @endcan
                    </div>
                </div>
            @endforeach
        </div>
        @if($templates->hasPages())
            <div class="mt-6">{{ $templates->links() }}</div>
        @endif
    @else
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-12 text-center">
            <i class="fas fa-file-lines text-5xl text-gray-300 mb-4"></i>
            <h3 class="text-lg font-semibold text-gray-700 mb-2">No templates yet</h3>
            <p class="text-sm text-gray-500 mb-6">Create reusable email templates to save time on common messages.</p>
            @can('manage email templates')
                <a href="{{ route('emails.create-template') }}" class="btn-action-approve inline-flex">
                    <i class="fas fa-plus"></i> Create Template
                </a>
            @endcan
        </div>
    @endif
</div>
</x-app-layout>
