saved jobs

resources/views/components/job-card.blade.php

@@ -1,4 +1,4 @@
-@props(['job'])
+@props(['job', 'bookmarked' => false])
 
 <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 hover:shadow-md transition-shadow duration-200">
     <div class="flex justify-between items-start mb-3">
@@ -10,11 +10,24 @@
             </h3>
             <p class="text-gray-700 font-medium">{{ $job->company }}</p>
         </div>
-        @if($job->remote_allowed)
-        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-emerald-100 text-emerald-800">
-            Remote
-        </span>
-        @endif
+        <div class="flex items-center gap-2 ml-3 shrink-0">
+            @if($job->remote_allowed)
+            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-emerald-100 text-emerald-800">
+                Remote
+            </span>
+            @endif
+            @auth
+            <form method="POST" action="{{ route('jobs.bookmark', $job) }}" x-data="{ saved: {{ $bookmarked ? 'true' : 'false' }} }">
+                @csrf
+                <button type="submit" @click="saved = !saved" title="{{ $bookmarked ? 'Remove bookmark' : 'Bookmark' }}"
+                    class="text-gray-400 hover:text-emerald-600 transition-colors duration-150">
+                    <svg class="w-5 h-5" :fill="saved ? 'currentColor' : 'none'" :class="saved ? 'text-emerald-600' : ''" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-4.5L5 21V5z"/>
+                    </svg>
+                </button>
+            </form>
+            @endauth
+        </div>
     </div>
 
     <div class="flex flex-wrap gap-3 text-sm text-gray-600 mb-4">