{% extends 'base.html' %}
{% block title %}Lista: {{ list.title }}{% endblock %}
{% block content %}

<div class="d-flex justify-content-between align-items-center mb-3 flex-wrap">
  <h2 class="mb-2">
    Lista: <strong>{{ list.title }}</strong>
    {% if list.is_archived %}
    <span class="badge rounded-pill bg-secondary ms-2">(Archiwalna)</span>
    {% endif %}

    {% if list.category_badges %}
    {% for cat in list.category_badges %}
    <span class="badge rounded-pill rounded-pill text-dark ms-1" style="background-color: {{ cat.color }};
                     font-size: 0.75rem;
                     opacity: 0.85;">
      {{ cat.name }}
    </span>
    {% endfor %}
    <!-- PRZYCISK DO MODALA KATEGORII -->
    <button class="btn btn-sm btn-outline-light ms-2" data-bs-toggle="modal" data-bs-target="#categoriesModal">
      ✏️ Zmień kategorie
    </button>
    {% else %}
    <!-- ZAMIAST LINKU: OTWARCIE MODALA KATEGORII -->
    <button class="btn btn-sm btn-outline-light ms-2" data-bs-toggle="modal" data-bs-target="#categoriesModal">
      ➕ Dodaj kategorię
    </button>
    {% endif %}
  </h2>
</div>

{% set share_url = url_for('shared_list', token=list.share_token, _external=True) %}
{% set permitted_count = permitted_users|length %}

<div id="share-card" class="card share-hub text-white mb-4">
  <div class="card-body">
    <div class="share-hub__top">
      <div>
        <div class="share-hub__eyebrow">Udostępnianie</div>
        <h5 class="share-hub__title mb-2">Dostęp do listy</h5>
        <div class="share-hub__status">
          <span id="shareVisibilityBadge" class="badge rounded-pill share-state-badge {% if list.is_public %}share-state-badge--public{% else %}share-state-badge--private{% endif %}">
            {% if list.is_public %}🌍 Publiczna{% else %}🔒 Prywatna{% endif %}
          </span>
          <span class="badge rounded-pill share-state-badge share-state-badge--link">🔗 Link aktywny</span>
          <span id="sharePeopleBadge" class="badge rounded-pill share-state-badge share-state-badge--people {% if not permitted_count %}d-none{% endif %}">👥 {{ permitted_count }} {% if permitted_count == 1 %}osoba{% elif permitted_count < 5 %}osoby{% else %}osób{% endif %}</span>
        </div>
      </div>

      <button class="btn btn-outline-light btn-sm share-hub__manage" data-bs-toggle="offcanvas" data-bs-target="#shareSheet" aria-controls="shareSheet">
        ⚙️ Zarządzaj
      </button>
    </div>

    <p id="shareVisibilityNote" class="share-hub__note mb-3">
      {% if list.is_public %}
      Lista działa publicznie i przez link udostępniania.
      {% else %}
      Lista działa przez link udostępniania i dla zaproszonych osób.
      {% endif %}
    </p>

    <div class="share-hub__linkbox mb-3">
      <div class="share-hub__linklabel">Link do listy</div>
      <div id="shareUrlPreview" class="share-hub__linkvalue">{{ share_url | replace('https://', '') | replace('http://', '') }}</div>
    </div>

    <div class="share-hub__actions">
      <button id="copyBtn" class="btn btn-success share-hub__primary" onclick="copyLink('{{ share_url }}')">
        📤 Udostępnij
      </button>
      <a id="openShareModeBtn" href="{{ share_url }}" target="_blank" rel="noopener" class="btn btn-outline-light share-hub__secondary">
        ✅ Tryb odznaczania
      </a>
    </div>
  </div>
</div>

<!-- Progress bar (dynamic) -->
<h5 id="progress-title" class="mb-2">
  Postęp listy —
  <span id="purchased-count">{{ purchased_count }}</span>/<span id="total-count">{{ total_count }}</span> kupionych
  (<span id="percent-value">{{ percent|round(0)|int }}</span>%)
