@extends('layouts.app')

@section('content')
<div class="container">
    <h1 class="mb-4">Your Postcards</h1>
    <a href="{{ route('postcards.create') }}" class="btn btn-primary mb-3">Create New Postcard</a>

    @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif

    @if($postcards->isEmpty())
        <p>No postcards found. Create one to get started!</p>
    @else
        <div class="table-responsive">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>Recipient</th>
                        <th>Message</th>
                        <th>Sender</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($postcards as $postcard)
                        <tr>
                            <td>{{ $postcard->recipient }}</td>
                            <td>{{ Str::limit($postcard->message, 50) }}</td>
                            <td>{{ $postcard->sender }}</td>
                            <td>
                                <a href="{{ route('postcards.edit', $postcard->id) }}" class="btn btn-sm btn-secondary">Edit</a>
                                <form action="{{ route('postcards.destroy', $postcard->id) }}" method="POST" class="d-inline-block">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Are you sure?')">Delete</button>
                                </form>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    @endif
</div>
@endsection