{HEADER_HTML}

{HEADER_MIDDLE_HTML}
<link rel="stylesheet" type="text/css" href="./assets/css/kanban.css">

  <div class="container-fluid px-4" style="border-bottom: 1px solid #dddddd;padding: 0px 0 10px 0;margin: -10px 0 0 0;">
    <div class="d-flex align-items-center">
      <h1 class="kanban-title m-0">Selected Candidates</h1>
      <a href="recruiter_kanban.php{selected_parameter}" class="ms-auto me-4">
        <i class="bi bi-arrow-left"></i> Back
      </a>
      <div>{filter}</div>
    </div>
  </div>

  <div class="container-fluid px-4 mt-4">
  {selected_candidates_html}
  <!-- Modal for Applicant Details -->
  <div class="modal fade" id="applicantModal" tabindex="-1" aria-labelledby="applicantModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="applicantModalLabel">Applicant Details</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body" id="applicantModalBody">
          Loading...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
  <script>
    // Function to view applicant details
    function viewApplicantDetails(appId) {
      const modal = new bootstrap.Modal(document.getElementById('applicantModal'));

      // Set loading state
      document.getElementById('applicantModalBody').innerHTML = 'Loading...';

      // Show the modal
      modal.show();

      // Fetch applicant details
      fetch('get_applicant_details.php?app_id=' + appId)
        .then(response => response.text())
        .then(data => {
          document.getElementById('applicantModalBody').innerHTML = data;
        })
        .catch(error => {
          document.getElementById('applicantModalBody').innerHTML = 'Error loading applicant details: ' + error;
        });
    }

    // Function to reconsider a candidate
    function reconsiderCandidate(appId) {
      if (confirm('Are you sure you want to unselect this candidate?')) {
        fetch('update_selection.php', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
          },
          body: `app_id=${appId || ''}&selection=Process`
        })
        .then(response => response.json())
        .then(data => {
          if (data.success) {
            alert('Candidate has been moved back to consideration.');
            location.reload();
          } else {
            alert(data.message || 'Error reconsidering candidate');
          }
        })
        .catch(error => {
          alert('Error reconsidering candidate');
          console.error('Error:', error);
        });
      }
    }
  </script>