</h5>

<div class="progress progress-dark position-relative">
  <div id="progress-bar-purchased" class="progress-bar bg-success" role="progressbar" data-bs-toggle="tooltip"
    title="Kupione produkty"></div>
  <div id="progress-bar-not-purchased" class="progress-bar bg-warning" role="progressbar" data-bs-toggle="tooltip"
    title="Oznaczone jako niekupione"></div>
  <div id="progress-bar-remaining" class="progress-bar bg-transparent" role="progressbar" data-bs-toggle="tooltip"
    title="Pozostałe do kupienia"></div>
  <span id="progress-label" class="progress-label small fw-bold"></span>
</div>
<br>
{% if total_expense > 0 %}
<div id="total-expense2" class="text-success fw-bold mb-3">
  💸 Łącznie wydano: {{ format_currency(total_expense) }}
</div>
{% else %}
<div id="total-expense2" class="text-success fw-bold mb-3">
  💸 Łącznie wydano: {{ format_currency(0) }}
</div>
{% endif %}

<div class="list-toolbar d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
  <button id="sort-toggle-btn" class="btn btn-sm btn-outline-warning list-toolbar__sort" onclick="toggleSortMode()">✳️ Zmień kolejność</button>
  <div class="form-check form-switch form-check-spaced app-switch hide-purchased-switch hide-purchased-switch--minimal hide-purchased-switch--right">
    <input class="form-check-input" type="checkbox" id="hidePurchasedToggle">
    <label class="form-check-label ms-2" for="hidePurchasedToggle">Ukryj zaznaczone</label>
  </div>
</div>

<ul id="items" class="list-group mb-3" data-is-share="{{ 'true' if is_share else 'false' }}">
  {% for item in items %}
  <li data-name="{{ item.name|lower }}" id="item-{{ item.id }}"
    class="list-group-item shopping-item-row clickable-item 
           {% if item.purchased %}bg-success text-white{% elif item.not_purchased %}bg-warning text-dark{% else %}item-not-checked{% endif %}"
    data-is-share="{{ 'true' if is_share else 'false' }}">

    <div class="shopping-item-main">
      <input id="checkbox-{{ item.id }}" class="large-checkbox" type="checkbox" {% if item.purchased %}checked{% endif
        %} {% if list.is_archived or item.not_purchased %}disabled{% endif %}>
      <div class="shopping-item-content">
        <div class="shopping-item-head">
          <div class="shopping-item-text">
            <button type="button"
                    id="name-{{ item.id }}"
                    class="shopping-item-name text-white"
                    data-item-id="{{ item.id }}"
                    data-item-name={{ item.name|tojson }}
                    data-item-quantity="{{ item.quantity or 1 }}"
                    {% if not list.is_archived %}data-item-menu-trigger="true"{% else %}disabled aria-disabled="true"{% endif %}>{{ item.name }}</button>
            {% if item.quantity and item.quantity > 1 %}
            <span class="badge rounded-pill bg-secondary">x{{ item.quantity }}</span>
            {% endif %}
            {% set info_parts = [] %}
            {% if item.note %}{% set _ = info_parts.append('<span class="text-danger">[ <b>' ~ item.note ~ '</b> ]</span>') %}{% endif %}
            {% if item.not_purchased_reason %}{% set _ = info_parts.append('<span class="text-dark">[ <b>Powód: ' ~ item.not_purchased_reason ~ '</b> ]</span>') %}{% endif %}
            {% if item.added_by_display %}{% set _ = info_parts.append('<span class="item-added-by-meta">· dodał/a: <b>' ~ item.added_by_display ~ '</b></span>') %}{% endif %}
            {% if info_parts %}
            <span class="info-line small" id="info-{{ item.id }}">{{ info_parts | join(' ') | safe }}</span>
            {% endif %}
          </div>
          <div class="list-item-actions shopping-item-actions" role="group">
      {% if not is_share %}
      <button type="button" class="btn btn-outline-light btn-sm shopping-action-btn" {% if list.is_archived %}disabled{% else
        %}onclick='openEditItemModal(event, {{ item.id }}, {{ item.name|tojson }}, {{ item.quantity or 1 }})' {% endif %}>✏️</button>
      <button type="button" class="btn btn-outline-light btn-sm shopping-action-btn" {% if list.is_archived %}disabled{% else
        %}onclick="deleteItem({{ item.id }})" {% endif %}>🗑️</button>
      {% endif %}

      {% if item.not_purchased %}
      <button type="button" class="btn btn-outline-light btn-sm shopping-action-btn shopping-action-btn--wide" {% if list.is_archived %}disabled{% else
        %}onclick="unmarkNotPurchased({{ item.id }})" {% endif %}>Przywróć</button>
      {% elif not item.not_purchased %}
      <button type="button" class="btn btn-outline-light btn-sm shopping-action-btn" {% if list.is_archived %}disabled{% else
        %}onclick="markNotPurchasedModal(event, {{ item.id }})" {% endif %}>⚠️</button>
      {% endif %}

      <button type="button" class="btn btn-outline-light btn-sm shopping-action-btn" {% if list.is_archived %}disabled{% else
        %}onclick="openNoteModal(event, {{ item.id }})" {% endif %}>📝</button>
          </div>
        </div>
      </div>
    </div>
  </li>
  {% else %}
  <li id="empty-placeholder" class="list-group-item bg-dark text-secondary text-center w-100">Brak produktów w tej
    liście.</li>
  {% endfor %}
