<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>New voice message</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="Delete">
      
      <div class="new-audio-recording--introduction">
        <div class="new-audio-recording--introduction-text">
          <img alt="Headset" src="/assets/icons/headset-5b3b9cdf69a573ef99cfcbd70cd7ae62843dc0b173c8920a4c126d4d820b9264.svg" />
          You can record up to 5 voice messages. Each voice message can be 3 minutes long. You can listen to the recordings before saving the note and delete them if necessary.
        </div>
            
        <div class="infobox danger margin-top">
          <div class="infobox--content">
            <b>Attention:</b> Your voice message will not be anonymized or distorted. You can be identified by your voice.
          </div>
        </div>
      </div>
      
      
      <div class="new-audio-recording--record" data-target="new-audio-recording.controls">
        <div class="new-audio-recording--step">
          Record voice message
        </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">Record</button>

            <button
              type="button"
              class="btn border"
              data-target="new-audio-recording.stopButton"
              data-action="new-audio-recording#stop" disabled>Stop</button>
              
            <button
              type="button"
              class="btn border"
              data-target="new-audio-recording.discardButton"
              data-action="new-audio-recording#discard" disabled>Discard</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">
          Listen to and save recording
        </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>Save</button>
        </div>
      </div>
      
      <div class="new-audio-recording--success" data-target="new-audio-recording.success">
        Recording added
      </div>
      
    </div>
  </div>
</div>
    </div>
    
    
</div></turbo-frame></template></turbo-stream>