<turbo-stream action="update" target="account_modal"><template><turbo-frame id="account_modal">
  <div data-controller="modal" data-modal-open-value="true">
    <dialog class="modal rounded-lg max-w-lg max-h-screen w-full bg-transparent backdrop:backdrop-blur-sm backdrop:bg-black/50" data-modal-target="dialog">
    <!-- Toast container for modal top layer -->
    <div id="modal-toasts" data-turbo-temporary>
    </div>
    
    <div class="absolute inset-0" data-action="click->modal#backdropClose"></div>
    <div class="relative p-6 bg-out-grey dark:bg-out-black dark:text-gray-200 text-left">
      <button type="button" data-action="modal#close:prevent" class="hover:cursor-pointer absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"><line x1="18" x2="6" y1="6" y2="18"></line><line x1="6" x2="18" y1="6" y2="18"></line></svg>
        <span class="sr-only">Close</span>
      </button>

      <h2 class="text-lg mb-2">Message OMA</h2>
      <p class="text-sm mb-2"></p>
      <div class="modal-content">
        
      <div class="space-y-4">
        <!-- Account Info with Link to Creator Profile -->
        <div class="flex items-center gap-3 pb-4 border-b border-gray-200 dark:border-gray-700">
          <img class="w-12 h-12 rounded-full flex-shrink-0" alt="OMA" src="https://outvizor.com/rails/active_storage/representations/redirect/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVGkGSSIIcHVyBjsAVEkiDGJsb2JfaWQGOwBG--5f01279611daf2209b2a9adef29884e90d43d0e6/BAh7BkkiC19yYWlscwY6BkVUewdJIglkYXRhBjsAVHsHOgtmb3JtYXRJIghqcGcGOwBUOhRyZXNpemVfdG9fbGltaXRbB2llaWVJIghwdXIGOwBUSSIOdmFyaWF0aW9uBjsARg==--80da19fb34410a0f85e82e75a05ca5ee5e1170f8/oma_logo.jpg" />
          <div>
            <a data-turbo-frame="_top" class="text-lg font-semibold text-gray-900 dark:text-white underline hover:text-gray-700 dark:hover:text-gray-300" href="/creators/oma">
              OMA
</a>          </div>
        </div>

        <!-- Message Form -->
        <form class="space-y-4" data-controller="message-form" data-action="submit-&gt;message-form#submit turbo:submit-end-&gt;modal#close" action="/events/95/live/send_message_to_account" accept-charset="UTF-8" data-remote="true" method="post"><input type="hidden" name="authenticity_token" value="nWsaKQwzZ-ud7FOTnOzheRs3aJCvuIkuGQ33uXx0-VdnjA_XZRXMJxymKVVFKQIWME5IpIE_XnXBEqZ3drz4Hw" autocomplete="off" />
          <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" for="content">Message</label>
            <textarea placeholder="Type your message..." rows="4" data-message-form-target="textarea" data-action="input-&gt;message-form#autoResize" class="w-full p-3 border border-gray-300 rounded-lg resize-none focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600 dark:text-white" name="content" id="content">
</textarea>
          </div>
          
          <div class="flex items-center justify-end gap-3">
            <input type="submit" name="commit" value="Send" data-message-form-target="submit" data-disable-with="Send" class="btn btn-primary btn-sm" />
          </div>
</form>      </div>

      </div>


      <div class="flex justify-end items-center flex-wrap gap-2 mt-4">
        <button class="btn btn-secondary" id='close-modal' data-action="click->modal#close:prevent">Cancel</button>
        <!-- button class="btn btn-primary" data-action="click->modal#close:prevent">Continue</button -->
      </div>

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