</ul>

<div id="desktopItemMenu" hidden>
  <button type="button" class="btn btn-outline-light btn-sm w-100 text-start" data-menu-action="edit">✏️ Edytuj</button>
  <button type="button" class="btn btn-outline-danger btn-sm w-100 text-start" data-menu-action="delete">🗑️ Usuń</button>
</div>

<div class="modal fade" id="editItemModal" tabindex="-1" aria-labelledby="editItemModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content bg-dark text-white">
      <form id="editItemForm">
        <div class="modal-header">
          <h5 class="modal-title" id="editItemModalLabel">Edytuj produkt</h5>
          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Zamknij"></button>
        </div>
        <div class="modal-body">
          <input type="hidden" id="editItemId">
          <div class="mb-3">
            <label for="editItemName" class="form-label">Nazwa produktu</label>
            <input type="text" id="editItemName" class="form-control bg-dark text-white border-secondary" maxlength="255" required>
          </div>
          <div>
            <label for="editItemQuantity" class="form-label">Ilość</label>
            <input type="number" id="editItemQuantity" class="form-control bg-dark text-white border-secondary" min="1" step="1" required>
          </div>
        </div>

        <div class="modal-footer justify-content-end">
          <div class="btn-group" role="group">
            <button type="button" class="btn btn-sm btn-outline-light" data-bs-dismiss="modal">❌ Anuluj</button>
            <button type="submit" class="btn btn-sm btn-outline-light"><span class="shopping-btn-icon" aria-hidden="true">💾</span><span class="shopping-btn-label">Zapisz</span></button>
          </div>
        </div>

      </form>
    </div>
  </div>
</div>

{% if not list.is_archived %}

<div class="shopping-entry-card mb-3" aria-label="Sekcja dodawania produktu">
  <div class="shopping-entry-card__label">➕ Dodaj produkt</div>
  <div class="shopping-entry-card__hint">Wpisz nazwę produktu i ilość, potem kliknij Dodaj.</div>
  <div class="input-group mb-0 shopping-compact-input-group shopping-product-input-group">
    <input type="text" id="newItem" name="name"
           class="form-control bg-dark text-white border-secondary shopping-product-name-input"
           placeholder="Dodaj produkt" required>

    <input type="number" id="newQuantity" name="quantity"
           class="form-control bg-dark text-white border-secondary shopping-qty-input"
           placeholder="Ilość" min="1" value="1">

    <button type="button"
            class="btn btn-outline-success share-submit-btn shopping-compact-submit"
            onclick="addItem({{ list.id }})">
      <span class="shopping-btn-icon" aria-hidden="true">➕</span>
      <span class="shopping-btn-label">Dodaj</span>
    </button>
  </div>
