{% if item.can_add %}


{% if session['is_admin'] %}
<button class="btn btn-primary" id="add-playlist-admin-{{item['id']}}" data-bs-toggle="tooltip" title="Add Playlist for Users">
  <i class="fa-solid fa-users"> </i>
</button>

<div class="modal fade" id="addPlaylistModal-{{item['id']}}" tabindex="-1" aria-labelledby="addPlaylistModal-{{item['id']}}Label" aria-hidden="true" data-bs-backdrop="false" >
  <div class="modal-dialog modal-lg modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="addPlaylistModal-{{item['id']}}Label">Select Additional Users</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

      </div>
      <div class="modal-body">
        <div id="allUsers-{{item['id']}}">
          <!-- All users will be dynamically loaded here with checkboxes -->
        </div>
        <div class="d-flex justify-content-between mt-3">
          <button class="btn btn-secondary" id="selectAllUsers-{{item['id']}}">Select All</button>
          <button class="btn btn-success" id="addPlaylistButton-{{item['id']}}">Add Playlist</button>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
 document.getElementById("add-playlist-admin-{{item['id']}}").addEventListener('click', function() {
  var modal = new bootstrap.Modal(document.getElementById("addPlaylistModal-{{item['id']}}"));
  modal.show();
  loadAllUsers{{item['id']}}();
});

function loadAllUsers{{item['id']}}() {
  fetch("/admin/getJellyfinUsers")
    .then(response => response.json())
    .then(data => {
      const allUsersDiv = document.getElementById("allUsers-{{item['id']}}");
      allUsersDiv.innerHTML = '';
      data.users.forEach(user => {
        const checkbox = document.createElement('div');
        checkbox.classList.add('form-check');
        const isChecked = {{ config['runtime_settings']['default_playlist_users']|safe }}.includes(user.Id) ? 'checked' : '';
        checkbox.innerHTML = `<input class="form-check-input" type="checkbox" value="${user.Id}" id="user-${user.Id}" ${isChecked}>
                  <label class="form-check-label" for="user-${user.Id}">${user.Name}</label>`;
        allUsersDiv.appendChild(checkbox);
      });
    });
}

document.getElementById("selectAllUsers-{{item['id']}}").addEventListener('click', function() {
  document.querySelectorAll("#allUsers-{{item['id']}} .form-check-input").forEach(checkbox => {
    checkbox.checked = true;
  });
});

document.getElementById("addPlaylistButton-{{item['id']}}").addEventListener('click', function() {
  const selectedUsers = Array.from(document.querySelectorAll("#allUsers-{{item['id']}} .form-check-input:checked")).map(checkbox => checkbox.value);
  const hxVals = {
    item_id: "{{ item.id }}",
    item_name: "{{ item.name }}",
    additional_users: selectedUsers
  };
  fetch("/addplaylist?provider={{provider_id}}", {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'HX-Request': 'true'
    },
    body: JSON.stringify(hxVals)
  }).then(response => {
    if (response.ok) {
      location.reload();
    }
  });
});
</script>
{%else%}
<button class="btn btn-success" hx-post="/addplaylist?provider={{provider_id}}" hx-include="this" hx-swap="outerHTML" hx-target="this"
  data-bs-toggle="tooltip" title="Add to my Jellyfin"
  hx-vals='{"item_id": "{{ item.id }}", "item_name": "{{ item.name }}"}'>
  <i class="fa-solid fa-circle-plus"> </i>
</button>
{% endif %}


{% elif item.can_remove %}
<span id="item-can-remove-{{ item.id }}" >
  <button class="btn btn-warning" hx-delete="{{ url_for('delete_playlist', playlist_id=item['jellyfin_id']) }}" 
  hx-include="this" hx-swap="outerHTML" hx-target="this" data-bs-toggle="tooltip" title="Remove from Jellyfin">
  <i class="fa-solid fa-circle-minus"> </i>
</button>
{% endif %}
{% if session['is_admin'] and item.can_remove %}
<button class="btn btn-danger" id="confirm-delete-{{item['jellyfin_id']}}" data-bs-toggle="tooltip" title="Delete playlist from monitoring and remove (DELETE FOR ALL USERS) from Jellyfin">
  <i class="fa-solid fa-trash"> </i>
</button>

