<div class='modal' data-controller='turbo-modal' data-turbo-modal-show-value='true' id=''>
  <div class='modal-dialog modal-lg'>
    <div class='modal-content'>
      <div class='modal-header'>
        <h5 class='modal-title'>
          title
        </h5>
        <button class='close' data-action='turbo-modal#hide' type='button'>
          <span class='shape btn btn-primary p-1'>×</span>
        </button>
      </div>
      <div class='modal-body'>
        <div class='d-flex flex-column' data-controller='turbo-frame-error'>
          <turbo-frame data-turbo-modal-target="content" data-turbo-frame-error-target="frame" data-action="turbo:before-fetch-response->turbo-frame-error#showError turbo:before-fetch-request->turbo-frame-error#hideError" class=" w-100" id="application_modal_content">
            <div class='hide-if-loading'>
              <div class="p-5">hello you !</div>
            </div>
          </turbo-frame>
          <div class='show-if-loading my-auto mx-auto'>
            <div class='p-3'>
              <div class="loader-component">
                <div class="lds-ellipsis loader-component">
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                </div>
              </div>
            </div>
          </div>
          <div data-turbo-frame-error-target='errorMessage' style='display: none; width: 100%'>
            <div class='alert-container alert-danger-type' data-controller='alert-component' style='white-space: normal;'>
              <div class='alert-icon alert-danger-type'>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="mr-3 h-5 w-5 flex-shrink-0">
                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd"></path>
                </svg>
              </div>
              <div class='alert-message alert-danger-type'>
              </div>
              <div class='alert-close alert-danger-type' data-action='click->alert-component#close'>
                <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 148 148" fill="none">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M3.09251 3.22733C5.07323 1.2455 7.75931 0.132162 10.5601 0.132162C13.3608 0.132162 16.0469 1.2455 18.0276 3.22733L73.934 59.1819L129.84 3.22733C130.815 2.21766 131.98 1.4123 133.269 0.858261C134.557 0.304223 135.943 0.0125966 137.346 0.000399146C138.748 -0.0117983 140.139 0.255675 141.437 0.787215C142.735 1.31876 143.915 2.10372 144.906 3.0963C145.898 4.08888 146.682 5.2692 147.213 6.56839C147.745 7.86758 148.012 9.25962 148 10.6633C147.987 12.067 147.696 13.4541 147.142 14.7439C146.589 16.0336 145.784 17.2001 144.775 18.1753L88.8691 74.1299L144.775 130.084C146.699 132.078 147.764 134.749 147.74 137.52C147.716 140.292 146.605 142.944 144.647 144.904C142.688 146.864 140.039 147.976 137.27 148C134.5 148.024 131.832 146.958 129.84 145.032L73.934 89.0779L18.0276 145.032C16.0355 146.958 13.3675 148.024 10.5981 148C7.82867 147.976 5.17951 146.864 3.22117 144.904C1.26283 142.944 0.151998 140.292 0.127932 137.52C0.103867 134.749 1.16849 132.078 3.09251 130.084L58.9989 74.1299L3.09251 18.1753C1.11238 16.1929 0 13.5045 0 10.7013C0 7.89817 1.11238 5.20977 3.09251 3.22733Z" fill="black"></path>
                </svg>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>