</div>

<div class="list-quick-actions mb-3" aria-label="Szybkie akcje listy">
  <div class="list-quick-actions__header">
    <div>
      <div class="list-quick-actions__eyebrow">Szybkie akcje</div>
      <div class="list-quick-actions__title">Dodawanie i zapis listy</div>
    </div>
    <div class="list-quick-actions__hint">Najczęściej używane akcje pod ręką.</div>
  </div>

  <div class="list-quick-actions__grid">
    <button class="btn btn-outline-light list-quick-actions__action list-quick-actions__action--primary" data-bs-toggle="modal" data-bs-target="#massAddModal" type="button">
      <span class="list-quick-actions__icon" aria-hidden="true">➕</span>
      <span class="list-quick-actions__content">
        <span class="list-quick-actions__label">Dodaj produkty masowo</span>
        <span class="list-quick-actions__desc">Wklej kilka pozycji naraz i uzupełnij listę szybciej.</span>
      </span>
    </button>

    <form method="post" action="{{ url_for('create_template_from_user_list', list_id=list.id) }}" class="list-quick-actions__form">
      <input type="hidden" name="template_name" value="{{ list.title }} - szablon">
      <button type="submit" class="btn btn-outline-primary list-quick-actions__action list-quick-actions__action--secondary">
        <span class="list-quick-actions__icon" aria-hidden="true">🧩</span>
        <span class="list-quick-actions__content">
          <span class="list-quick-actions__label">Zapisz jako szablon</span>
          <span class="list-quick-actions__desc">Zachowaj układ tej listy i użyj go ponownie.</span>
        </span>
      </button>
    </form>
  </div>
</div>
{% endif %}

{% if activity_logs %}
<div class="card bg-dark text-white mb-4">
  <div class="card-body">
    <div class="d-flex justify-content-between align-items-center gap-2 flex-wrap mb-2">
      <h5 class="mb-0">🕘 Historia zmian listy</h5>
      <button class="btn btn-sm btn-outline-light" type="button" data-bs-toggle="collapse" data-bs-target="#activityHistory" aria-expanded="false" aria-controls="activityHistory">Pokaż / ukryj</button>
    </div>
    <div class="small text-secondary mb-3">Rozwiń aby zobaczyć | Zdarzeń: {{ activity_logs|length }}</div>
    <div class="collapse" id="activityHistory">
      <div class="table-responsive">
        <table class="table table-dark table-sm align-middle">
          <thead><tr><th>Kiedy</th><th>Kto</th><th>Akcja</th><th>Produkt / szczegóły</th></tr></thead>
          <tbody>
            {% for log in activity_logs %}
            <tr>
              <td>{{ log.created_at.strftime('%Y-%m-%d %H:%M') }}</td>
              <td>{{ log.actor_name }}</td>
              <td>{{ action_label(log.action) }}</td>
              <td>{{ log.item_name or log.details or '—' }}</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
{% endif %}

{% set receipt_pattern = 'list_' ~ list.id %}

