@props(['user'])

<div class="bg-white rounded-lg shadow p-6 mb-6">
    <form action="{{ route('nurse.connect.post') }}" method="POST" enctype="multipart/form-data" class="space-y-4">
        @csrf
        
        <div class="flex items-start space-x-4">
            <div class="flex-shrink-0">
                <img src="{{ $user->nurseProfile?->profile_photo_url ?? asset('images/default-avatar.png') }}" 
                     alt="{{ $user->name }}" class="w-12 h-12 rounded-full">
            </div>
            
            <div class="flex-grow">
                <textarea name="body" 
                          placeholder="What's on your mind?" 
                          class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                          rows="3"
                          maxlength="280"
                          required></textarea>
                <p class="mt-1 text-xs text-gray-500">Maximum 280 characters</p>
                
                @error('body')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
                
                <div class="mt-4 flex items-center justify-between">
                    <div class="flex items-center space-x-2">
                        <label class="flex items-center px-3 py-2 bg-gray-100 text-gray-700 rounded-lg cursor-pointer hover:bg-gray-200">
                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z" clip-rule="evenodd" />
                            </svg>
                            <span class="ml-2 text-sm">Image</span>
                            <input type="file" name="image" accept="image/*" class="hidden" />
                        </label>
                        
                        <select name="category_id" class="px-3 py-2 border border-gray-300 rounded-lg text-sm">
                            <option value="">Category (optional)</option>
                            @foreach($forumCategories ?? [] as $category)
                                <option value="{{ $category->id }}">{{ $category->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    
                    <button type="submit" class="px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition">
                        Post
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>