<turbo-stream action="replace" target="modal-frame"><template><turbo-frame id="modal-frame" target="_top">
  <div id="modal" data-controller="modal">

    <div id="modal--backdrop" data-action="click->modal#onClose"></div>
    <div id="modal--yield">
      <div id="modal--box">
  <div id="modal--header">
    <span>새로운 음성 메시지</span>
    <a href="#" class="btn icon-only" id="modal--close" data-action="modal#close">✕</a>
  </div>
  <div id="modal--content">
    <div class="new-audio-recording" data-controller="new-audio-recording" data-new-audio-recording-delete-text="삭제">
      
      <div class="new-audio-recording--introduction">
        <div class="new-audio-recording--introduction-text">
          <img alt="Headset" src="/assets/icons/headset-5b3b9cdf69a573ef99cfcbd70cd7ae62843dc0b173c8920a4c126d4d820b9264.svg" />
          음성 메시지는 최대 5 개까지 녹음할 수 있습니다. 각 음성 메시지는 3 분까지 녹음할 수 있습니다. 메시지를 저장하기 전에 녹음된 내용을 들어보고 필요한 경우 삭제할 수 있습니다.
        </div>
            
        <div class="infobox danger margin-top">
          <div class="infobox--content">
            <b>참고:</b> 음성 메시지는 익명으로 처리되거나 왜곡되지 않습니다. 사용자의 목소리로 식별할 수 있습니다.
          </div>
        </div>
      </div>
      
      
      <div class="new-audio-recording--record" data-target="new-audio-recording.controls">
        <div class="new-audio-recording--step">
          음성 메시지 녹음
        </div>
          
        <div class="new-audio-recording--controls">
          <div class="new-audio-recording--buttons">
            <button
              type="button"
              class="btn border"
              data-target="new-audio-recording.recordButton"
              data-action="new-audio-recording#record">기록</button>

            <button
              type="button"
              class="btn border"
              data-target="new-audio-recording.stopButton"
              data-action="new-audio-recording#stop" disabled>중지</button>
              
            <button
              type="button"
              class="btn border"
              data-target="new-audio-recording.discardButton"
              data-action="new-audio-recording#discard" disabled>폐기</button>
          </div>
            
          <div class="new-audio-recording--status-label" data-target="new-audio-recording.statusLabel">--:--</div>
        </div>
      </div>
              
      <div class="new-audio-recording--listen" data-target="new-audio-recording.listen">
        <div class="new-audio-recording--step">
          녹음 듣기 및 저장
        </div>
        
        <div class="new-audio-recording--player">
          <audio class="new-audio-recording--recording" data-target="new-audio-recording.recording" controls></audio>
          
          <button
              type="button"
              class="btn cta"
              data-target="new-audio-recording.saveButton"
              data-action="new-audio-recording#save" disabled>저장</button>
        </div>
      </div>
      
      <div class="new-audio-recording--success" data-target="new-audio-recording.success">
        녹음 추가
      </div>
      
    </div>
  </div>
</div>
    </div>
    
    
</div></turbo-frame></template></turbo-stream>