<div class="lab-container">
  <pa-accordion>
    <pa-accordion-item
      #formContainer
      id="form"
      [itemTitle]="formTitle | translate"
      [expanded]="(hasResults | async) === false">
      <pa-accordion-item-body>
        <div class="form-container">
          <stf-question-block (queriesChange)="onQueriesChange($event)"></stf-question-block>

          <ng-content></ng-content>
        </div>
      </pa-accordion-item-body>
    </pa-accordion-item>

    <pa-accordion-item
      #resultsContainer
      id="results"
      [expanded]="hasResults | async"
      [itemTitle]="'rag-lab.common.results.title' | translate">
      <pa-accordion-item-body>
        <div class="expander-padding">
          <pa-button
            size="small"
            icon="download"
            iconAndText
            (click)="downloadCsv.emit()">
            {{ 'rag-lab.common.results.download-csv' | translate }}
          </pa-button>

          @for (entry of results | async; track entry.query) {
            <div class="expander-card-container">
              <pa-expander
                card
                expanded
                [contentLoaded]="updateResultsExpanderSize | async"
                (toggleExpander)="updateResultHeight()">
                <pa-expander-header>
                  <div class="title-s">
                    {{ 'rag-lab.common.results.question' | translate: { query: entry.query } }}
                  </div>
                </pa-expander-header>
                <pa-expander-body>
                  <div class="answers">
                    @for (result of entry.results; track result) {
                      <div class="answer-container">
                        <div class="config-container">
                          @if (result.configId) {
                            <div>
                              <span class="title-xxs">{{ result.configId }}</span>
                              ({{ result.modelName }})
                            </div>
                          } @else {
                            <span class="title-xxs">{{ result.modelName }}</span>
                          }
                          @if (result.tokens) {
                            <div class="tokens-container">
                              <div>
                                <span>{{ 'rag-lab.common.results.input-tokens' | translate }}:</span>
                                <strong>{{ result.tokens.input | number: '1.0-6' }}</strong>
                              </div>
                              <div>
                                <span>{{ 'rag-lab.common.results.output-tokens' | translate }}:</span>
                                <strong>{{ result.tokens.output | number: '1.0-6' }}</strong>
                              </div>
                              @if (result.tokens.image > 0) {
                                <div>
                                  <span>{{ 'rag-lab.common.results.image-tokens' | translate }}:</span>
                                  <strong>{{ result.tokens.image | number: '1.0-6' }}</strong>
                                </div>
                              }
                              <div>
                                <span>{{ 'generic.total' | translate }}:</span>
                                <strong>
                                  {{
                                    result.tokens.input + result.tokens.output + result.tokens.image | number: '1.0-6'
                                  }}
                                </strong>
                              </div>
                            </div>
                          }
                        </div>
                        <div
                          class="body-s"
                          [innerHTML]="result.rendered || result.answer"></div>
                      </div>
                    }
                  </div>
                </pa-expander-body>
              </pa-expander>
            </div>
          }
        </div>
      </pa-accordion-item-body>
    </pa-accordion-item>
  </pa-accordion>
</div>