<div class="card bg-dark text-white border-secondary shadow-sm mt-4">
  <div class="card-body">
    <div class="d-flex flex-column flex-lg-row align-items-lg-center justify-content-between gap-2 mb-3">
      <div>
        <h5 class="mb-1">📄 Paragony dodane do tej listy</h5>
        <p class="text-secondary small mb-0">
          Tutaj możesz wygodnie przejrzeć wszystkie paragony przypisane do tej listy.
        </p>
      </div>
      <div class="d-flex flex-wrap gap-2">
        <span class="badge rounded-pill bg-secondary">{{ receipts|length }} plik{% if receipts|length != 1 %}i{% endif %}</span>
        <span class="badge rounded-pill bg-info text-dark">Tylko podgląd</span>
      </div>
    </div>

    <div class="border border-secondary rounded-3 p-3">
      <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
        <h6 class="mb-0">📸 Galeria paragonów</h6>
        {% if receipts %}
        <span class="text-secondary small">Kliknij miniaturę, aby otworzyć podgląd</span>
        {% endif %}
      </div>

      <div class="row g-3" id="receiptGallery">
        {% if receipts %}
        {% for r in receipts %}
        <div class="col-6 col-md-4 col-xl-3">
          <a href="{{ url_for('uploaded_file', filename=r.filename) }}?v={{ r.version_token or '0' }}" class="glightbox text-decoration-none"
            data-gallery="receipt-gallery">
            <div class="card bg-black border-secondary h-100 overflow-hidden shadow-sm">
              <img src="{{ url_for('uploaded_file', filename=r.filename) }}?v={{ r.version_token or '0' }}"
                class="card-img-top img-fluid" style="height: 180px; object-fit: cover;" alt="Paragon {{ loop.index }}">
              <div class="card-body p-2">
                <div class="small text-truncate text-secondary">Paragon {{ loop.index }}</div>
              </div>
            </div>
          </a>
        </div>
        {% endfor %}
        {% else %}
        <div class="col-12">
          <div class="alert alert-info text-center mb-0" role="alert">
            ℹ️ Brak wgranych paragonów do tej listy
          </div>
        </div>
        {% endif %}
      </div>
    </div>
  </div>
</div>

<!-- MODAL: KATEGORIA (pojedynczy wybór) -->
<div class="modal fade" id="categoriesModal" tabindex="-1" aria-labelledby="categoriesModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-scrollable">
    <div class="modal-content bg-dark text-white">
      <div class="modal-header">
        <h5 class="modal-title" id="categoriesModalLabel">Ustaw kategorię</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Zamknij"></button>
      </div>

      <form method="post" action="{{ url_for('list_settings', list_id=list.id) }}">
        <div class="modal-body">

          {% if popular_categories %}
          <div class="mb-3">
            <div class="small text-secondary mb-1">Najczęściej używane:</div>
            <div class="d-flex flex-wrap gap-2">
              {% for cat in popular_categories %}
              <button type="button" class="btn btn-sm btn-outline-light category-suggestion" data-cat-id="{{ cat.id }}">
                {{ cat.name }}
              </button>
              {% endfor %}
              <button type="button" class="btn btn-sm btn-outline-secondary category-suggestion" data-cat-id="">
                – brak –
              </button>
            </div>
          </div>
          {% endif %}

          <div class="mb-4">
            <label for="category_id" class="form-label">🏷️ Kategoria listy</label>
            <select id="category_id" name="category_id"
              class="form-select tom-dark bg-dark text-white border-secondary rounded">
              <option value="">– brak –</option>
              {% for cat in categories %}
              <option value="{{ cat.id }}" {% if cat.id in selected_categories %}selected{% endif %}>
                {{ cat.name }}
              </option>
              {% endfor %}
            </select>
          </div>

          <input type="hidden" name="action" value="set_category">
          <input type="hidden" name="next" value="{{ url_for('view_list', list_id=list.id) }}">
        </div>

        <div class="modal-footer justify-content-end">
          <div class="btn-group" role="group">
            <button type="button" class="btn btn-sm btn-outline-light" data-bs-dismiss="modal">❌ Anuluj</button>
            <button type="submit" class="btn btn-sm btn-outline-light"><span class="shopping-btn-icon" aria-hidden="true">💾</span><span class="shopping-btn-label">Zapisz</span></button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>


<datalist id="userHintsOwner">
  {% for username in all_usernames %}<option value="{{ username }}"></option>{% endfor %}
</datalist>