<script>
document.getElementById("confirm-delete-{{item['jellyfin_id']}}").addEventListener('click', function() {
  const button = this;
  const icon = button.querySelector('i');
  if (icon.classList.contains('fa-trash')) {
    icon.classList.remove('fa-trash');
    icon.classList.add('fa-check');
    button.setAttribute('title', 'Click again to confirm deletion');
  } else {
    fetch("{{ url_for('wipe_playlist', playlist_id=item['jellyfin_id']) }}", {
      method: 'DELETE',
      headers: {
        'HX-Request': 'true'
      }
    }).then(response => {
      if (response.ok) {
        button.closest('#item-can-remove-{{ item.id }}').outerHTML = '';
      }
    });
  }
});
</script>
</span>
{% endif%}
{% if session['is_admin'] and item.can_remove %}
<button class="btn btn-info" id="manage-users-{{item['jellyfin_id']}}" data-bs-toggle="tooltip" title="Manage Users">
  <i class="fa-solid fa-user"> </i>
</button>
<div class="modal fade" id="manageUsersModal-{{item['jellyfin_id']}}" tabindex="-1" aria-labelledby="manageUsersModal-{{item['jellyfin_id']}}Label" aria-hidden="true" data-bs-modal-backdrop="false">
  <div class="modal-dialog modal-sm modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="manageUsersModal-{{item['jellyfin_id']}}Label">Manage Users</h5>
      </div>
      <div class="modal-body">
        <div id="assignedUsers-{{item['jellyfin_id']}}">
          <!-- Assigned users will be dynamically loaded here -->
        </div>
        <div class="input-group mt-3">
          <select class="form-select" id="availableUsers-{{item['jellyfin_id']}}">
            <!-- Available users will be dynamically loaded here -->
          </select>
          <button class="btn btn-primary" id="addUserButton-{{item['jellyfin_id']}}">Add User to Playlist</button>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
document.getElementById("manage-users-{{item['jellyfin_id']}}").addEventListener('click', function() {
  var modal = new bootstrap.Modal(document.getElementById("manageUsersModal-{{item['jellyfin_id']}}"));
  modal.show();
  loadUsers{{item['jellyfin_id']}}();
});

function loadUsers{{item['jellyfin_id']}}() {
  fetch("/admin/getJellyfinPlaylistUsers?playlist={{item['jellyfin_id']}}")
    .then(response => response.json())
    .then(data => {
      console.log("jellyfin playlist id: {{item['jellyfin_id']}}");
      const assignedUsersDiv = document.getElementById("assignedUsers-{{item['jellyfin_id']}}");
      console.log(assignedUsersDiv);
      assignedUsersDiv.innerHTML = '';
      data.assigned_users.forEach(user => {
        const badge = document.createElement('span');
        badge.classList.add('badge', 'bg-primary', 'me-1', 'mb-1');
        badge.innerHTML = `${user.Name} <button class="btn btn-danger btn-sm ms-1" onclick="removeUser{{item['jellyfin_id']}}('${user.UserId}')">×</button>`;
        assignedUsersDiv.appendChild(badge);
      });

      const availableUsersSelect = document.getElementById("availableUsers-{{item['jellyfin_id']}}");
      availableUsersSelect.innerHTML = '';
      data.remaining_users.forEach(user => {
        const option = document.createElement('option');
        option.value = user.Id;
        option.textContent = user.Name;
        availableUsersSelect.appendChild(option);
      });
    });
}

function removeUser{{item['jellyfin_id']}}(userId) {
  fetch(`/admin/removeJellyfinUserFromPlaylist?user=${userId}&playlist={{item['jellyfin_id']}}`)
    .then(response => response.json())
    .then(data => {
      if (data.success) {
        loadUsers{{item['jellyfin_id']}}();
      }
    });
}

document.getElementById("addUserButton-{{item['jellyfin_id']}}").addEventListener('click', function() {
  const userId = document.getElementById("availableUsers-{{item['jellyfin_id']}}").value;
  fetch(`/admin/addJellyfinUserToPlaylist?user=${userId}&playlist={{item['jellyfin_id']}}`)
    .then(response => response.json())
    .then(data => {
      if (data.success) {
        loadUsers{{item['jellyfin_id']}}();
      }
    });
});
</script>
{% endif %}