<templates>
  <t t-name="o-spreadsheet-ErrorToolTip">
    <div class="o-error-tooltip">
      <t t-if="this.evaluationError">
        <div class="o-error-tooltip-title fw-bold text-danger">Error</div>
        <div class="o-error-tooltip-message">
          <t t-out="this.evaluationError.message"/>
          <div class="fst-italic" t-if="this.errorOriginPositionString">
            Caused by
            <span
              t-out="this.errorOriginPositionString"
              class="o-button-link"
              t-on-click="this.selectCell"
              title="Click to select the cell"
            />
          </div>
          <t t-set="missingHeadersForSpread" t-value="this.getMissingHeadersForSpread()"/>
          <div
            t-if="missingHeadersForSpread"
            id="missing-headers"
            class="o-button-link mt-4"
            t-on-click="() => this.addMissingHeaders(missingHeadersForSpread)"
            t-out="this.getAddMissingHeadersButtonText(missingHeadersForSpread)"
          />
        </div>
      </t>
      <t t-if="this.dataValidationErrorMessage">
        <div class="o-error-tooltip-title fw-bold text-danger">Invalid</div>
        <div class="o-error-tooltip-message">
          <t t-out="this.dataValidationErrorMessage"/>
        </div>
      </t>
    </div>
  </t>
</templates>
