<turbo-stream method="morph" action="update" target="modal"><template><div class="modal-backdrop fixed inset-0 bg-black/80 flex items-center justify-center p-4 z-50" data-controller="modal">
  <div class="bg-card-bg border border-white/5 rounded-[2rem] md:rounded-[2.5rem] w-full max-w-md overflow-hidden relative">
    
    <div class="flex justify-between items-center p-6 md:p-8 pb-4 relative z-10">
      <div class="flex flex-col">
        <span class="text-[9px] font-black uppercase tracking-[0.3em] text-accent-purple mb-1" data-locale-prompt-target="actionLabel">Action</span>
        <h2 class="text-xl md:text-2xl font-black text-white m-0 tracking-tight" data-locale-prompt-target="title">Select room</h2>
      </div>
      <button type="button" class="w-10 h-10 bg-white/5 rounded-2xl flex items-center justify-center text-text-secondary hover:text-white hover:bg-white/10 group" data-action="click-&gt;modal#close">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
      </button>
    </div>

    <div class="p-6 md:p-8 pt-4 relative z-10">
        
  <form class="space-y-6" data-turbo-frame="_top" action="/room_selection" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="Q961lfWc4BV7Sgk9TRois0-yvJm6mYTJRE4q0yMbwjz1ZDtp_86D3DcuVa-Y3rTzZ85d5ryEt7b7ZGuESEp-pQ" autocomplete="off" />
    <div class="flex flex-col gap-3">
      <label for="room" class="text-[10px] font-black text-white/30 uppercase tracking-[0.3em] ml-1">Room code</label>
      <input type="text" name="room" id="room" value="" placeholder="room-123"
             class="input-field" />
    </div>
    <div class="pt-6">
      <input type="submit" name="commit" value="Select room" class="btn-primary w-full py-4" data-disable-with="Select room" />
    </div>
</form>
    </div>
  </div>
</div>
</template></turbo-stream>
