I want to move this html '<div class="panel" *ngIf="isODRSummaryPanelOpen">
                                    <div modal-header>
                                      <div class="modal-header" style="padding-top: 20px;">
                                        <button type="button" class="pull-right form-close" aria-hidden="true"
                                          (click)="closeModal()">
                                          <i class="fa fa-angle-double-right" aria-hidden="true"
                                            style="margin-top: -7px;font-size: 20px!important;"></i>
                                        </button>
                                        <h4 class="bold" style="margin-top:-1px;">Summary for
                                          {{productionReleaseProgressData.productionReleaseId}}</h4>
                                      </div>
                                      <div class="panel_body">
                                        <div class="summary-text">
                                          <b>{{AISummaryResponse.AIRecommendations}}</b>
                                        </div>
                                        <div class="summary-table">
                                          <table>
                                            <thead>
                                              <tr>
                                                <th></th>
                                                <th>Completion</th>
                                                <th>Details</th>
                                                <th>Comments</th>
                                              </tr>
                                            </thead>
                                            <tbody>
                                              <!-- Scope Section -->
                                              <tr id="scopeSection">
                                                <td><b>Scope</b></td>
                                                <td>
                                                  <div [ngClass]="{
                                                    'green-circle': AISummaryResponse.scope.percentage > 90,
                                                    'yellow-circle': AISummaryResponse.scope.percentage > 70 && AISummaryResponse.scope.percentage <= 90,
                                                    'red-circle': AISummaryResponse.scope.percentage <= 70
                                                  }"></div>{{AISummaryResponse.scope.percentage}}%
                                                </td>
                                                <td>{{'Features'|translate}}:
                                                  {{AISummaryResponse.scope.totalFeaturesWithGroomingCompleted}}/{{AISummaryResponse.totalFeaturesCount}}<br>
                                                  {{'Stories'|translate}}:
                                                  {{AISummaryResponse.scope.totalStoriesWithGroomingCompleted}}/{{AISummaryResponse.totalStoriesCount}}
                                                </td>
                                                                                              </tr>

                                              <tr>
                                                <td colspan="4">
                                                  <div class="collapse" id="scopeDetailsCollapse">
                                                    <div class="card card-body">
                                                      <div class="card-body-items-header">
                                                        <b>Items Need Attention</b>
                                                        <span class="right-text">
                                                          {{ scopeIssues.length }} {{ scopeIssues.length === 1 ? 'item' : 'items' }}
                                                        </span>
                                                      </div>
                                                      <br /><br />
                                                      <div *ngFor="let issue of scopeIssues">
                                                        <p [innerHTML]="issue"></p>
                                                      </div> 
                                                    </div>
                                                  </div>
                                                </td>
                                              </tr>

                                              <tr>
                                                <td></td>
                                              </tr>

                                              
                                            </tbody>

                                          </table>
                                        </div>
                                      </div>
                                    </div>
                                  </div>' and ts 'fetchODRSummary() {
    if (this.isODRSummaryPanelOpen == false) {
      this.productionReleaseService.getSummaryForProductionRelease(this.productionReleaseProgressData.productionReleaseId, this.productionReleaseProgressData.id, this.productionReleaseProgressData.title).then((response:any) => {
        if(response){
          try {
            //this.htmlContent = (window as any).marked.parse(response); // Assuming API returns { message: "some value" }
            this.AISummaryResponse = response;

            this.planningIssues = [];
            this.scopeIssues = [];
            this.developmentIssues = [];
  
            this.AISummaryResponse.planning.storiesWithoutPlanning.forEach((story: string | number) => {
              console.log("Processing story:", story);
              const issues = [
                this.AISummaryResponse.planning.stories.storiesPastIterationEndDateList.includes(story) ? "is past the iteration end date" : "",
                this.AISummaryResponse.planning.stories.storyWithoutTasksList.includes(story) ? "does not have tasks defined" : "",
                this.AISummaryResponse.planning.stories.storyWithoutOwnerList.includes(story) ? "does not have an owner assigned" : "",
                this.AISummaryResponse.planning.stories.storyWithoutIterationList.includes(story) ? "is not tagged to an iteration" : "",
                this.AISummaryResponse.planning.stories.storiesIterationEndDateAfterODRTargetDateList.includes(story) ? "has an iteration end date after the ODR target date" : "",
                this.AISummaryResponse.planning.stories.storiesWhichHasTasksWithoutEstimationList.includes(story) ? "has tasks without estimation" : "",
                this.AISummaryResponse.planning.stories.storyWithoutEstimationList.includes(story) ? "does not have estimation" : "",
                this.AISummaryResponse.planning.stories.storyWithoutTeamList.includes(story) ? "does not have a team assigned" : ""
              ].filter(Boolean);
            
              //this.planningIssues[story] = `This backlog ${issues.slice(0, -1).join(", ")}${issues.length > 1 ? " and " : ""}${issues.slice(-1)}.`;
  
              this.planningIssues.push(
                `<b>${story}</b> &nbsp; &nbsp; This backlog ${issues.slice(0, -1).join(", ")}${issues.length > 1 ? " and " : ""}${issues.slice(-1)}.`
              );
              
            });
            
  
            this.AISummaryResponse.planning.featuresWithoutPlanning.forEach((feature: string | number) => {
              const issues = [
                this.AISummaryResponse.planning.features.featureWithoutPIEndDateList.includes(feature) ? "has no program interval end date defined" : "",
                this.AISummaryResponse.planning.features.featurePIEndDateAfterODRTargetDateList.includes(feature) ? "has program interval end date after release target date" : "",
                this.AISummaryResponse.planning.features.delayedFeaturesList.includes(feature) ? "is delayed" : "",
                this.AISummaryResponse.planning.features.featureWithoutTeamList.includes(feature) ? "does not have a team assigned" : "",
                this.AISummaryResponse.planning.features.featureWithoutOwnerList.includes(feature) ? "does not have an owner assigned" : "",
                this.AISummaryResponse.planning.features.featureWithoutPINameList.includes(feature) ? "is not tagged to a program interval" : ""
              ].filter(Boolean);
            
              this.planningIssues.push(
                `<b>${feature}</b> &nbsp; &nbsp; This backlog ${issues.slice(0, -1).join(", ")}${issues.length > 1 ? " and " : ""}${issues.slice(-1)}.`
              );
              //this.planningIssues[feature] = `This backlog ${issues.slice(0, -1).join(", ")}${issues.length > 1 ? " and " : ""}${issues.slice(-1)}.`;
            });
  
            this.AISummaryResponse.development.storiesWithoutDevelopment.forEach((story: string | number) => {
              const issues = [
                this.AISummaryResponse.development.stories.storiesNotDoneList.includes(story) ? "is not in done status" : "",
                this.AISummaryResponse.development.stories.storiesWithOpenDefectList.includes(story) ? "has open defects" : "",
                this.AISummaryResponse.development.stories.storiesWithoutTasksDoneList.includes(story) ? "does not have tasks completed" : "",
                this.AISummaryResponse.development.stories.storiesWithoutTestsCompleted.includes(story) ? "has stories without tests completed" : ""
              ].filter(Boolean);
            
              this.developmentIssues.push(`<b>${story}</b> &nbsp; &nbsp; This backlog ${issues.slice(0, -1).join(", ")}${issues.length > 1 ? " and " : ""}${issues.slice(-1)}.`);
              //this.developmentIssues[story] = `This backlog ${issues.slice(0, -1).join(", ")}${issues.length > 1 ? " and " : ""}${issues.slice(-1)}.`;
            });
  
            this.AISummaryResponse.development.featuresWithoutDevelopmentDone.forEach((feature: string | number) => {
              const issues = [
                this.AISummaryResponse.development.features.featureWithoutDoneStatusList.includes(feature) ? "is not in done status" : "",
              ].filter(Boolean);
  
              this.developmentIssues.push(`<b>${feature}</b> &nbsp; &nbsp; This backlog ${issues.slice(0, -1).join(", ")}${issues.length > 1 ? " and " : ""}${issues.slice(-1)}.`);
              //this.developmentIssues[feature] = `This backlog ${issues.slice(0, -1).join(", ")}${issues.length > 1 ? " and " : ""}${issues.slice(-1)}.`;
            });
  
            this.AISummaryResponse.scope.storiesWithoutGroomingIds.forEach((story: string | number) => {
  
              const issues = [
                this.AISummaryResponse.scope.stories.storyWithoutTitleList.includes(story) ? "does not have a title that meets the minimum length requirement" : "",
                this.AISummaryResponse.scope.stories.storyWithoutDescriptionList.includes(story) ? "does not have a description" : "",
                this.AISummaryResponse.scope.stories.storyWithoutAcceptanceCriteriaList.includes(story) ? "does not have acceptance criteria" : "",
                this.AISummaryResponse.scope.stories.storiesWithoutTestsList.includes(story) ? "does not have tests defined" : ""
                
              ].filter(Boolean);
            
              this.scopeIssues.push(`<b>${story}</b> &nbsp; &nbsp; This backlog ${issues.slice(0, -1).join(", ")}${issues.length > 1 ? " and " : ""}${issues.slice(-1)}.`);
              //this.scopeIssues[story] = `This backlog ${issues.slice(0, -1).join(", ")}${issues.length > 1 ? " and " : ""}${issues.slice(-1)}.`;
            });
            
            this.AISummaryResponse.scope.featuresWithoutGroomingList.forEach((feature: string | number) => {
              const issues = [
                this.AISummaryResponse.scope.features.featureWithoutTitleList.includes(feature) ? "does not have a title that meets the minimum length requirement" : "",
                this.AISummaryResponse.scope.features.featureWithoutAcceptanceCriteriaList.includes(feature) ? "does not have acceptance criteria" : "",
                this.AISummaryResponse.scope.features.featureWithoutDescriptionList.includes(feature) ? "does not have a description" : "",
                this.AISummaryResponse.scope.features.featureWithoutStoriesList.includes(feature) ? "does not have associated stories" : ""
              ].filter(Boolean);
            
              this.scopeIssues.push(`<b>${feature}</b> &nbsp; &nbsp; This backlog ${issues.slice(0, -1).join(", ")}${issues.length > 1 ? " and " : ""}${issues.slice(-1)}.`);
              //this.scopeIssues[feature] = `This backlog ${issues.slice(0, -1).join(", ")}${issues.length > 1 ? " and " : ""}${issues.slice(-1)}.`;
            });
  
            this.isODRSummaryPanelOpen = true;
  
          } catch (error) {
            console.error("Error fetching message:");
            console.error("Error in processing response:");
          }
        }
      });
    }
  }

  handleAISummaryCheck(event: Event) {
    const target = event.target as HTMLElement;
    if (target.tagName === "A") {
      this.isODRSummaryPanelOpen = false;
    }
  }

  // Close modal
  closeModal() {
    this.isODRSummaryPanelOpen = false;
  }

    expandItemsThatNeedAttention(divId: string, collapseId: string): void {
      const element = document.getElementById(divId);
      const eyeElement = document.getElementById(divId + 'ITag');
      const collapseElement = document.getElementById(collapseId);
      collapseElement.setAttribute('aria-expanded', 'false');

    
      if (element) {
        if (eyeElement) {
          const currentTransform = eyeElement.style.transform;
          if (currentTransform === 'rotate(0deg)' || currentTransform === '') {
            eyeElement.style.transition = 'transform 0.5s ease-in-out';

          } else {
            eyeElement.style.transition = 'transform 0.1s ease-in-out';
            eyeElement.style.transform = 'rotate(0deg)';
            element.style.borderLeft = "none";
            element.style.borderRight = "none";
            element.style.borderTop = "none";
            element.style.backgroundColor = "white";
            collapseElement.setAttribute('aria-expanded', 'false');
          }
        } else {
          console.warn(`Element with ID '${divId + 'ITag'}' not found.`);
        }
      } else {
        console.warn(`Element with ID '${divId}' not found.`);
      }
    }' to child component with selector 'app-production-release-tracker-component'