@php
  $cats = $gallery->pluck('category')->filter()->unique()->sort()->values();
  $liveCount = $gallery->where('published', true)->count();
@endphp

<div class="panel" id="editor">
  <div class="panel-head"><h2>Add a photo</h2><span class="xs muted">JPG, PNG or WebP · up to 5 MB</span></div>
  <form class="panel-body" method="post" action="{{ route('admin.content.gallery.store') }}" enctype="multipart/form-data" novalidate>
    @csrf
    <div class="b2-gal-form">
      <div class="field mb-0">
        <span class="label" id="gl-img-l">Photo <span class="req">*</span></span>
        <div class="dropzone" style="padding:22px"><x-icon name="upload" :size="26"/><div class="small bold" data-dz-label>Drop a photo or click to browse</div><div class="xs muted">Landscape photos of classes, labs and events look best</div><input type="file" name="image" accept="image/jpeg,image/png,image/webp" data-max-mb="5" required aria-labelledby="gl-img-l" data-image-input></div>
        <div class="b2-cover b2-cover-sm is-empty mt-1" data-image-preview><img class="hidden" src="" alt="Selected photo preview"></div>
        @error('image')<div class="field-error">{{ $message }}</div>@enderror
      </div>
      <div>
        <x-field name="title" id="gl-title" label="Title" required placeholder="e.g. Azure lab session, Batch 12"/>
        <x-field name="caption" id="gl-cap" label="Caption" help="Optional. Shown under the photo and used as its alt text."/>
        <div class="form-grid">
          <x-field name="category" id="gl-cat" label="Category" value="Classes" help="Groups photos on the gallery page."/>
          <x-field name="sort_order" id="gl-sort" type="number" label="Order" value="0" min="0" max="9999" help="Lower numbers come first."/>
        </div>
        @if($cats->isNotEmpty())<div class="b2-suggest" aria-label="Existing categories">@foreach($cats as $c)<button class="chip" type="button" data-fill="#gl-cat" data-value="{{ $c }}">{{ $c }}</button>@endforeach</div>@endif
        <div class="row mt-2" style="justify-content:flex-end"><button class="btn btn-primary" type="submit"><x-icon name="upload" :size="16"/> Add to gallery</button></div>
      </div>
    </div>
  </form>
</div>

<div class="panel">
  <div class="panel-head"><div><h2>Gallery</h2><div class="xs muted">{{ $gallery->count() }} {{ \Illuminate\Support\Str::plural('photo', $gallery->count()) }} · {{ $liveCount }} visible on the website</div></div></div>
  @if($gallery->isEmpty())
    <x-empty icon="image" title="The gallery is empty" text="Only upload photos you own and that show people who are happy to be pictured. The public gallery page stays hidden until you add some."/>
  @else
  <div class="b2-gal">
    @foreach($gallery as $g)
      <figure class="b2-gal-item {{ $g->published ? '' : 'is-off' }}">
        <img src="{{ $g->url() }}" alt="{{ $g->caption ?: $g->title }}" loading="lazy">
        <figcaption>
          <div class="between" style="gap:8px"><b class="b2-title">{{ $g->title }}</b><x-pill :status="$g->published ? 'published' : 'draft'"/></div>
          <div class="xs muted">{{ $g->category }} · order {{ $g->sort_order }}@if($g->caption) · {{ \Illuminate\Support\Str::limit($g->caption, 60) }}@endif</div>
          <div class="ad-actions b2-gal-actions">
            <form method="post" action="{{ route('admin.content.toggle', ['type' => 'gallery', 'id' => $g->id]) }}">@csrf<button class="btn btn-secondary btn-sm" type="submit">{{ $g->published ? 'Hide' : 'Show' }}</button></form>
            <form method="post" action="{{ route('admin.content.gallery.delete', $g) }}" data-confirm="Remove “{{ $g->title }}” from the gallery and delete the file?">@csrf @method('DELETE')<button class="icon-btn" type="submit" aria-label="Delete {{ $g->title }}" title="Delete"><x-icon name="trash" :size="16"/></button></form>
          </div>
        </figcaption>
      </figure>
    @endforeach
  </div>
  @endif
</div>