ng-implementation/my-workspace/projects/sae-lib/buttons/feedback-button/feedback-button.html

<button (click)="toggleModal()" [ngClass]="{
'is-active': isModalOpen
}" class="feedback-button">
  <span class="text">
  Feedback
  </span>
  <i class="ri-message-2-line"></i>
</button>

<!-- Feedback Modal -->
@if (isModalOpen) {
  <div class="feedback-modal-overlay">

    <div class="feedback-modal">
      <button (click)="toggleModal()" [ngClass]="{
'is-active': isModalOpen
}" class="feedback-button">
  <span class="text">
  Feedback
  </span>
        <i class="ri-message-2-line"></i>
      </button>

      <div class="modal-header">
        <div class="side">
          <h3>Share us your feedback !</h3>

          <div class="star-row">
            <i class="ri-star-line"></i>
            <i class="ri-star-line"></i>
            <i class="ri-star-line"></i>
            <i class="ri-star-line"></i>
            <i class="ri-star-line"></i>
          </div>
        </div>
        <div class="side">
          <sae-m-button (click)="toggleModal()" [kind]="'secondary'" [label]="'retour'"
                        [size]="'medium'"></sae-m-button>
          <sae-m-button (click)="submitFeedback()" [kind]="'primary'" [label]="'Soumettre'"
                        [size]="'medium'"></sae-m-button>

        </div>
        <!--        <button class="close-button" (click)="toggleModal()">-->
        <!--          <i class="ri-close-line"></i>-->
        <!--        </button>-->

      </div>

      <div class="modal-body">


        <textarea
          [(ngModel)]="feedbackText"
          [disabled]="isSubmitting"
          placeholder="Enter your feedback here..."
          rows="5"
        ></textarea>

        @if (submitSuccess) {
          <div class="success-message">
            <i class="ri-check-line"></i> Thank you for your feedback!
          </div>
        }

        @if (submitError) {
          <div class="error-message">
            <i class="ri-error-warning-line"></i> Failed to submit feedback. Please try again.
          </div>
        }
      </div>

      <div class="modal-footer">
        <!--        <button-->
        <!--          class="cancel-button"-->
        <!--          (click)="toggleModal()"-->
        <!--          [disabled]="isSubmitting"-->
        <!--        >-->
        <!--          Cancel-->
        <!--        </button>-->

        <!--        <button-->
        <!--          class="submit-button"-->
        <!--          (click)="submitFeedback()"-->
        <!--          [disabled]="isSubmitting || !feedbackText.trim()"-->
        <!--        >-->
        <!--          -->
        <!--        </button>-->

        @if (isSubmitting) {
          <i class="ri-loader-4-line spinning"></i> Sending...
        } @else {
          <!--        Send Feedback-->
        }
      </div>
    </div>
  </div>
}