<form
  class="card card-highlight b-r-16 m-t-40"
  [formGroup]="feedbackForm"
  (ngSubmit)="onSubmit()"
>
  <div class="card-header p-48 p-b-24">
    <h3 translate>We value your feedback.</h3>
  </div>
  <div class="card-block p-48 p-t-0">
    <div class="d-flex-md row">
      <div class="col-md-4">
        <p
          class="m-b-8"
          [innerHTML]="feedbackMessageTpl | translate: { featurePreviewName: featurePreviewName }"
        ></p>
        <p
          class="m-b-24"
          translate
        >
          Your insights and suggestions directly influence the future of the platform.
        </p>
      </div>
      <div
        class="col-md-7"
        style="min-height: 256px"
      >
        @if (!submitted[featureKey]) {
          <div class="form-group">
            <label class="text-medium">
              {{ 'How would you rate your experience with this feature?' | translate }}
            </label>
            <div
              class="d-flex a-i-center gap-4"
              (mouseleave)="onMouseLeave()"
            >
              @for (star of stars; track star) {
                <button
                  class="btn-clean btn-lg"
                  [attr.aria-label]="
                    'Your rating: {{ starCount }} star(s)' | translate: { starCount: star }
                  "
                  type="button"
                  (mousedown)="onMouseDown(star)"
                  (mouseenter)="onMouseEnter(star)"
                >
                  @if (star <= (hoveredRating || feedbackForm.get('rating')?.value || 0)) {
                    <i class="dlt-c8y-icon-star stroked-icon status minor"></i>
                  } @else {
                    <i class="dlt-c8y-icon-star-outline status"></i>
                  }
                </button>
              }
            </div>
          </div>

          <div class="form-group">
            <label
              class="text-medium"
              for="feedback"
              translate
            >
              Share your feedback, suggestions, or any issues you’ve encountered.
            </label>
            <textarea
              class="form-control no-resize inner-scroll"
              style="max-height: 100px !important"
              [attr.aria-label]="'Enter your feedback here' | translate"
              id="feedback"
              c8y-textarea-autoresize
              formControlName="feedback"
              maxlength="900"
            ></textarea>
          </div>

          <label class="c8y-switch">
            <input
              id="contactViaEmail"
              type="checkbox"
              formControlName="contactViaEmail"
            />
            <span></span>
            <span>
              {{ 'I’m open to being contacted for follow-up about my feedback' | translate }}
            </span>
          </label>

          <button
            class="btn btn-primary m-t-24"
            type="submit"
            [disabled]="feedbackForm.invalid"
            translate
          >
            Submit feedback
          </button>
        } @else {
          <c8y-operation-result
            class="d-block"
            style="margin-top: -40px"
            type="success"
            [size]="90"
            text="{{ 'Thank you for your feedback.' | translate }}"
            [vertical]="true"
          ></c8y-operation-result>
        }
      </div>
    </div>
  </div>
</form>