How to create an input in Ember that allows a user to report a problem

In Ember Octane, I am creating a form in which a user can report an issue with the data that has been inputted. This is the refactored code that has been pared down from having a redundant input with an if/else statement.

  

.report {
    width: 10px;
    background-color: $primary;
    border: 1px solid;
    border-radius: 0.5rem;
  }

  .ps-report { width: 10px; color: $primary; }

  .issue { display: none; background-color: $light; border: 1px solid #cccccc; }

  .report:hover + .issue, .ps-report:hover + .issue, .issue:hover { display: inline-block; }

 


 <div class="col">
  <label for="clientFirstName" class="form-label">First Name</label>
  <div class="">
   
     <span class="report"></span>
     <Ui::Button class="issue"  
      >              
     <FaIcon @icon="info-circle" class="text-danger" /></Ui::Button>
    
    <Input @value= @type="text" id="clientFirstName" class="form-control" 
      placeholder="Jane" required="true" autofocus="true" data-test-first-name />
   </div>
  </div>

The input has a blue bar on the side which, when hovered over, shows a button with an icon that places text into a textarea at the top of the page. The report class selector is the blue bar, the issue class selector is the button with the icon.

Is there a better way to go about this? The conditional seems clumsy and verbose, especially having to put it on the div above the actual conditional. This form is used in many places so the conditional has to be there for my specific use case.

Any help would be great, thanks!