{% extends 'base.html' %}
{% load i18n %}
{% load static %}

{% block extra_css %}
<style>
  [x-cloak] { display: none !important; }

  /* ============================================================
     Apple-inspired design system — Files page
     Mirrors the home page tokens & components so the two pages
     share one visual language.
     ============================================================ */
  :root {
    --apple-bg: #f5f5f7;
    --apple-text: #1d1d1f;
    --apple-gray: #6e6e73;
    --apple-blue: #0071e3;
    --apple-blue-hover: #0077ed;
    --apple-red: #ff3b30;
    --apple-green: #1e7b34;
    --apple-yellow: #ff9f0a;
    --apple-separator: rgba(0, 0, 0, 0.06);
    --apple-ease: cubic-bezier(0.28, 0.11, 0.32, 1);
    --apple-radius-lg: 28px;
    --apple-radius-md: 22px;
    --apple-shadow-card: 0 4px 24px rgba(0, 0, 0, 0.05);
    --apple-shadow-lift: 0 18px 44px rgba(0, 0, 0, 0.10);
  }

  body {
    background-color: var(--apple-bg) !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
      "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--apple-text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  .apple-wrap { max-width: 72rem; margin: 0 auto; padding: 0 1rem; }

  /* ---------- Library header (mirrors home .library-header) ---------- */
  .library-header {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 1rem; padding: 1.7rem 1.8rem 1.25rem;
  }
  .library-title-group { display: flex; flex-direction: column; gap: 0.15rem; }
  .section-title { font-size: clamp(1.45rem, 3vw, 1.8rem); font-weight: 700; letter-spacing: -0.022em; margin: 0; }
  .library-count { font-size: 0.88rem; color: var(--apple-gray); margin: 0; }
  .library-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }

  /* ---------- Buttons ---------- */
  .apple-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
    min-height: 44px; padding: 0.6rem 1.4rem; border-radius: 980px;
    font-weight: 600; font-size: 0.95rem; border: none; cursor: pointer; text-decoration: none;
    transition: background 0.3s var(--apple-ease), transform 0.3s var(--apple-ease), box-shadow 0.3s var(--apple-ease);
  }
  .apple-btn:active { transform: scale(0.97); }
  .apple-btn-primary { background: var(--apple-blue); color: #fff; box-shadow: 0 6px 18px rgba(0, 113, 227, 0.28); }
  .apple-btn-primary:hover { background: var(--apple-blue-hover); color: #fff; }
  .apple-btn-secondary { background: var(--apple-bg); color: var(--apple-text); border: 1px solid rgba(0, 0, 0, 0.10); }
  .apple-btn-secondary:hover { background: #ececef; }

  /* ---------- Card ---------- */
  .apple-card {
    background: #fff; border-radius: var(--apple-radius-lg);
    border: 1px solid rgba(0, 0, 0, 0.04); box-shadow: var(--apple-shadow-card);
    overflow: hidden;
  }

  /* ---------- File list ---------- */
  .file-list { list-style: none; margin: 0; padding: 0; }
  .file-row {
    display: flex; align-items: flex-start; gap: 0.9rem;
    padding: 1rem 1.8rem; border-bottom: 1px solid var(--apple-separator);
    transition: background 0.25s ease;
  }
  .file-row:hover { background: rgba(0, 0, 0, 0.025); }
  .file-list > li:last-child { border-bottom: none; }

  .file-icon { flex: none; margin-top: 0.2rem; color: #8e8e93; }
  .file-icon svg { width: 1.25rem; height: 1.25rem; display: block; }

  .file-main { flex: 1 1 auto; min-width: 0; }
  .file-name {
    color: var(--apple-blue); font-weight: 600; font-size: 0.98rem; text-decoration: none;
    display: inline-block; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis;
  }
  .file-name:hover { text-decoration: underline; }
  .file-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem;
    margin: 0.3rem 0 0; font-size: 0.8rem; color: var(--apple-gray);
  }
  .file-meta dd { margin: 0; }
  .file-meta .sep { color: #c7c7cc; }
  .file-sub {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
    margin-top: 0.5rem;
  }

  /* ---------- Badges ---------- */
  .badge {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.26rem 0.7rem; border-radius: 980px;
    font-size: 0.76rem; font-weight: 600; border: none; cursor: pointer;
    transition: background 0.25s ease;
  }
  .badge-public { background: rgba(48, 209, 88, 0.15); color: var(--apple-green); }
  .badge-public:hover { background: rgba(48, 209, 88, 0.24); }
  .badge-private { background: rgba(0, 0, 0, 0.05); color: var(--apple-gray); }
  .badge-private:hover { background: rgba(0, 0, 0, 0.09); }

  .expiry-chip { font-size: 0.76rem; color: var(--apple-gray); cursor: pointer; }
  .expiry-chip:hover { text-decoration: underline; }
  .expiry-chip.expired { color: var(--apple-red); }

  /* ---------- Inline link ---------- */
  .apple-link {
    color: var(--apple-blue); font-weight: 500; font-size: 0.82rem;
    display: inline-flex; align-items: center; gap: 0.25rem; text-decoration: none;
    background: none; border: none; cursor: pointer; padding: 0;
  }
  .apple-link:hover { text-decoration: underline; }
  .apple-link svg { width: 0.8rem; height: 0.8rem; }

  /* ---------- Icon buttons ---------- */
  .icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%; color: #8e8e93;
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
    flex: none; text-decoration: none;
  }
  .icon-btn:hover { background: rgba(0, 0, 0, 0.05); transform: translateY(-1px); }
  .icon-btn.blue:hover { color: var(--apple-blue); }
  .icon-btn.amber:hover { color: var(--apple-yellow); }
  .icon-btn.red:hover { color: var(--apple-red); }
  .icon-btn svg { width: 1.2rem; height: 1.2rem; }

  .file-actions { flex: none; display: flex; align-items: center; gap: 0.15rem; }

  /* ---------- Layout switcher (list / grid / carousel) ---------- */
  .layout-switcher {
    display: inline-flex; align-items: center; gap: 2px;
    background: rgba(0, 0, 0, 0.055); border-radius: 980px; padding: 3px;
    border: 1px solid rgba(0, 0, 0, 0.04);
  }
  .layout-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 34px; border-radius: 980px; border: none; cursor: pointer;
    background: transparent; color: var(--apple-gray);
    transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
  }
  .layout-btn:hover { color: var(--apple-text); }
  .layout-btn.active {
    background: #fff; color: var(--apple-blue);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  }
  .layout-btn svg { width: 1.15rem; height: 1.15rem; display: block; }
  @media (max-width: 640px) {
    .layout-btn { width: 38px; height: 32px; }
  }

  /* ---------- Type filter bar ---------- */
  .filter-bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem;
    padding: 0.1rem 1.8rem 1.1rem;
  }
  .filter-chip {
    display: inline-flex; align-items: center; gap: 0.4rem;
    min-height: 32px; padding: 0.3rem 0.85rem;
    border-radius: 980px; border: 1px solid rgba(0, 0, 0, 0.07);
    background: #fff; color: var(--apple-gray);
    font-size: 0.8rem; font-weight: 600; cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.2s var(--apple-ease);
  }
  .filter-chip:hover { background: #f0f0f3; }
  .filter-chip:active { transform: scale(0.96); }
  .filter-chip.active {
    background: var(--apple-blue); color: #fff; border-color: var(--apple-blue);
  }
  .chip-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 0.35rem;
    border-radius: 980px; font-size: 0.7rem; font-weight: 700;
    background: rgba(0, 0, 0, 0.06); color: var(--apple-gray);
  }
  .filter-chip.active .chip-count { background: rgba(255, 255, 255, 0.24); color: #fff; }

  /* ---------- Grid view (macOS Finder style) ---------- */
  .file-grid {
    display: grid; gap: 0.9rem; padding: 0.6rem 1.8rem 1.6rem;
    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  }
  .grid-card {
    display: flex; flex-direction: column; align-items: stretch; gap: 0.45rem;
    padding: 0.65rem 0.65rem 0.8rem; border-radius: var(--apple-radius-md);
    background: #fff; border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: var(--apple-shadow-card); cursor: pointer; text-align: left;
    transition: transform 0.3s var(--apple-ease), box-shadow 0.3s var(--apple-ease);
  }
  .grid-card:hover { transform: translateY(-3px); box-shadow: var(--apple-shadow-lift); }
  .grid-card:active { transform: scale(0.97); }
  .grid-thumb {
    position: relative; width: 100%; aspect-ratio: 1 / 1;
    border-radius: 16px; overflow: hidden; background: #f0f0f2;
    display: flex; align-items: center; justify-content: center;
  }
  .grid-thumb img, .grid-thumb video {
    width: 100%; height: 100%; object-fit: cover; display: block;
  }
  .grid-thumb .thumb-badge {
    position: absolute; bottom: 0.4rem; right: 0.4rem;
    width: 1.6rem; height: 1.6rem; border-radius: 50%;
    background: rgba(0, 0, 0, 0.55); color: #fff;
    display: flex; align-items: center; justify-content: center;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  }
  .grid-thumb .thumb-badge svg { width: 0.85rem; height: 0.85rem; }
  .grid-file-icon { width: 3.4rem; height: 3.4rem; color: #c7c7cc; }
  .grid-file-icon svg { width: 100%; height: 100%; }
  .grid-name {
    font-size: 0.82rem; font-weight: 600; color: var(--apple-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .grid-meta { font-size: 0.72rem; color: var(--apple-gray); }
  .grid-badge {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.18rem 0.6rem; border-radius: 980px;
    font-size: 0.68rem; font-weight: 600;
  }
  .grid-badge.pub { background: rgba(48, 209, 88, 0.14); color: var(--apple-green); }
  .grid-badge.priv { background: rgba(0, 0, 0, 0.05); color: var(--apple-gray); }
  @media (max-width: 640px) {
    .file-grid { gap: 0.65rem; padding: 0.5rem 1.1rem 1.2rem; grid-template-columns: repeat(auto-fill, minmax(6.4rem, 1fr)); }
    .grid-card { padding: 0.5rem 0.5rem 0.65rem; }
    .grid-thumb { border-radius: 13px; }
  }

  /* ---------- Carousel view (3D cover-flow style) ---------- */
  .file-carousel { position: relative; perspective: 1400px; }
  .carousel-track {
    display: flex; gap: 1.1rem; overflow-x: auto;
    padding: 1.6rem 1.8rem 1.8rem; margin-bottom: -1.4rem;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .carousel-track::-webkit-scrollbar { display: none; }
  .carousel-card {
    flex: none; width: 11.5rem; scroll-snap-align: center;
    display: flex; flex-direction: column; gap: 0.5rem;
    background: #fff; border-radius: var(--apple-radius-lg);
    border: 1px solid rgba(0, 0, 0, 0.05); box-shadow: var(--apple-shadow-card);
    padding: 0.8rem; cursor: pointer; text-align: left;
    transform-style: preserve-3d;
    transition: transform 0.25s var(--apple-ease), opacity 0.25s ease, box-shadow 0.25s ease;
    will-change: transform;
  }
  .carousel-card:hover { box-shadow: var(--apple-shadow-lift); }
  .carousel-card.active { box-shadow: 0 18px 48px rgba(0, 0, 0, 0.16); }
  .carousel-cover {
    position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: 18px;
    overflow: hidden; background: #f0f0f2;
    display: flex; align-items: center; justify-content: center;
  }
  .carousel-cover img, .carousel-cover video {
    width: 100%; height: 100%; object-fit: cover; display: block;
  }
  .carousel-file-icon { width: 4rem; height: 4rem; color: #c7c7cc; }
  .carousel-file-icon svg { width: 100%; height: 100%; }
  .carousel-name {
    font-size: 0.85rem; font-weight: 600; color: var(--apple-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .carousel-meta { font-size: 0.72rem; color: var(--apple-gray); }
  .carousel-nav {
    position: absolute; top: 42%; transform: translateY(-50%); z-index: 5;
    width: 2.4rem; height: 2.4rem; border-radius: 50%;
    background: rgba(255, 255, 255, 0.92); color: var(--apple-text);
    border: 1px solid rgba(0, 0, 0, 0.06); box-shadow: var(--apple-shadow-card);
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    transition: background 0.2s ease, transform 0.2s ease;
  }
  .carousel-nav:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
  .carousel-nav svg { width: 1.1rem; height: 1.1rem; }
  .carousel-nav.prev { left: 0.9rem; }
  .carousel-nav.next { right: 0.9rem; }
  @media (max-width: 640px) {
    .carousel-track { gap: 0.8rem; padding: 0.7rem 1.1rem 1.2rem; }
    .carousel-card { width: 9.5rem; padding: 0.6rem; }
    .carousel-cover { border-radius: 14px; }
    .carousel-nav { display: none; } /* native swipe on touch */
  }

  /* ---------- Empty state ---------- */
  .empty-state {
    padding: 2.75rem 1.5rem; text-align: center; color: var(--apple-gray);
    display: flex; flex-direction: column; align-items: center; gap: 1rem;
  }
  .empty-state svg { width: 2.6rem; height: 2.6rem; color: #c7c7cc; }
  .empty-state p { margin: 0; }
  .empty-state .es-title { font-size: 0.95rem; font-weight: 600; }
  .empty-state .es-sub { font-size: 0.82rem; }

  /* ---------- Drag overlay ---------- */
  .drag-overlay {
    position: fixed; inset: 0; z-index: 40; pointer-events: none;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 113, 227, 0.08);
    border: 3px dashed rgba(0, 113, 227, 0.45);
    opacity: 0; transition: opacity 0.15s ease;
  }
  .drag-overlay .drag-inner { text-align: center; padding: 0 1rem; }
  .drag-overlay svg { width: 4rem; height: 4rem; margin: 0 auto 0.75rem; color: var(--apple-blue); }
  .drag-overlay p { font-size: 1.25rem; font-weight: 600; color: var(--apple-blue); margin: 0; }

  /* ---------- Toast (frosted dark pill) ---------- */
  .apple-toast {
    position: fixed; top: 5rem; right: 1.25rem; z-index: 9999; pointer-events: none;
    display: flex; align-items: center; gap: 0.5rem;
    background: rgba(29, 29, 31, 0.86); color: #fff;
    -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
    font-size: 0.875rem; padding: 0.625rem 1rem; border-radius: 980px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.30);
  }
  .apple-toast svg { width: 1rem; height: 1rem; color: #30d158; flex: none; }

  /* ---------- Preview lightbox (immersive, no white shell) ---------- */
  .lightbox {
    position: fixed; inset: 0; z-index: 100;
    display: flex; flex-direction: column;
    background: rgba(8, 8, 10, 0.9);
    -webkit-backdrop-filter: blur(18px) saturate(120%); backdrop-filter: blur(18px) saturate(120%);
  }
  /* Top frosted bar — filename + position + close */
  .lightbox-top {
    position: absolute; top: 0; left: 0; right: 0; z-index: 30;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 0.8rem 1.1rem;
    background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0));
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  .lightbox-title { display: flex; align-items: baseline; gap: 0.7rem; min-width: 0; }
  .lightbox-name {
    font-size: 0.92rem; font-weight: 600; color: #fff;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .lightbox-meta { font-size: 0.78rem; font-weight: 500; color: rgba(255,255,255,0.55); flex: none; }
  .lightbox-close {
    width: 2.4rem; height: 2.4rem; border-radius: 50%; flex: none;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.14); color: #fff; border: none; cursor: pointer;
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    transition: background 0.2s ease, transform 0.2s var(--apple-ease);
  }
  .lightbox-close:hover { background: rgba(255,255,255,0.26); }
  .lightbox-close:active { transform: scale(0.92); }
  .lightbox-close svg { width: 1.05rem; height: 1.05rem; }

  /* Stage — media centred on the dark canvas, no borders */
  .lightbox-stage {
    flex: 1 1 auto; min-height: 0; position: relative;
    display: flex; align-items: center; justify-content: center;
    padding: 4.5rem 4.75rem 3.5rem;
  }
  .lightbox-stage img,
  .lightbox-stage video {
    display: block; max-width: 100%; max-height: 100%;
    width: auto; height: auto; object-fit: contain;
    border-radius: 6px; box-shadow: 0 24px 60px rgba(0,0,0,0.5);
  }
  .lightbox-nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 20;
    width: 3rem; height: 3rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.12); color: #fff; border: none; cursor: pointer;
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    transition: background 0.2s ease, transform 0.2s var(--apple-ease);
  }
  .lightbox-nav:hover { background: rgba(255,255,255,0.24); }
  .lightbox-nav:active { transform: translateY(-50%) scale(0.92); }
  .lightbox-nav svg { width: 1.35rem; height: 1.35rem; }

  /* Bottom frosted bar — meta + download */
  .lightbox-bottom {
    position: absolute; bottom: 0; left: 0; right: 0; z-index: 30;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 0.75rem 1.1rem;
    background: linear-gradient(0deg, rgba(0,0,0,0.55), rgba(0,0,0,0));
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  .lightbox-meta-row { display: flex; align-items: center; gap: 0.7rem; font-size: 0.78rem; font-weight: 500; color: rgba(255,255,255,0.6); min-width: 0; }
  .lightbox-mime { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lightbox-dl {
    display: inline-flex; align-items: center; gap: 0.4rem; flex: none;
    min-height: 2.15rem; padding: 0.4rem 1rem; border-radius: 980px;
    background: var(--apple-blue); color: #fff;
    font-size: 0.82rem; font-weight: 600; text-decoration: none;
    box-shadow: 0 6px 18px rgba(0, 113, 227, 0.35);
    transition: background 0.2s ease, transform 0.2s var(--apple-ease);
  }
  .lightbox-dl:hover { background: #2487e6; }
  .lightbox-dl:active { transform: scale(0.96); }
  .lightbox-dl svg { width: 0.95rem; height: 0.95rem; }

  /* Non-previewable fallback on dark */
  .lightbox-fallback {
    display: flex; flex-direction: column; align-items: center; gap: 1rem;
    text-align: center; padding: 2rem 2.5rem; max-width: 26rem; color: #fff;
  }
  .lightbox-fallback svg { width: 3.6rem; height: 3.6rem; color: rgba(255,255,255,0.35); }
  .lightbox-fallback .fb-title { font-size: 1rem; font-weight: 600; }
  .lightbox-fallback .fb-sub { font-size: 0.85rem; color: rgba(255,255,255,0.55); }

  @media (max-width: 640px) {
    .lightbox-stage { padding: 4rem 0.75rem 3.25rem; }
    .lightbox-nav { width: 2.5rem; height: 2.5rem; }
    .lightbox-nav svg { width: 1.1rem; height: 1.1rem; }
    .lightbox-bottom, .lightbox-top { padding: 0.7rem 0.85rem; }
    .lightbox-name { font-size: 0.84rem; max-width: 45vw; }
  }

  /* ---------- Modals (Apple style) ---------- */
  .apple-modal-bg {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center; padding: 1rem;
    background: rgba(0, 0, 0, 0.4);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  .apple-modal {
    background: #fff; border-radius: var(--apple-radius-md);
    box-shadow: 0 26px 68px rgba(0, 0, 0, 0.25);
    width: 100%; max-width: 24rem; overflow: hidden;
  }
  .modal-head { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem 0.5rem; }
  .modal-head h3 { font-size: 1.05rem; font-weight: 700; margin: 0; }
  .modal-close {
    width: 2rem; height: 2rem; border-radius: 50%; display: flex;
    align-items: center; justify-content: center; color: #8e8e93;
    background: none; border: none; cursor: pointer;
  }
  .modal-close:hover { background: rgba(0,0,0,0.05); color: var(--apple-text); }
  .modal-close svg { width: 1rem; height: 1rem; }
  .modal-body { padding: 0.5rem 1.5rem 1.5rem; }
  .modal-desc { font-size: 0.85rem; color: var(--apple-gray); margin: 0 0 1rem; }

  .apple-input {
    width: 100%; height: 2.75rem; padding: 0 0.9rem;
    border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 14px;
    font-size: 0.9rem; color: var(--apple-text); background: var(--apple-bg);
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
  }
  .apple-input:focus { outline: none; background: #fff; border-color: rgba(0,113,227,0.5); box-shadow: 0 0 0 4px rgba(0,113,227,0.14); }

  .modal-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 1.25rem; }
  .modal-footer .right { display: flex; gap: 0.5rem; }
  .text-link { font-size: 0.875rem; font-weight: 600; color: var(--apple-red); background: none; border: none; cursor: pointer; padding: 0; }
  .text-link:hover { text-decoration: underline; }

  /* ---------- Accessibility: visible keyboard focus ---------- */
  a:focus-visible, button:focus-visible {
    outline: 2px solid var(--apple-blue); outline-offset: 3px; border-radius: 12px;
  }
  .apple-btn:focus-visible, .icon-btn:focus-visible, .badge:focus-visible, .modal-close:focus-visible { border-radius: 980px; }

  /* ---------- Small screens ---------- */
  @media (max-width: 640px) {
    .library-header { padding: 1.35rem 1.1rem 1rem; }
    .file-row { padding: 0.85rem 1.1rem; }
  }
  @media (prefers-reduced-motion: reduce) {
    .apple-btn, .icon-btn, .file-row, .badge, .fan-card { transition: none !important; }
  }
</style>
{% endblock %}

{% block content %}
<div x-data="fileManager()"
     @open-expiry.window="openExpiry($event.detail)"
     @copy-link.window="copyAndToast($event.detail.url)"
     @open-preview.window="openPreview($event.detail)">

<input type="file" id="globalFileInput" multiple class="hidden" aria-hidden="true">

<!-- Full-page drag overlay -->
<div id="dragOverlay" class="drag-overlay" aria-hidden="true">
    <div class="drag-inner">
        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                  d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/>
        </svg>
        <p>{% trans "Drop files to upload" %}</p>
    </div>
</div>

<div class="apple-wrap">

    <!-- File library card -->
    <section class="apple-card" style="margin-top: 1.5rem;" aria-labelledby="files-heading">

        <!-- Library header (title + count + upload) -->
        <div class="library-header">
            <div class="library-title-group">
                <h2 id="files-heading" class="section-title">{% trans "Files" %}</h2>
                <p class="library-count">
                    <span x-text="filterType !== 'all' ? visibleFiles.length + ' / ' + allFiles.length : visibleFiles.length"></span>
                    <span x-text="visibleFiles.length === 1 ? '{% trans "file" %}' : '{% trans "files" %}'">{% trans "files" %}</span>
                </p>
            </div>
            <div class="library-actions">
                <!-- Layout switcher: list / grid / carousel (persisted in localStorage) -->
                <div class="layout-switcher" role="group" aria-label="{% trans 'View layout' %}">
                    <button type="button" @click="setLayout('list')"
                            class="layout-btn" :class="layout === 'list' ? 'active' : ''"
                            :title="'{% trans "List view" %}'" aria-label="{% trans "List view" %}"
                            :aria-pressed="layout === 'list'">
                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
                        </svg>
                    </button>
                    <button type="button" @click="setLayout('grid')"
                            class="layout-btn" :class="layout === 'grid' ? 'active' : ''"
                            :title="'{% trans "Grid view" %}'" aria-label="{% trans "Grid view" %}"
                            :aria-pressed="layout === 'grid'">
                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4h6v6H4zM14 4h6v6h-6zM4 14h6v6H4zM14 14h6v6h-6z"/>
                        </svg>
                    </button>
                    <button type="button" @click="setLayout('carousel')"
                            class="layout-btn" :class="layout === 'carousel' ? 'active' : ''"
                            :title="'{% trans "Carousel view" %}'" aria-label="{% trans "Carousel view" %}"
                            :aria-pressed="layout === 'carousel'">
                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h3a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2V9zm11 0a2 2 0 012-2h3a2 2 0 012 2v6a2 2 0 01-2 2h-3a2 2 0 01-2-2V9z"/>
                        </svg>
                    </button>
                </div>
                <button type="button" @click="openPicker()" class="apple-btn apple-btn-primary">
                    <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 5v14m-7-7h14"/>
                    </svg>
                    {% trans "Upload Files" %}
                </button>
            </div>
        </div>

        <!-- Type filter bar (persisted in localStorage) -->
        <div class="filter-bar" role="group" aria-label="{% trans 'Filter by file type' %}">
            <button type="button" class="filter-chip" :class="filterType === 'all' ? 'active' : ''"
                    @click="setFilter('all')" aria-pressed="filterType === 'all'">
                {% trans "All" %}<span class="chip-count" x-text="countOf('all')"></span>
            </button>
            <template x-for="t in filterTypes" :key="t.key">
                <button type="button" class="filter-chip" :class="filterType === t.key ? 'active' : ''"
                        @click="setFilter(t.key)" x-show="countOf(t.key) > 0"
                        :aria-pressed="filterType === t.key">
                    <span x-text="t.label"></span><span class="chip-count" x-text="countOf(t.key)"></span>
                </button>
            </template>
        </div>

        <!-- Hidden JSON template of each initial file -->
        <script id="initial-file-data" type="application/json" aria-hidden="true">
        [{% for file in files %}{
            "id": "{{ file.pk }}",
            "name": "{{ file.name|escapejs }}",
            "mime_type": "{{ file.mime_type|escapejs }}",
            "size": "{{ file.formatted_size }}",
            "download_count": {{ file.download_count }},
            "created_at": "{{ file.created_at|date:'c' }}",
            "is_public": {{ file.is_public|lower }},
            "public_url": "{{ file.public_url|escapejs }}",
            "expires_at": "{{ file.expires_at|date:'c' }}",
            "download_url": "{{ file.download_url|escapejs }}",
            "is_image": {{ file.is_image|lower }},
            "thumbnail_url": "{{ file.thumbnail_url|escapejs }}"
        }{% if not forloop.last %},{% endif %}{% endfor %}]
        </script>

        <!-- List body. Three layouts share one Alpine scope: list / grid / carousel. -->
        <ul x-ref="listEl" x-show="layout === 'list'" role="list" class="file-list" @remove-file.window="removeFile($event.detail.id)">
            <template x-for="f in visibleFiles" :key="f.id">
                <li class="file-row" x-data="fileRow(f)" :data-pk="f.id">

                    <!-- File icon -->
                    <span class="file-icon" aria-hidden="true">
                        <svg x-show="f.is_image" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                        </svg>
                        <svg x-show="!f.is_image" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                        </svg>
                    </span>

                    <!-- Filename (clickable -> preview) + metadata -->
                    <div class="file-main">
                        <a href="#" @click.prevent="$root.dispatchEvent(new CustomEvent('open-preview', {bubbles:true, detail:{name:f.name, mimeType:f.mime_type, url:f.download_url}}))"
                           class="file-name"
                           :title="f.name"
                           x-text="f.name"></a>

                        <!-- Metadata line -->
                        <dl class="file-meta">
                            <dt class="sr-only">{% trans "Size" %}</dt>
                            <dd class="whitespace-nowrap" x-text="f.size"></dd>
                            <span class="sep" aria-hidden="true">·</span>
                            <dt class="sr-only">{% trans "Type" %}</dt>
                            <dd class="truncate" style="max-width:12rem" x-text="f.mime_type" :title="f.mime_type"></dd>
                            <span class="sep" aria-hidden="true">·</span>
                            <dt class="sr-only">{% trans "Uploaded" %}</dt>
                            <dd class="whitespace-nowrap" x-text="formatDate(f.created_at)"></dd>
                            <span class="sep" aria-hidden="true">·</span>
                            <dt class="sr-only">{% trans "Downloads" %}</dt>
                            <dd class="whitespace-nowrap">
                                <span x-text="f.download_count"></span>
                                <span style="color:#c7c7cc;margin-left:0.15rem">{% trans "downloads" %}</span>
                            </dd>
                        </dl>

                        <!-- Public status + copy link -->
                        <div class="file-sub">
                            <button type="button" @click="togglePublic()"
                                    class="badge"
                                    :class="isPublic ? 'badge-public' : 'badge-private'"
                                    :title="isPublic ? '{% trans "Click to make private" %}' : '{% trans "Click to make public" %}'">
                                <span x-show="isPublic" aria-hidden="true">●</span>
                                <span x-show="!isPublic" aria-hidden="true">○</span>
                                <span x-text="isPublic ? '{% trans "Public" %}' : '{% trans "Private" %}'"></span>
                            </button>

                            <span x-show="isPublic && expiresAt"
                                  class="expiry-chip"
                                  :class="isExpired ? 'expired' : ''"
                                  @click="$root.dispatchEvent(new CustomEvent('open-expiry', {bubbles:true, detail:{pk, expiresAt}}))"
                                  x-text="isExpired ? '⚠ {% trans "Expired" %}' : '⏱ ' + formatExpiry(expiresAt)"></span>

                            <span x-show="isPublic && !expiresAt"
                                  class="expiry-chip"
                                  @click="$root.dispatchEvent(new CustomEvent('open-expiry', {bubbles:true, detail:{pk, expiresAt}}))">
                                {% trans "No expiry" %}
                            </span>

                            <button type="button" x-show="isPublic" @click="copyPublicUrl()" class="apple-link">
                                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/>
                                </svg>
                                {% trans "Copy link" %}
                            </button>
                        </div>
                    </div>

                    <!-- Action buttons -->
                    <div class="file-actions">
                        <a :href="f.download_url" :download="f.name"
                           class="icon-btn blue"
                           :title="'{% trans "Download / View" %}'" aria-label="{% trans "Download / View" %}">
                            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
                            </svg>
                        </a>
                        <button type="button" x-show="isPublic"
                                @click="$root.dispatchEvent(new CustomEvent('open-expiry', {bubbles:true, detail:{pk, expiresAt}}))"
                                class="icon-btn amber"
                                title="{% trans 'Set expiry' %}" aria-label="{% trans 'Set expiry' %}">
                            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                            </svg>
                        </button>
                        <button type="button" @click="confirmDelete()"
                                class="icon-btn red"
                                title="{% trans 'Delete' %}" aria-label="{% trans 'Delete' %}">
                            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                            </svg>
                        </button>
                    </div>
                </li>
            </template>
        </ul>

        <!-- ── Grid view (macOS Finder style) ─────────────────────────── -->
        <div x-show="layout === 'grid'" x-cloak class="file-grid" @remove-file.window="removeFile($event.detail.id)">
            <template x-for="f in visibleFiles" :key="'g' + f.id">
                <div class="grid-card"
                     @click="openPreview({name:f.name, mimeType:f.mime_type, url:f.download_url})"
                     :title="f.name" role="button" tabindex="0"
                     @keydown.enter.prevent="openPreview({name:f.name, mimeType:f.mime_type, url:f.download_url})">

                    <!-- Thumbnail: server-generated (Pillow/ffmpeg) for media, type icon otherwise -->
                    <div class="grid-thumb">
                        <img x-show="hasThumb(f)" :src="f.thumbnail_url || f.download_url" :alt="f.name"
                             loading="lazy" decoding="async" @error="$el.style.display='none'">
                        <span class="grid-file-icon" x-show="!hasThumb(f)" aria-hidden="true">
                            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                      d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                            </svg>
                        </span>
                        <span class="thumb-badge" x-show="isVideo(f)" aria-hidden="true">
                            <svg fill="currentColor" viewBox="0 0 24 24">
                                <path d="M8 5.14v13.72c0 .82.9 1.32 1.6.9l10.6-6.86a1.06 1.06 0 000-1.8L9.6 4.24a1.06 1.06 0 00-1.6.9z"/>
                            </svg>
                        </span>
                    </div>

                    <!-- Name + meta -->
                    <div style="display:flex;flex-direction:column;gap:0.2rem;min-width:0">
                        <span class="grid-name" x-text="f.name"></span>
                        <span class="grid-meta" x-text="f.size"></span>
                    </div>

                    <!-- Public/private badge -->
                    <span class="grid-badge" :class="f.is_public ? 'pub' : 'priv'">
                        <span x-show="f.is_public" aria-hidden="true">●</span>
                        <span x-show="!f.is_public" aria-hidden="true">○</span>
                        <span x-text="f.is_public ? '{% trans "Public" %}' : '{% trans "Private" %}'"></span>
                    </span>
                </div>
            </template>
        </div>

        <!-- ── Carousel view (iOS cover-flow style) ───────────────────── -->
        <div x-show="layout === 'carousel'" x-cloak class="file-carousel" @remove-file.window="removeFile($event.detail.id)">
            <button type="button" class="carousel-nav prev" @click="scrollCarousel(-1)"
                    title="{% trans 'Previous' %}" aria-label="{% trans 'Previous' %}">
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                </svg>
            </button>
            <div class="carousel-track" x-ref="carouselTrack">
                <template x-for="f in visibleFiles" :key="'c' + f.id">
                    <div class="carousel-card"
                         @click="openPreview({name:f.name, mimeType:f.mime_type, url:f.download_url})"
                         :title="f.name" role="button" tabindex="0"
                         @keydown.enter.prevent="openPreview({name:f.name, mimeType:f.mime_type, url:f.download_url})">
                        <div class="carousel-cover">
                            <img x-show="hasThumb(f)" :src="f.thumbnail_url || f.download_url" :alt="f.name"
                                 loading="lazy" decoding="async" @error="$el.style.display='none'">
                            <span class="carousel-file-icon" x-show="!hasThumb(f)" aria-hidden="true">
                                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                          d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                                </svg>
                            </span>
                            <span class="thumb-badge" x-show="isVideo(f)" aria-hidden="true">
                                <svg fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M8 5.14v13.72c0 .82.9 1.32 1.6.9l10.6-6.86a1.06 1.06 0 000-1.8L9.6 4.24a1.06 1.06 0 00-1.6.9z"/>
                                </svg>
                            </span>
                        </div>
                        <span class="carousel-name" x-text="f.name"></span>
                        <span class="carousel-meta" x-text="f.size"></span>
                    </div>
                </template>
            </div>
            <button type="button" class="carousel-nav next" @click="scrollCarousel(1)"
                    title="{% trans 'Next' %}" aria-label="{% trans 'Next' %}">
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                </svg>
            </button>
        </div>

        <!-- Shared empty state (all layouts) -->
        <div x-show="visibleFiles.length === 0" class="empty-state" style="border-top:1px solid var(--apple-separator)">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                      d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/>
            </svg>
            <p class="es-title">{% trans "No files yet" %}</p>
            <p class="es-sub">{% trans "Drag files anywhere on this page, or click Upload Files above." %}</p>
        </div>
    </section>

    <div style="height: 2.5rem;" aria-hidden="true"></div>

</div>

<!-- ── Toast notification ──────────────────────────────────────── -->
<div x-show="toastVisible" x-cloak
     x-transition:enter="transition ease-out duration-200"
     x-transition:enter-start="opacity-0 -translate-y-1"
     x-transition:enter-end="opacity-100 translate-y-0"
     x-transition:leave="transition ease-in duration-150"
     x-transition:leave-start="opacity-100 translate-y-0"
     x-transition:leave-end="opacity-0 -translate-y-1"
     class="apple-toast"
     role="status" aria-live="polite">
    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
    </svg>
    <span x-text="toastMsg"></span>
</div>

<!-- ── Global Expiry Modal ─────────────────────────────────────── -->
<div x-show="expiryModal.open" x-cloak
     x-transition:enter="transition ease-out duration-150"
     x-transition:enter-start="opacity-0"
     x-transition:enter-end="opacity-100"
     x-transition:leave="transition ease-in duration-100"
     x-transition:leave-start="opacity-100"
     x-transition:leave-end="opacity-0"
     class="apple-modal-bg"
     @click.self="expiryModal.open = false"
     role="dialog" aria-modal="true" :aria-label="'{% trans "Set expiry date" %}'">
    <div class="apple-modal"
         x-transition:enter="transition ease-out duration-150"
         x-transition:enter-start="opacity-0 scale-95"
         x-transition:enter-end="opacity-100 scale-100">
        <div class="modal-head">
            <h3>{% trans "Set Expiry Date" %}</h3>
            <button type="button" @click="expiryModal.open = false" class="modal-close"
                    aria-label="{% trans 'Close' %}">
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                </svg>
            </button>
        </div>
        <div class="modal-body">
            <p class="modal-desc">{% trans "Leave blank for no expiry. The public link will stop working after this date." %}</p>
            <input type="datetime-local" x-model="expiryModal.expiryInput" class="apple-input">
            <div class="modal-footer">
                <button type="button" @click="clearExpiry()" class="text-link">{% trans "Clear expiry" %}</button>
                <div class="right">
                    <button type="button" @click="expiryModal.open = false" class="apple-btn apple-btn-secondary">{% trans "Cancel" %}</button>
                    <button type="button" @click="saveExpiry()" class="apple-btn apple-btn-primary">{% trans "Save" %}</button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- ── File Preview Lightbox (immersive) ───────────────────────── -->
<div x-show="previewModal.open" x-cloak
     class="lightbox"
     @click.self="closePreview()"
     @keydown.escape.window="closePreview()"
     role="dialog" aria-modal="true" aria-label="{% trans 'File preview' %}">

    <!-- Top frosted bar: filename + position + close -->
    <div class="lightbox-top">
        <div class="lightbox-title">
            <span class="lightbox-name" x-text="previewModal.name"></span>
            <span class="lightbox-meta" x-show="fileList.length > 1"
                  x-text="(currentIndex + 1) + ' / ' + fileList.length"></span>
        </div>
        <button type="button" @click="closePreview()" class="lightbox-close" aria-label="{% trans 'Close' %}">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
            </svg>
        </button>
    </div>

    <!-- Stage: media centred on the dark canvas -->
    <div class="lightbox-stage"
         @touchstart.passive="swipeStart = $event.touches[0].clientX"
         @touchend.passive="onSwipeEnd($event)">

        <button type="button" x-show="fileList.length > 1" @click="prevFile()"
                class="lightbox-nav" style="left:1rem"
                title="{% trans 'Previous' %} (←)" aria-label="{% trans 'Previous' %}">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
            </svg>
        </button>
        <button type="button" x-show="fileList.length > 1" @click="nextFile()"
                class="lightbox-nav" style="right:1rem"
                title="{% trans 'Next' %} (→)" aria-label="{% trans 'Next' %}">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
            </svg>
        </button>

        <img x-show="previewModal.open && previewModal.mimeType.startsWith('image/')" x-cloak
             :src="previewModal.url" :alt="previewModal.name">

        <video x-show="previewModal.open && previewModal.mimeType.startsWith('video/')" x-cloak
               controls playsinline webkit-playsinline
               :src="previewModal.url"></video>

        <div x-show="previewModal.open && previewModal.mimeType.startsWith('audio/')" x-cloak
             class="lightbox-fallback" style="width:22rem">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"/>
            </svg>
            <p class="fb-title" x-text="previewModal.name"></p>
            <audio controls style="width:100%" :src="previewModal.url"></audio>
        </div>

        <div x-show="previewModal.open && !previewModal.mimeType.startsWith('image/') && !previewModal.mimeType.startsWith('video/') && !previewModal.mimeType.startsWith('audio/')" x-cloak
             class="lightbox-fallback">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
            </svg>
            <p class="fb-title">{% trans "Unfortunately, we can't preview this file." %}</p>
            <p class="fb-sub">{% trans "But you can click the button below to download it." %}</p>
        </div>
    </div>

    <!-- Bottom frosted bar: mime + download -->
    <div class="lightbox-bottom">
        <div class="lightbox-meta-row">
            <span class="lightbox-mime" x-text="previewModal.mimeType"></span>
        </div>
        <a :href="previewModal.url" :download="previewModal.name" class="lightbox-dl">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
            </svg>
            {% trans "Download" %}
        </a>
    </div>
</div>

</div><!-- /Alpine scope -->

<script>
function fileManager() {
    return {
        visibleFiles: [],
        allFiles: [],
        filterType: 'all',
        filterTypes: [
            { key: 'image', label: '{% trans "Image" %}' },
            { key: 'video', label: '{% trans "Video" %}' },
            { key: 'audio', label: '{% trans "Audio" %}' },
            { key: 'text', label: '{% trans "Text" %}' },
            { key: 'document', label: '{% trans "Document" %}' },
            { key: 'archive', label: '{% trans "Archive" %}' },
            { key: 'binary', label: '{% trans "Other" %}' },
        ],
        uploadProgress: { total: 0, done: 0, failed: 0 },
        swipeStart: 0,
        layout: 'list',
        toastMsg: '',
        toastVisible: false,
        _toastTimer: null,
        expiryModal: { open: false, pk: '', expiryInput: '' },
        previewModal: { open: false, name: '', mimeType: '', url: '' },
        fileList: [],
        currentIndex: -1,

        init() {
            // Restore persisted layout preference (list | grid | carousel)
            try {
                const saved = localStorage.getItem('links-files-layout');
                if (saved === 'grid' || saved === 'carousel' || saved === 'list') this.layout = saved;
            } catch (e) { /* localStorage unavailable — keep default */ }

            // Seed initial file list from server-rendered JSON
            try {
                this.allFiles = JSON.parse(document.getElementById('initial-file-data').textContent);
            } catch (e) {
                this.allFiles = [];
            }

            // Restore persisted type filter
            try {
                const savedFilter = localStorage.getItem('links-files-filter');
                if (savedFilter && this.filterTypes.some(t => t.key === savedFilter)) this.filterType = savedFilter;
            } catch (e) { /* ignore */ }

            this.applyFilter();
            // Build file list for preview keyboard navigation
            this.fileList = this.visibleFiles.map(f => ({ name: f.name, mimeType: f.mime_type, url: f.download_url }));

            // Arrow key navigation in preview
            window.addEventListener('keydown', e => {
                if (!this.previewModal.open) return;
                if (e.key === 'ArrowRight') { e.preventDefault(); this.nextFile(); }
                else if (e.key === 'ArrowLeft') { e.preventDefault(); this.prevFile(); }
            });

            const overlay = document.getElementById('dragOverlay');
            const input = document.getElementById('globalFileInput');
            let dragCounter = 0;

            document.addEventListener('dragenter', e => {
                if (!e.dataTransfer || !e.dataTransfer.types || !e.dataTransfer.types.includes('Files')) return;
                dragCounter++;
                overlay.style.opacity = '1';
            });
            document.addEventListener('dragleave', () => {
                dragCounter = Math.max(0, dragCounter - 1);
                if (dragCounter === 0) overlay.style.opacity = '0';
            });
            document.addEventListener('dragover', e => e.preventDefault());
            document.addEventListener('drop', e => {
                e.preventDefault();
                dragCounter = 0;
                overlay.style.opacity = '0';
                const files = e.dataTransfer && e.dataTransfer.files;
                if (files && files.length) this.uploadFiles(files);
            });

            input.addEventListener('change', e => {
                if (e.target.files.length) this.uploadFiles(e.target.files);
                e.target.value = '';
            });

            // Re-sync expiry updates propagated from rows
            window.addEventListener('expiry-updated', e => {
                const id = String(e.detail.pk);
                const f = this.visibleFiles.find(x => String(x.id) === id);
                if (f) {
                    f.expires_at = e.detail.expires_at || null;
                }
            });

            // 3D cover-flow: recompute card transforms while the track scrolls
            this.$nextTick(() => {
                const track = this.$refs.carouselTrack;
                if (track) {
                    let raf = null;
                    track.addEventListener('scroll', () => {
                        if (raf) return;
                        raf = requestAnimationFrame(() => {
                            raf = null;
                            this._applyCoverFlow();
                        });
                    }, { passive: true });
                    this._applyCoverFlow();
                }
            });
        },

        openPicker() {
            document.getElementById('globalFileInput').click();
        },

        // ── Layout switching (list / grid / carousel) ─────────────────
        setLayout(layout) {
            this.layout = layout;
            try { localStorage.setItem('links-files-layout', layout); } catch (e) { /* ignore */ }
            // Re-snap the carousel to the start when switching into it
            if (layout === 'carousel') {
                this.$nextTick(() => {
                    const track = this.$refs.carouselTrack;
                    if (track && track.scrollTo) track.scrollTo({ left: 0, behavior: 'auto' });
                    this._applyCoverFlow();
                });
            }
        },
        // 3D cover-flow: rotate/scale/fade each card by its distance from the track centre
        _applyCoverFlow() {
            const track = this.$refs.carouselTrack;
            if (!track) return;
            const cards = Array.from(track.querySelectorAll('.carousel-card'));
            if (!cards.length) return;
            const centre = track.scrollLeft + track.clientWidth / 2;
            const cardW = cards[0].offsetWidth;
            const maxAngle = 42;
            cards.forEach((card) => {
                const cardCentre = card.offsetLeft + cardW / 2 - track.scrollLeft;
                const dist = (cardCentre - track.clientWidth / 2) / track.clientWidth; // -0.5..0.5
                const abs = Math.min(Math.abs(dist), 0.6);
                const angle = dist * maxAngle * 2; // rotateY
                const scale = 1 - abs * 0.22;
                const opacity = 1 - abs * 0.55;
                const z = Math.round(20 - abs * 20);
                card.style.transform = `perspective(1400px) translateY(${abs * -10}px) rotateY(${angle.toFixed(1)}deg) scale(${scale.toFixed(3)})`;
                card.style.opacity = opacity.toFixed(3);
                card.style.zIndex = z;
                card.classList.toggle('active', abs < 0.08);
            });
        },
        isVideo(f) {
            const mime = (f.mime_type || '').toLowerCase();
            return mime.startsWith('video/') || /\.(mp4|webm|mov|m4v)$/i.test(f.name || '');
        },
        hasThumb(f) {
            // Media files get a server-generated thumbnail; everything else shows a type icon
            const mime = (f.mime_type || '').toLowerCase();
            return mime.startsWith('image/') || mime.startsWith('video/')
                || /\.(jpe?g|png|gif|webp|avif|svg|mp4|webm|mov|m4v)$/i.test(f.name || '');
        },
        scrollCarousel(dir) {
            const track = this.$refs.carouselTrack;
            if (!track) return;
            const card = track.querySelector('.carousel-card');
            const step = card ? card.offsetWidth + 16 : track.clientWidth * 0.8;
            track.scrollBy({ left: dir * step, behavior: 'smooth' });
        },

        // ── Type filtering ──────────────────────────────────────────
        fileTypeOf(f) {
            const m = (f.mime_type || '').toLowerCase();
            if (m.startsWith('image/')) return 'image';
            if (m.startsWith('video/')) return 'video';
            if (m.startsWith('audio/')) return 'audio';
            if (m.startsWith('text/')) return 'text';
            const docs = [
                'application/pdf', 'application/msword', 'application/rtf',
                'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
                'application/vnd.ms-excel',
                'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
                'application/vnd.ms-powerpoint',
                'application/vnd.openxmlformats-officedocument.presentationml.presentation',
            ];
            if (docs.includes(m)) return 'document';
            if (/(zip|gzip|tar|rar|7z|compress|x-7z|x-zip|x-tar|x-gzip|x-rar|x-compressed)/.test(m)) return 'archive';
            return 'binary';
        },
        countOf(t) {
            if (t === 'all') return this.allFiles.length;
            return this.allFiles.filter(f => this.fileTypeOf(f) === t).length;
        },
        setFilter(t) {
            this.filterType = t;
            try { localStorage.setItem('links-files-filter', t); } catch (e) { /* ignore */ }
            this.applyFilter();
        },
        applyFilter() {
            this.visibleFiles = this.filterType === 'all'
                ? [...this.allFiles]
                : this.allFiles.filter(f => this.fileTypeOf(f) === this.filterType);
            this.fileList = this.visibleFiles.map(f => ({ name: f.name, mimeType: f.mime_type, url: f.download_url }));
            this.$nextTick(() => this._applyCoverFlow());
        },

        // ── Uploads (progress via toast; HUD removed) ─────────────────
        uploadFiles(fileList) {
            const files = Array.from(fileList);
            if (!files.length) return;
            this.uploadProgress = { total: files.length, done: 0, failed: 0 };
            this._toastUploadProgress();
            files.forEach(file => this._uploadOne(file));
        },

        _toastUploadProgress() {
            const { total, done, failed } = this.uploadProgress;
            if (done + failed >= total) {
                if (!failed) this.showToast('✓ ' + total + ' {% trans "uploaded" %}');
                else this.showToast(done + ' {% trans "uploaded" %}, ' + failed + ' {% trans "failed" %}');
            } else {
                this.showToast('{% trans "Uploading" %} ' + (done + failed + 1) + ' / ' + total + '…');
            }
        },

        _uploadOne(file) {
            const formData = new FormData();
            formData.append('files', file);
            formData.append('csrfmiddlewaretoken', getCsrfToken());

            const xhr = new XMLHttpRequest();
            xhr.onload = () => {
                if (xhr.status >= 200 && xhr.status < 300) {
                    this.uploadProgress.done++;
                    // Insert uploaded rows from server response — no full page reload
                    try {
                        const data = JSON.parse(xhr.responseText);
                        const inserted = (data && data.uploaded) || [];
                        inserted.forEach(rec => {
                            const newFile = {
                                id: rec.id,
                                name: rec.name,
                                mime_type: rec.mime_type || guessMime(file.name),
                                size: rec.formatted_size || formatBytes(rec.size || file.size),
                                download_count: 0,
                                created_at: rec.created_at || new Date().toISOString(),
                                is_public: false,
                                public_url: '',
                                expires_at: null,
                                download_url: rec.download_url || ('/ui/files/' + rec.id + '-' + encodeURIComponent(rec.name)),
                                is_image: (rec.mime_type || guessMime(file.name)).startsWith('image/'),
                                thumbnail_url: rec.thumbnail_url || '',
                            };
                            // Avoid inserting duplicate (key by id); add to the source
                            // list and re-apply the active filter so the new row shows
                            // only when it matches the current type filter.
                            if (!this.allFiles.some(x => String(x.id) === String(newFile.id))) {
                                this.allFiles.unshift(newFile);
                                this.applyFilter();
                                this.$nextTick(() => this._applyCoverFlow());
                            }
                        });
                    } catch (e) { /* ignore parse error */ }
                } else {
                    this.uploadProgress.failed++;
                }
                this._toastUploadProgress();
            };
            xhr.onerror = () => {
                this.uploadProgress.failed++;
                this._toastUploadProgress();
            };
            xhr.open('POST', '{% url "file-upload" %}');
            xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
            xhr.send(formData);
        },

        removeFile(id) {
            this.allFiles = this.allFiles.filter(f => String(f.id) !== String(id));
            this.applyFilter();
        },

        // ── Preview modal ────────────────────────────────────────────
        openPreview({ name, mimeType, url }) {
            this.currentIndex = this.fileList.findIndex(f => f.url === url);
            if (this.currentIndex === -1) this.currentIndex = 0;
            this.previewModal = { open: true, name, mimeType, url };
        },
        prevFile() {
            if (this.fileList.length < 2) return;
            this.currentIndex = (this.currentIndex - 1 + this.fileList.length) % this.fileList.length;
            const f = this.fileList[this.currentIndex];
            this.previewModal = { open: true, name: f.name, mimeType: f.mimeType, url: f.url };
        },
        nextFile() {
            if (this.fileList.length < 2) return;
            this.currentIndex = (this.currentIndex + 1) % this.fileList.length;
            const f = this.fileList[this.currentIndex];
            this.previewModal = { open: true, name: f.name, mimeType: f.mimeType, url: f.url };
        },
        closePreview() {
            this.previewModal.open = false;
            document.querySelectorAll('video, audio').forEach(el => el.pause());
        },
        // Touch swipe navigation inside the lightbox (mobile)
        onSwipeEnd(ev) {
            if (this.fileList.length < 2) return;
            const endX = ev.changedTouches[0].clientX;
            const dx = endX - this.swipeStart;
            if (Math.abs(dx) > 48) {
                if (dx < 0) this.nextFile(); else this.prevFile();
            }
        },

        // ── Expiry modal ─────────────────────────────────────────────
        openExpiry({ pk, expiresAt }) {
            this.expiryModal.pk = pk;
            this.expiryModal.expiryInput = expiresAt ? new Date(expiresAt).toISOString().slice(0, 16) : '';
            this.expiryModal.open = true;
        },
        saveExpiry() {
            const expires_at = this.expiryModal.expiryInput ? new Date(this.expiryModal.expiryInput).toISOString() : null;
            fetch(`/ui/files/${this.expiryModal.pk}/set-expiry/`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'X-CSRFToken': getCsrfToken() },
                body: JSON.stringify({ expires_at }),
            }).then(r => r.json()).then(d => {
                this.expiryModal.open = false;
                window.dispatchEvent(new CustomEvent('expiry-updated', { detail: { pk: this.expiryModal.pk, expires_at: d.expires_at } }));
            });
        },
        clearExpiry() { this.expiryModal.expiryInput = ''; this.saveExpiry(); },

        // ── Toast ────────────────────────────────────────────────────
        copyAndToast(url) {
            copyToClipboard(url);
            this.showToast('{% trans "Link copied!" %}');
        },
        showToast(msg) {
            this.toastMsg = msg;
            this.toastVisible = true;
            clearTimeout(this._toastTimer);
            this._toastTimer = setTimeout(() => { this.toastVisible = false; }, 2500);
        },

        // ── misc ────────────────────────────────────────────────────
        formatDate(iso) {
            if (!iso) return '';
            try {
                const d = new Date(iso);
                const pad = n => String(n).padStart(2, '0');
                return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
            } catch (e) { return iso; }
        },
    };
}

function fileRow(f) {
    return {
        f: f,
        pk: f.id,
        isPublic: !!f.is_public,
        publicUrl: f.public_url || '',
        expiresAt: f.expires_at || null,
        get isExpired() { return this.expiresAt && new Date(this.expiresAt) < new Date(); },
        init() {
            window.addEventListener('expiry-updated', e => {
                if (String(e.detail.pk) === String(this.pk)) {
                    this.expiresAt = e.detail.expires_at || null;
                }
            });
        },
        togglePublic() {
            fetch(`/ui/files/${this.pk}/toggle-public/`, {
                method: 'POST', headers: { 'X-CSRFToken': getCsrfToken() },
            }).then(r => r.json()).then(d => {
                this.isPublic = d.is_public;
                this.publicUrl = d.public_url || '';
                // sync underlying model so preview/toast use the right URL
                this.f.is_public = d.is_public;
                this.f.public_url = d.public_url || '';
            });
        },
        formatExpiry(dt) { return dt ? new Date(dt).toLocaleDateString() : ''; },
        copyPublicUrl() {
            const url = this.publicUrl.startsWith('http') ? this.publicUrl : location.origin + this.publicUrl;
            copyToClipboard(url);
            window.dispatchEvent(new CustomEvent('copy-link', { detail: { url } }));
        },
        confirmDelete() {
            if (!confirm('{% trans "Delete this file?" %}')) return;
            fetch(`/ui/files/${this.pk}/delete/`, {
                method: 'POST',
                headers: { 'X-CSRFToken': getCsrfToken() },
            }).then(r => {
                if (r.ok) {
                    window.dispatchEvent(new CustomEvent('remove-file', { detail: { id: this.pk } }));
                }
            }).catch(() => {/* ignore */});
        },
    };
}

function getCsrfToken() {
    return document.cookie.split(';').find(c => c.trim().startsWith('csrftoken='))?.split('=')[1] || '';
}

function copyToClipboard(text) {
    if (navigator.clipboard && navigator.clipboard.writeText) {
        navigator.clipboard.writeText(text).catch(() => fallbackCopy(text));
    } else {
        fallbackCopy(text);
    }
}
function fallbackCopy(text) {
    const el = document.createElement('textarea');
    el.value = text; el.style.cssText = 'position:fixed;opacity:0';
    document.body.appendChild(el); el.select();
    try { document.execCommand('copy'); } catch (e) {}
    document.body.removeChild(el);
}

function guessMime(name) {
    const ext = (name.split('.').pop() || '').toLowerCase();
    const map = {
        jpg: 'image/jpeg', jpeg: 'image/jpeg', png: 'image/png', gif: 'image/gif',
        webp: 'image/webp', svg: 'image/svg+xml', pdf: 'application/pdf',
        mp4: 'video/mp4', webm: 'video/webm', mp3: 'audio/mpeg', wav: 'audio/wav',
        txt: 'text/plain', zip: 'application/zip',
    };
    return map[ext] || 'application/octet-stream';
}

function formatBytes(bytes) {
    if (!bytes) return '0 B';
    if (bytes < 1024) return bytes + ' B';
    if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
    if (bytes < 1024 * 1024 * 1024) return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
    return (bytes / (1024 * 1024 * 1024)).toFixed(2) + ' GB';
}
</script>

{% endblock %}