{% extends "base.html" %}
{% block content %}
<div class="p-4 max-w-6xl mx-auto">
  <div class="flex items-center justify-between mb-4">
    <h1 class="text-xl font-bold">Curate</h1>
    <button id="done-btn" class="btn btn-primary btn-sm" onclick="done()">
      Curate done &rarr;
    </button>
  </div>
  {% for day, photos in photos_by_day.items() %}
  <div class="day-group mb-6">
    <h2 class="sticky top-16 bg-base-200 py-1 text-sm font-semibold opacity-70">{{ day }}</h2>
    <div class="flex flex-wrap gap-2 mt-2" id="day-{{ day }}">
      {% for photo in photos %}
      <div class="photo-card relative w-32 h-32 rounded-lg overflow-hidden border-4
                  {% if photo.tag == 'story' %}border-info{% else %}border-success{% endif %}"
           data-asset-id="{{ photo.id }}">
        <img src="/proxy/thumb/{{ photo.id }}" class="w-full h-full object-cover" alt="">
        <div class="absolute top-1 left-1 flex gap-1">
          <button class="retag-btn btn btn-xs btn-ghost bg-black/40 text-white"
                  onclick="retag('{{ album_id }}', '{{ photo.id }}', this.closest('.photo-card'))">
            {% if photo.tag == 'journal' %}&rarr;S{% else %}&rarr;J{% endif %}
          </button>
          <button class="remove-btn btn btn-xs btn-ghost bg-black/40 text-white"
                  onclick="removeFn('{{ album_id }}', '{{ photo.id }}', this.closest('.photo-card'))">
            &#x2715;
          </button>
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
  {% endfor %}
</div>
{% endblock %}

{% block extra_scripts %}
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.3/Sortable.min.js"></script>
<script>
document.querySelectorAll('[id^="day-"]').forEach(function(el) {
  var albumId = new URLSearchParams(location.search).get('album_id');
  Sortable.create(el, {
    onEnd: function(e) {
      reorder(albumId, e.to);
    }
  });
});

async function removeFn(albumId, assetId, el) {
  await fetch('/curate/remove', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({album_id: albumId, asset_id: assetId})
  });
  el.remove();
}

async function retag(albumId, assetId, el) {
  await fetch('/curate/swap', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({album_id: albumId, asset_id: assetId})
  });
  el.classList.toggle('border-info');
  el.classList.toggle('border-success');
}

async function reorder(albumId, container) {
  var ids = Array.from(container.querySelectorAll('.photo-card')).map(function(e) {
    return e.dataset.assetId;
  });
  var day = container.id.replace('day-', '');
  await fetch('/curate/reorder', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({album_id: albumId, date: day, order: ids})
  });
}

async function done() {
  var albumId = new URLSearchParams(location.search).get('album_id');
  var res = await fetch('/curate/done', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({album_id: albumId})
  });
  var data = await res.json();
  if (data.redirect) window.location = data.redirect;
}
</script>
{% endblock %}