<turbo-stream action="append" target="modal"><template>
  <div data-controller="modal" data-modal-disable-backdrop="false" id="">
  <div 
    data-modal-target="container" data-custom-modal-target="container"
    id="modal-container"
    class="pointer-events-none mx-auto w-full animated translate-y-8 opacity-0 fixed inset-0 flex items-center justify-center transition-all ease-in-out duration-500 modal-container sm:max-w-2xl"
    style="z-index: 51; pointer-events: none;">
    <div class="bg-white p-3 md:p-8 relative pointer-events-auto w-full h-fit max-h-[95vh] m-1 rounded-[12px] shadow overflow-y-auto flex flex-col" id="modal-content">
      
    <div class="z-50 sticky top-0 flex justify-between items-center mb-4 bg-white flex-0">
  <h3 class="font-semibold">Create a new support ticket</h3>
  <div class="">
    <button data-action="modal#close" type="button" name="button" aria-label="Close modal">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-6" role="img">
  <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
</svg>

    </button>
  </div>
</div>

    <form id="support-ticket-form" action="/support_tickets" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="FYYKkEmTV6jipNCaRBnc2_qQfKp1e9T15D9kUlM84jBJANqQayO6-0NulJWUXZw2icDSdpGJtr98bedzHQHh3g" autocomplete="off" />
  <!-- create a support ticket form that includes a message, email, and name field -->
  <div class="flex flex-col gap-4">
    <div class="flex flex-col gap-2">
      <label class="text-sm font-medium text-gray-700" for="support_ticket_name">Name</label>
      <input class="form-control" required="required" type="text" name="support_ticket[name]" id="support_ticket_name" />
    </div>
    <div class="flex flex-col gap-2">
      <label class="text-sm font-medium text-gray-700" for="support_ticket_email">Email</label>
      <input class="form-control" value="" required="required" type="email" name="support_ticket[email]" id="support_ticket_email" />
    </div>
    <div class="flex flex-col gap-2">
      <label class="text-sm font-medium text-gray-700" for="support_ticket_message">Message</label>
      <textarea class="form-control" placeholder="Enter your message here" required="required" name="support_ticket[message]" id="support_ticket_message">
</textarea>
    </div>
    <div class="flex justify-end gap-2">
      <input type="hidden" name="url" id="url" value="https://book.wildernessedge.com/support_tickets/new" autocomplete="off" />
      <input type="hidden" name="session_id" id="session_id" autocomplete="off" />
      <button type="button" class="btn btn-outline" data-action="click->modal#close">Cancel</button>
      <input type="submit" name="commit" value="Submit" class="btn btn-primary" data-disable-with="Submit" />
    </div>
  </div>
</form>

    <p class="text-xs text-gray-500">Session ID: </p>

    </div>
  </div>
</div>
</template></turbo-stream>