{% extends 'base.html' %}
{% block title %}Zarządzanie dostępem do list{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center flex-wrap mb-3">
  <h2 class="mb-2">🔐{% if list_id %} Dostęp do listy #{{ list_id }}{% else %} Zarządzanie dostępem do list{% endif %}</h2>
  <div class="d-flex gap-2">
    {% if list_id %}
    <a href="{{ url_for('admin_lists_access') }}" class="btn btn-outline-light">Powrót do wszystkich list</a>
    {% endif %}
    <a href="{{ url_for('admin_panel') }}" class="btn btn-outline-secondary">← Powrót do panelu</a>
  </div>
</div>

{% include 'admin/_nav.html' %}

<!-- STICKY ACTION BAR -->
<div id="bulkBar" class="position-sticky top-0 z-3 mb-3" style="backdrop-filter: blur(6px);">
  <div class="card bg-dark border-secondary shadow-sm">
    <div class="card-body py-2 d-flex flex-wrap align-items-center gap-3">
      <div class="d-flex align-items-center gap-2 w-100">
        <input id="selectAll" class="form-check-input table-select-checkbox" type="checkbox" />
        <label for="selectAll" class="form-check-label">Zaznacz wszystko</label>
      </div>

      <div class="vr text-secondary"></div>

      <div class="flex-grow-1 d-flex align-items-center gap-2">
        <input id="listFilter" class="form-control form-control-sm bg-dark text-white border-secondary"
          placeholder="Szukaj po tytule/ID/właścicielu…" aria-label="Filtruj listy">
        <span class="text-secondary small ms-1" id="filterCount">—</span>
      </div>

      <div class="vr text-secondary d-none d-md-block"></div>

      <!-- BULK GRANT -->
      <div class="flex-grow-1">
        <div class="input-group input-group-sm">
          <input id="bulkUsersInput" class="form-control bg-dark text-white border-secondary"
            placeholder="Podaj użytkowników (po przecinku lub enterach)" list="userHints" autocomplete="off">
          <button id="bulkAddBtn" class="btn btn-outline-light" type="button">➕ Nadaj dostęp</button>
        </div>
        <div id="bulkTokens" class="d-flex flex-wrap gap-2 mt-2"></div>
      </div>
    </div>
  </div>
</div>


<!-- HINTS -->
<datalist id="userHints">
  {% for username in all_usernames %}<option value="{{ username }}"></option>{% endfor %}
</datalist>

<div class="card bg-dark text-white mb-5">
  <div class="card-body">
      <div class="table-responsive admin-table-responsive admin-table-responsive--wide">
        <table class="table table-dark align-middle sortable lists-access-table" id="listsTable">
          <thead class="align-middle">
            <tr>
              <th scope="col" style="width:36px;"></th>
              <th scope="col">ID</th>
              <th scope="col">Nazwa listy</th>
              <th scope="col">Właściciel</th>
              <th scope="col">Utworzono</th>
              <th scope="col">Udostępnianie</th>
              <th scope="col" style="min-width: 420px;">Uprawnienia</th>
            </tr>
          </thead>
          <tbody>
            {% for l in lists %}
            <tr data-id="{{ l.id }}" data-title="{{ l.title|lower }}"
              data-owner="{{ (l.owner.username if l.owner else '-')|lower }}">
              <td>
                <input class="row-check form-check-input table-select-checkbox" type="checkbox" data-list-id="{{ l.id }}">
              </td>

              <td class="text-nowrap">{{ l.id }}</td>

              <td class="fw-bold align-middle">
                <a href="{{ url_for('view_list', list_id=l.id) }}" class="text-white text-decoration-none">{{ l.title
                  }}</a>
              </td>

              <td>
                {% if l.owner %}
                👤 <span class="owner-username" data-username="{{ l.owner.username }}">@{{ l.owner.username }}</span>
                ({{ l.owner.id }})
                {% else %}-{% endif %}
              </td>

              <td class="text-nowrap">{{ l.created_at.strftime('%Y-%m-%d %H:%M') if l.created_at else '-' }}</td>
              <td style="min-width: 260px;">
                {% if l.share_token %}
                {% set share_url = url_for('shared_list', token=l.share_token, _external=True) %}
                <div class="d-flex align-items-center gap-2 w-100">
                  <div class="flex-grow-1 text-truncate mono small" title="{{ share_url }}">{{ share_url }}</div>
                  <button class="btn btn-sm btn-outline-secondary copy-share" type="button" data-url="{{ share_url }}"
                    aria-label="Kopiuj link">📋</button>
                </div>
                <div class="text-info small mt-1">
                  {% if l.is_public %}Lista widoczna publicznie{% else %}Dostęp przez link / uprawnienia{% endif %}
                </div>
                {% else %}
                <div class="text-warning small w-100 d-block">Brak tokenu</div>
                {% endif %}
              </td>

              <td>
                <div class="access-editor" data-list-id="{{ l.id }}" data-post-url="{{ request.path }}{{ ('?page=' ~ page ~ "&per_page=" ~ per_page) if not list_id else "" }}" data-suggest-url="{{ url_for('admin_user_suggestions') }}" data-next="{{ request.full_path if request.query_string else request.path }}">
                  <!-- Tokeny z uprawnieniami -->
                  <div class="d-flex flex-wrap gap-2 mb-2 tokens">
                    {% for u in permitted_by_list.get(l.id, []) %}
                    <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 permitted_by_list.get(l.id, [])|length == 0 %}
                    <span class="text-warning small no-perms">Brak dodanych uprawnień.</span>
                    {% endif %}
                  </div>

                  <!-- Dodawanie (wiele na raz) -->
                  <div class="input-group input-group-sm">
                    <input type="text"
                      class="form-control form-control-sm bg-dark text-white border-secondary access-input"
                      placeholder="Dodaj użytkownika (wiele: przecinki/enter)" list="userHints" autocomplete="off"
                      aria-label="Dodaj użytkowników">
                    <button type="button" class="btn btn-sm btn-outline-light access-add">💾 Zapisz dostęp</button>
                  </div>
                  <div class="text-secondary small mt-1">Kliknij token, aby odebrać dostęp. Zmiana zapisuje się od razu.</div>
                </div>
              </td>

            </tr>
            {% endfor %}
            {% if lists|length == 0 %}
            <tr>
              <td colspan="7" class="text-center py-4">Brak list do wyświetlenia</td>
            </tr>
            {% endif %}
          </tbody>
        </table>
      </div>

  </div>
