@extends('layouts.admin')
@section('title', 'Media')
@section('lede', 'Upload a picture, name it, then use it from Brand & contact. Images are stored as WebP.')
@section('content')
<form method="post" action="{{ route('admin.media.store') }}" enctype="multipart/form-data" class="desk-card mb-6 flex flex-wrap items-end gap-3">
    @csrf
    <label class="text-sm">File <input type="file" name="file" required class="mt-1 block"></label>
    <label class="min-w-52 flex-1 text-sm">Alt text <input name="alt" class="mt-1" placeholder="Tanveer Ghumman"></label>
    <button class="desk-btn">Upload</button>
</form>
<ul class="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
@forelse($files as $file)
    <li class="desk-card">
        @if(str_starts_with((string) $file->mime, 'image/'))
            <img src="{{ $file->url() }}" alt="{{ $file->alt }}" class="mb-3 aspect-[4/3] w-full rounded-lg object-cover">
        @endif
        <form method="post" action="{{ route('admin.media.update', $file) }}" class="grid gap-2">
            @csrf @method('PUT')
            <label class="text-sm">Alt <input name="alt" value="{{ $file->alt }}"></label>
            <button class="desk-quiet w-fit">Save alt</button>
        </form>
        <p class="mt-3 break-all text-xs text-muted">{{ $file->url() }}</p>
        <button type="button" class="desk-quiet mt-2" onclick="navigator.clipboard.writeText(@js($file->url()))">Copy address</button>
        <form method="post" action="{{ route('admin.media.destroy', $file) }}" class="mt-3">@csrf @method('DELETE')<button class="text-xs text-red-700" onclick="return confirm('Remove this file?')">Delete</button></form>
    </li>
@empty
    <li class="text-sm text-muted">The gallery is empty.</li>
@endforelse
</ul>
@endsection