= turbo_frame_tag "modal_frame", target: "_top" do  
  .container.py-4#projectDeletionApp data-controller="project-deletion" data-project-id="#{@project.id}" data-project-title="#{@project.title}"
    .deletion-confirmation
      .alert.alert-danger.mb-4
        h5.alert-heading.d-flex.align-items-center
          i.bi.bi-exclamation-triangle-fill.me-2
          | Delete Project?
          
        hr
        
        p.mb-3
          | You are about to delete 
          strong#projectNamePlaceholder= @project.title
          |. This action cannot be undone and will permanently remove all associated data.
      
      .mb-4
        label.form-label.fw-bold Type the project name to confirm deletion:
        input.form-control#confirmProjectName type="text" autocomplete="off" v-model="projectInput"
        .form-text 
          | Please type 
          span.fw-bold.text-primary= @project.title
          |  to confirm.
      
      .d-flex.justify-content-end.gap-2
        button.btn.btn-secondary type="button" data-bs-dismiss="modal" aria-hidden="undefined"
          | Cancel
        button.btn.btn-danger#confirmDeleteBtn type="button" :disabled="!isProjectNameCorrect" v-on:click="deleteProject"
          i.bi.bi-trash.me-1
          | Delete Project