<div
  class="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]"
>
  <div class="max-w-full overflow-x-auto">
    <table class="min-w-full">
      <!-- table header start -->
      <thead>
        <tr class="border-b border-gray-100 dark:border-gray-800">
          <th class="px-5 py-3 sm:px-6">
            <div class="flex items-center">
              <p
                class="font-medium text-gray-500 text-theme-xs dark:text-gray-400"
              >
                Name
              </p>
            </div>
          </th>
          <th class="px-5 py-3 sm:px-6">
            <div class="flex items-center">
              <p
                class="font-medium text-gray-500 text-theme-xs dark:text-gray-400"
              >
                E-Mail Adresse
              </p>
            </div>
          </th>
          <th class="px-5 py-3 sm:px-6">
            <div class="flex items-center">
              <p
                class="font-medium text-gray-500 text-theme-xs dark:text-gray-400"
              >
                Status
              </p>
            </div>
          </th>
          <th class="px-5 py-3 sm:px-6">
            <div class="flex items-center">
              <p
                class="font-medium text-gray-500 text-theme-xs dark:text-gray-400"
              >
                Anzahl
              </p>
            </div>
          </th>
        </tr>
      </thead>
      <!-- table header end -->
      <!-- table body start -->
      <tbody class="divide-y divide-gray-100 dark:divide-gray-800" id="opfer_table">
        
      </tbody>
    </table>
  </div>
  <!---<script>
    fetch("/api/opfer/list.php")
      .then(response => response.json())
      .then(data => {
        if (data.status == 500) {
          console.error("API Error: " + data.error);
        }

        var list = document.getElementById("opfer_table").innerHTML;

        for (const opfer of data.opfer) {
          if (opfer.enabled) {
            var status_class = "rounded-full bg-success-50 px-2 py-0.5 text-theme-xs font-medium text-success-700 dark:bg-success-500/15 dark:text-success-500";
            var status_text = "Enabled";
          }else{
            var status_class = "rounded-full bg-error-50 px-2 py-0.5 text-theme-xs font-medium text-error-700 dark:bg-error-500/15 dark:text-error-500";
            var status_text = "Disabled";
          }

          list += `
          <tr>
          <td class="px-5 py-4 sm:px-6">
            <div class="flex items-center">
              <div class="flex items-center gap-3">
                <div>
                  <span
                    @click="isOpferEdit = true"
                    onclick="opferEdit(` + opfer.id + `)"
                    class="block font-medium text-gray-800 text-theme-sm dark:text-white/90"
                  >
                    ` + opfer.name + `
                  </span>
                </div>
              </div>
            </div>
          </td>
          <td class="px-5 py-4 sm:px-6">
            <div class="flex items-center">
              <p class="text-gray-500 text-theme-sm dark:text-gray-400">
                ` + opfer.mail + `
              </p>
            </div>
          </td>
          <td class="px-5 py-4 sm:px-6">
            <div class="flex items-center">
              <p
                class="` + status_class + `"
              >
                ` + status_text + `
              </p>
            </div>
          </td>
          <td class="px-5 py-4 sm:px-6">
            <div class="flex items-center">
              <p class="text-gray-500 text-theme-sm dark:text-gray-400">` + opfer.number + `</p>
            </div>
          </td>
        </tr>
        `;
        }
        document.getElementById("opfer_table").innerHTML = list;
      })
      .catch(error => console.error("API Error: " + error))

      function opferEdit(id) {
        console.log(document.getElementById("opfer_name"));
        fetch("/api/opfer/info.php", {
          method: "POST",
          headers: {
            "Content-Type": "application/x-www-form-urlencoded"
          },
          body: "id=" + id
        })
        .then(response => response.json())
        .then(data => {
          if (data.status == 500) {
            console.error("API Error: " + data.error);
          }

          const opfer = data.opfer;

          document.getElementById("opfer_id").value = id;
          document.getElementById("opfer_name").value = opfer.name;
          document.getElementById("opfer_mail").value = opfer.mail;
          document.getElementById("opfer_number").value = opfer.number;


          if (data.status == 1) {
              const toogle_el = document.querySelector('#toggle2');
              const toogle_data = Alpine.$data(document.getElementById("toogle2_div"));

              toogle_data.switcherToggle = data.status;
              toogle_el.checked = data.status;
          }
        })
      }

      function removeOpfer() {
        const id = document.getElementById("opfer_id").value;

        fetch("/api/opfer/delete.php", {
          method: "POST",
          headers: {
            "Content-Type": "application/x-www-form-urlencoded"
          },
          body: "id=" + id
        })
        window.location.reload();
      }
  </script>--->
</div>