<!-- MOBILE-FIRST: PANEL UDOSTĘPNIANIA -->
<div class="offcanvas offcanvas-bottom share-sheet" tabindex="-1" id="shareSheet" aria-labelledby="shareSheetLabel">
  <div class="offcanvas-header share-sheet__header">
    <div class="w-100">
      <div class="share-sheet__grabber"></div>
      <div class="share-sheet__eyebrow">Udostępnianie</div>
      <h5 class="offcanvas-title mb-0" id="shareSheetLabel">Zarządzaj dostępem</h5>
    </div>
    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Zamknij"></button>
  </div>

  <div class="offcanvas-body share-sheet__body">
    <div class="share-sheet__section">
      <div class="share-sheet__section-head">
        <span>Link do listy</span>
        <span class="badge rounded-pill share-state-badge share-state-badge--link">Aktywny</span>
      </div>
      <div class="share-sheet__linkstack">
        <input id="shareUrlInput" type="text" class="form-control" value="{{ share_url }}" readonly>
        <button class="btn btn-success" onclick="copyLink('{{ share_url }}')">📋 Kopiuj link</button>
      </div>
      <div class="text-secondary small mt-2">Na telefonie przycisk użyje systemowego udostępniania, jeśli jest dostępne.</div>
    </div>

    <div class="share-sheet__section">
      <div class="share-sheet__section-head">
        <span>Widoczność</span>
        <span id="shareSheetVisibilityBadge" class="badge rounded-pill share-state-badge {% if list.is_public %}share-state-badge--public{% else %}share-state-badge--private{% endif %}">
          {% if list.is_public %}Publiczna{% else %}Prywatna{% endif %}
        </span>
      </div>
      <p id="shareSheetVisibilityNote" class="text-secondary small mb-3">
        {% if list.is_public %}
        Lista jest widoczna publicznie i nadal działa przez link.
        {% else %}
        Lista nie jest publiczna, ale nadal działa przez link i dla zaproszonych osób.
        {% endif %}
      </p>
      <button id="toggleVisibilityBtn" class="btn btn-outline-light w-100 share-sheet__toggle" onclick="toggleVisibility({{ list.id }})">
        {% if list.is_public %}🙈 Ustaw jako prywatną{% else %}🌍 Uczyń publiczną{% endif %}
      </button>
    </div>

    <div class="share-sheet__section">
      <div class="share-sheet__section-head">
        <span>Osoby z dostępem</span>
        <span id="shareSheetPeopleBadge" class="badge rounded-pill share-state-badge share-state-badge--people">{{ permitted_count }}</span>
      </div>

      <div class="access-editor share-access-panel"
        data-post-url="{{ url_for('list_settings', list_id=list.id) }}"
        data-suggest-url="{{ url_for('edit_my_list_suggestions', list_id=list.id) }}"
        data-next="{{ url_for('view_list', list_id=list.id) }}" data-list-id="{{ list.id }}"
        data-grant-action="grant_access" data-revoke-field="revoke_user_id">

        <div class="tokens d-flex flex-wrap gap-2 mb-3">
          {% for u in permitted_users %}
          <button type="button" class="btn btn-sm btn-outline-secondary rounded-pill token" data-user-id="{{ u.id }}"
            data-username="{{ u.username }}" title="Kliknij, aby odebrać dostęp">
            @{{ u.username }} <span aria-hidden="true">×</span>
          </button>
          {% endfor %}
          {% if not permitted_users or permitted_users|length == 0 %}
          <span class="no-perms text-warning small">Brak dodanych uprawnień.</span>
          {% endif %}
        </div>

        <div class="share-access-panel__input">
          <input type="text" class="access-input form-control bg-dark text-white border-secondary"
            placeholder="Dodaj @użytkownika" list="userHintsOwner" autocomplete="off" aria-label="Dodaj użytkowników">
          <button type="button" class="access-add btn btn-outline-light"><span class="shopping-btn-icon" aria-hidden="true">➕</span><span class="shopping-btn-label">Dodaj osobę</span></button>
        </div>
        <div class="text-secondary small mt-2">Kliknij użytkownika na liście, aby od razu odebrać dostęp.</div>
      </div>
    </div>

    <div class="share-sheet__sticky-actions">
      <a id="openShareModeBtnSheet" href="{{ share_url }}" target="_blank" rel="noopener" class="btn btn-outline-light w-100">
        ✅ Otwórz tryb odznaczania
      </a>
    </div>
  </div>
