<templates>
  <t t-name="o-spreadsheet.ChartAnnotation">
    <SidePanelCollapsible isInitiallyCollapsed="true" title.translate="Annotation">
      <t t-set-slot="content">
        <Section class="'pt-0 px-4'" title.translate="Text">
          <div
            class="o-input o-input-infotext overflow-auto"
            t-att-class="{ 'border px-2': this.state.isOverflowing, 'border-bottom': !this.state.isOverflowing }"
            t-ref="this.editorRef"
            t-att-data-placeholder="this.annotationPlaceholder"
            data-test-id="annotation-text"
            contenteditable="plaintext-only"
            t-on-beforeinput="this.checkLength"
            t-on-input="(ev) => this.onInput(ev)"
            t-on-blur="() => this.onBlur()"
          />
        </Section>
        <Section class="'pt-0 px-4'" title.translate="See more link">
          <div data-test-id="annotation-link">
            <TextInput
              class="'o-input'"
              value="this.props.definition.annotationLink ?? ''"
              onChange="(label) => this.updateAnnotationLink(label)"
              placeholder.translate="Add a redirection link"
              maxLength="2000"
            />
          </div>
        </Section>
      </t>
    </SidePanelCollapsible>
  </t>
</templates>