</div>

{% if not list_id %}
<hr>
<div class="d-flex justify-content-between align-items-center mt-4">
  <form method="get" class="d-flex align-items-center">
    <label for="per_page" class="me-2">🔢 Pozycji na stronę:</label>
    <select id="per_page" name="per_page" class="form-select form-select-sm me-2"
      onchange="this.form.page.value = 1; this.form.submit();">
      <option value="25" {% if per_page==25 %}selected{% endif %}>25</option>
      <option value="50" {% if per_page==50 %}selected{% endif %}>50</option>
      <option value="100" {% if per_page==100 %}selected{% endif %}>100</option>
    </select>
    <input type="hidden" name="page" value="{{ page }}">
  </form>

  <nav aria-label="Nawigacja stron">
    <ul class="pagination pagination-dark mb-0">
      <li class="page-item {% if page <= 1 %}disabled{% endif %}">
        <a class="page-link" href="?{{ query_string }}{% if query_string %}&{% endif %}page={{ page - 1 }}">«</a>
      </li>
      {% for p in range(1, total_pages + 1) %}
      <li class="page-item {% if p == page %}active{% endif %}">
        <a class="page-link" href="?{{ query_string }}{% if query_string %}&{% endif %}page={{ p }}">{{ p }}</a>
      </li>
      {% endfor %}
      <li class="page-item {% if page >= total_pages %}disabled{% endif %}">
        <a class="page-link" href="?{{ query_string }}{% if query_string %}&{% endif %}page={{ page + 1 }}">»</a>
      </li>
    </ul>
  </nav>
</div>
{% endif %}

{% endblock %}
{% block scripts %}
<script src="{{ static_asset_url('static_bp.serve_js', 'access_users.js') }}"></script>
<script src="{{ static_asset_url('static_bp.serve_js', 'lists_access.js') }}"></script>

{% endblock %}