<templates>
  <t t-name="o_spreadsheet.PivotHTMLRenderer">
    <div class="w-100">
      <Checkbox
        name="'missing_values'"
        label.translate="Display missing cells only"
        value="this.state.showMissingValuesOnly"
        onChange.bind="(value) => this.state.showMissingValuesOnly = value"
        className="'m-2'"
      />
      <t t-set="tableData" t-value="this.getTableData()"/>
      <table
        class="o_pivot_html_renderer"
        t-if="tableData.values.length > 0 or tableData.rows.length > 0">
        <tr t-foreach="tableData.columns" t-as="row" t-key="row_index">
          <t t-if="row_index === 0">
            <th t-att-rowspan="tableData.columns.length"/>
          </t>
          <t t-foreach="row" t-as="cell" t-key="cell_index">
            <th
              t-att-colspan="cell.span"
              t-att-style="cell.style"
              t-att-class="{ o_missing_value: cell.isMissing }"
              t-on-click="() => this.props.onCellClicked(cell.formula)">
              <t t-out="cell.value"/>
            </th>
          </t>
        </tr>
        <t t-foreach="tableData.rows" t-as="row" t-key="row_index">
          <tr>
            <th
              t-att-style="row.style"
              t-att-class="{ o_missing_value: row.isMissing }"
              t-on-click="() => this.props.onCellClicked(row.formula)">
              <t t-out="row.value"/>
            </th>
            <t t-foreach="tableData.values" t-as="col" t-key="col_index">
              <td
                t-att-class="{ o_missing_value: col[row_index].isMissing }"
                t-on-click="() => this.props.onCellClicked(col[row_index].formula)">
                <t t-out="col[row_index].value"/>
              </td>
            </t>
          </tr>
        </t>
      </table>
      <div class="alert alert-info" t-else="1">This pivot has no cell missing on this sheet</div>
    </div>
  </t>
</templates>
