<div class="flex flex-wrap gap-8 items-start justify-center max-w-3xl mx-auto w-full h-60">
   <div class="w-full">
      <label class="block text-sm font-medium text-gray-900 dark:text-white mb-2" for="username">Benutzername oder E-Mail-Adresse</label>
      <input type="text" name="username" id="username" required
        placeholder="Geben Sie Ihren Benutzernamen oder Ihre E-Mail-Adresse ein"
        class="block w-full rounded-xl border border-zinc-300 bg-white px-3.5 py-2.5 text-sm text-zinc-900 shadow-sm shadow-black/5 transition duration-200 placeholder:text-zinc-500 hover:border-zinc-400 focus:outline-none focus:ring-0 focus:border-zinc-400 dark:border-zinc-600 dark:bg-zinc-800 dark:text-zinc-100 dark:placeholder:text-zinc-400 dark:shadow-black/30 dark:hover:border-zinc-500 dark:focus:border-zinc-500">
    </div>
</div>

<div class="flex flex-wrap gap-8 items-start justify-center max-w-3xl mx-auto w-full h-60 overflow-y-auto">
   <div class="w-full">
      <label class="block text-sm font-medium text-gray-900 dark:text-white mb-2" for="message">Nachricht</label>
      <textarea type="text" name="message" id="message" required
        placeholder="Geben Sie eine Nachricht ein" rows="4"
        class="block w-full rounded-xl border border-zinc-300 bg-white px-3.5 py-2.5 text-sm text-zinc-900 shadow-sm shadow-black/5 transition duration-200 placeholder:text-zinc-500 hover:border-zinc-400 focus:outline-none focus:ring-0 focus:border-zinc-400 dark:border-zinc-600 dark:bg-zinc-800 dark:text-zinc-100 dark:placeholder:text-zinc-400 dark:shadow-black/30 dark:hover:border-zinc-500 dark:focus:border-zinc-500"></textarea>
    </div>
</div>

<div class="flex flex-wrap gap-8 items-start justify-center max-w-3xl mx-auto w-full h-60">
  <div class="w-full">
    <label class="block text-sm font-medium text-gray-900 dark:text-white mb-2" for="username">Dokumente hochladen</label>
    <input name="documents" type="file" multiple="" class="file:mr-3 file:rounded-2xl file:border-0 file:bg-zinc-900 file:px-3 file:py-1.5 file:text-xs file:font-semibold file:text-white block w-full rounded-xl border border-zinc-300 bg-white px-3.5 py-2.5 text-sm text-zinc-900 shadow-sm shadow-black/5 transition duration-200 placeholder:text-zinc-500 hover:border-zinc-400 focus:outline-none focus:ring-0 focus:border-zinc-400 dark:border-zinc-600 dark:bg-zinc-800 dark:text-zinc-100 dark:placeholder:text-zinc-400 dark:shadow-black/30 dark:hover:border-zinc-500 dark:focus:border-zinc-500">
  </div>
</div>

<div class="flex flex-wrap gap-8 items-start justify-center max-w-3xl mx-auto w-full h-96">
  <div class="w-full">
    <label class="block text-sm font-medium text-gray-900 dark:text-white mb-2" for="dropzone-documents">Dokumente hochladen</label>

    <form
      id="dropzone-documents"
      action="/"
      method="post"
      enctype="multipart/form-data"
      data-dropzone-preview
      class="dropzone group relative flex min-h-52 w-full flex-col items-center justify-center rounded-3xl border border-dashed border-zinc-300 bg-white px-6 py-8 text-center shadow-sm shadow-black/5 transition duration-200 hover:border-zinc-400 dark:border-zinc-600 dark:bg-zinc-800 dark:shadow-black/30 dark:hover:border-zinc-500">
      <div class="pointer-events-none flex flex-col items-center">
        <div class="mb-4 flex size-14 items-center justify-center rounded-2xl bg-primary-50 text-primary-600 dark:bg-primary-600/20 dark:text-primary-400">
          <i class="hgi hgi-stroke hgi-rounded hgi-upload-04 icon-lg"></i>
        </div>

        <h3 class="text-base font-semibold text-zinc-900 dark:text-zinc-100">
          Dateien hier ablegen
        </h3>
        <p class="mt-1 text-sm text-zinc-500 dark:text-zinc-400">
          oder klicken, um Dateien auszuwählen
        </p>
        <p class="mt-4 inline-flex items-center justify-center rounded-2xl bg-zinc-900 px-4 py-2 text-sm font-semibold text-white shadow-sm transition duration-200 group-hover:bg-zinc-700 dark:bg-zinc-100 dark:text-zinc-900 dark:group-hover:bg-zinc-300">
          Dateien durchsuchen
        </p>
        <p class="mt-4 text-xs text-zinc-500 dark:text-zinc-400">
          PDF, PNG oder JPG bis 10 MB
        </p>
      </div>
    </form>
  </div>
</div>

(function () {
  function initializeDropzone(dropzoneElement) {
    if (!window.Dropzone || dropzoneElement.dataset.dropzoneInitialized === 'true') {
      return;
    }

    dropzoneElement.dataset.dropzoneInitialized = 'true';

    new Dropzone(dropzoneElement, {
      url: '/',
      autoProcessQueue: false,
      uploadMultiple: true,
      parallelUploads: 10,
      clickable: true,
      addRemoveLinks: false,
      previewsContainer: dropzoneElement,
      previewTemplate: [
        '<div class="dz-preview dz-file-preview mt-4 w-full rounded-2xl border border-zinc-200 bg-zinc-50 p-4 text-left dark:border-zinc-700 dark:bg-zinc-900">',
        '  <div class="flex items-start gap-3">',
        '    <div class="flex size-10 shrink-0 items-center justify-center rounded-2xl bg-primary-50 text-primary-600 dark:bg-primary-600/20 dark:text-primary-400">',
        '      <i class="hgi hgi-stroke hgi-rounded hgi-file-01 icon-base"></i>',
        '    </div>',
        '    <div class="min-w-0 flex-1">',
        '      <p class="truncate text-sm font-semibold text-zinc-900 dark:text-zinc-100" data-dz-name></p>',
        '      <p class="mt-1 text-xs text-zinc-500 dark:text-zinc-400"><span data-dz-size></span></p>',
        '      <p class="mt-2 text-xs text-red-500" data-dz-errormessage></p>',
        '    </div>',
        '    <button type="button" class="dz-remove inline-flex items-center justify-center rounded-xl bg-zinc-900 px-3 py-1.5 text-xs font-semibold text-white transition duration-200 hover:bg-zinc-700 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-300" data-dz-remove>',
        '      Entfernen',
        '    </button>',
        '  </div>',
        '</div>',
      ].join(''),
      dictDefaultMessage: '',
      acceptedFiles: '.pdf,.png,.jpg,.jpeg',
      maxFilesize: 10,
    });
  }

  function initializeDropzones(root) {
    const scope = root && root.querySelectorAll ? root : document;
    scope.querySelectorAll('[data-dropzone-preview]').forEach(initializeDropzone);
  }

  initializeDropzones(document);

  window.addEventListener('load', function () {
    initializeDropzones(document);
  });

  window.addEventListener('elements:ready', function () {
    initializeDropzones(document);
  });
})();