<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="MYsGAmLKNtaRRspYZa8lv0ikc9_txjdP0RwHNiNMKFqPM4zbPhlBw1_-HT_ukEcyCDkq8AkxnilTwLz2MbQ2tA" 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" maxlength="200" size="200" 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" maxlength="255" size="255" 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" maxlength="10000" name="support_ticket[message]" id="support_ticket_message">
</textarea>
    </div>
    <div style="position:absolute!important;left:-9999px;top:-9999px;height:1px;width:1px;overflow:hidden;" aria-hidden="true">
      <label for="support_ticket_company_website">If you are a human, leave this field blank</label>
      <input type="text" name="support_ticket[company_website]" id="support_ticket_company_website" autocomplete="off" tabindex="-1" />
    </div>
    <div data-controller="turnstile" data-action="turbo:submit-end@document->turnstile#reset">
  <iframe src="https://wilderness-edge.everybooking.com/turnstile/challenge?form=support_ticket" title="Security check" data-turnstile-target="frame"
          class="block w-full border-0" style="height:70px;" scrolling="no"></iframe>
  <input type="hidden" name="cf-turnstile-response" data-turnstile-target="input" autocomplete="off" />
</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" />
      
      <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>


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