{% extends "base.html" %}
{% block content %}
<div class="p-6 max-w-5xl mx-auto">
  <h1 class="text-2xl font-bold mb-4">Select Album</h1>

  {% if error %}
  <div class="alert alert-error mb-4">
    <span>Cannot reach Immich: {{ error }}</span>
    <a href="/" class="btn btn-sm">Retry</a>
  </div>
  {% endif %}

  <form method="post" action="/select">
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
      {% for album in albums %}
      <label class="album-card card bg-base-100 shadow cursor-pointer hover:shadow-lg transition"
             data-album-id="{{ album.id }}">
        <figure class="h-40 overflow-hidden">
          <img src="/proxy/thumb/{{ album.albumThumbnailAssetId }}"
               class="w-full h-full object-cover" alt="">
        </figure>
        <div class="card-body p-4">
          <div class="flex items-start gap-2">
            <input type="checkbox" name="album_ids[]" value="{{ album.id }}"
                   class="checkbox checkbox-primary mt-1">
            <div>
              <p class="font-semibold">{{ album.albumName }}</p>
              <p class="text-sm opacity-60">{{ album.assetCount }} photos</p>
              {% if album.has_state %}
              <span class="resume-badge badge badge-warning badge-sm mt-1">In progress</span>
              {% endif %}
            </div>
          </div>
        </div>
      </label>
      {% endfor %}
    </div>

    <div class="form-control mb-4 max-w-xs">
      <label class="label"><span class="label-text">Grav trip slug</span></label>
      <input id="grav-slug" type="text" name="grav_trip_slug" required
             placeholder="central-asia-2023" class="input input-bordered">
    </div>

    <input type="hidden" name="start_over" id="start-over-flag" value="0">
    <div class="flex gap-2">
      <button type="submit" class="btn btn-primary">Start &rarr;</button>
      <button type="button" class="btn btn-ghost btn-sm"
              onclick="document.getElementById('start-over-flag').value='1'; this.closest('form').submit()">
        Start over (discard progress)
      </button>
    </div>
  </form>
</div>
{% endblock %}