{% extends "base.html" %}

{% block content %}

  <!-- Photo Library (auth) -->
  <div class="bg-slate-900 border border-slate-800 rounded-2xl p-6 shadow-xl space-y-4">
    <div>
      <h2 class="font-bold text-base text-slate-100">🖼️ Photo Library</h2>
      <p class="text-xs text-slate-400">Upload images to use as playlist widgets</p>
    </div>
    <div class="flex items-center gap-3">
      <input type="file" id="photo-input" accept="image/*" class="text-xs text-slate-300 file:mr-2 file:py-1.5 file:px-3 file:rounded-lg file:border-0 file:bg-slate-800 file:text-slate-200 file:text-xs" />
      <button onclick="uploadPhoto()" id="btn-photo-upload" class="px-4 py-1.5 rounded-lg bg-orange-600 hover:bg-orange-500 text-xs font-semibold text-white">Upload</button>
    </div>
    <div id="photos-content" class="text-xs text-slate-400 space-y-2">
      <div>Loading photos…</div>
    </div>
  </div>
{% endblock %}

{% block init %}
(async () => {
  if (typeof checkAuthStatus !== 'function') { document.getElementById('auth-lock')?.classList.remove('hidden'); return; }
  await checkAuthStatus(); const lock = document.getElementById('auth-lock'); if (isAuthenticated) { lock.classList.add('hidden'); try { loadPhotos(); } catch (e) {} } else { lock.classList.remove('hidden'); }
})();
{% endblock %}