</div>


<div class="modal fade" id="massAddModal" tabindex="-1" aria-labelledby="massAddModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-scrollable">
    <div class="modal-content bg-dark text-white">
      <div class="modal-header">
        <h5 class="modal-title" id="massAddModalLabel">
          Masowe dodawanie produktów
          <span id="massAddProductStats" class="badge rounded-pill bg-primary ms-2"></span>
        </h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Zamknij"></button>
      </div>
      <div class="modal-body">
        <div id="sort-bar" class="mb-2"></div>
        <div class="mb-2"><span id="product-count" class="badge rounded-pill bg-primary ms-2"></span></div>
        <ul id="mass-add-list" class="list-group"></ul>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-light btn-sm w-100" data-bs-dismiss="modal">Zamknij</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="noteModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-scrollable">
    <div class="modal-content bg-dark text-white">
      <div class="modal-header">
        <h5 class="modal-title">Dodaj notatkę</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Zamknij"></button>
      </div>
      <form id="noteForm" onsubmit="submitNote(event)">
        <div class="modal-body">
          <textarea id="noteText" class="form-control" rows="4" placeholder="Np. 'Jak nie kupisz to po Tobie!'"></textarea>
        </div>
        <div class="modal-footer">
          <div class="btn-group" role="group">
            <button type="button" class="btn btn-outline-light btn-sm" data-bs-dismiss="modal">❌ Anuluj</button>
            <button type="submit" class="btn btn-outline-light btn-sm"><span class="shopping-btn-icon" aria-hidden="true">💾</span>
            <span class="shopping-btn-label">Zapisz</span></button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

{% block scripts %}
<script src="{{ static_asset_url('static_bp.serve_js_lib', 'Sortable.min.js') }}"></script>
<script>
  const isShare = document.getElementById('items').dataset.isShare === 'true';
  window.IS_SHARE = isShare;
  window.LIST_ID = {{ list.id }};
  window.IS_ARCHIVED = {{ 'true' if list.is_archived else 'false' }};
  window.IS_OWNER = {{ 'true' if is_owner else 'false' }};
</script>
<script src="{{ static_asset_url('static_bp.serve_js', 'mass_add.js') }}"></script>
<script src="{{ static_asset_url('static_bp.serve_js', 'receipt_upload.js') }}"></script>
<script src="{{ static_asset_url('static_bp.serve_js', 'sort_mode.js') }}"></script>
<script src="{{ static_asset_url('static_bp.serve_js', 'access_users.js') }}"></script>
<script src="{{ static_asset_url('static_bp.serve_js', 'category_modal.js') }}"></script>
<script src="{{ static_asset_url('static_bp.serve_js', 'notes.js') }}"></script>
<script src="{{ static_asset_url('static_bp.serve_js', 'desktop_item_menu.js') }}"></script>
<script>
  setupList({{ list.id }}, '{{ current_user.username if current_user.is_authenticated else 'Gość' }}');

  document.addEventListener('DOMContentLoaded', function () {
    const editItemForm = document.getElementById('editItemForm');
    if (!editItemForm) return;

    editItemForm.addEventListener('submit', function (event) {
      event.preventDefault();

      const itemId = parseInt(document.getElementById('editItemId').value, 10);
      const itemName = document.getElementById('editItemName').value;
      const itemQuantity = document.getElementById('editItemQuantity').value;

      editItem(itemId, itemName, itemQuantity);

      const modalEl = document.getElementById('editItemModal');
      const modal = bootstrap.Modal.getInstance(modalEl);
      if (modal) {
        modal.hide();
      }
    });
  });
</script>
{% endblock %}

{% endblock %}