<templates>
  <t t-name="o-spreadsheet-FiguresContainer">
    <div class="position-absolute">
      <t t-foreach="this.containers" t-as="container" t-key="container.type">
        <div
          class="o-figure-container position-absolute pe-none overflow-hidden"
          t-att-style="container.style"
          t-att-data-id="container.type + 'Container'">
          <div
            class="o-figure-viewport-inverse w-0 h-0 overflow-visible position-absolute"
            t-att-style="container.inverseViewportStyle">
            <t t-if="container.type == 'dnd' and this.dnd.selectedRect">
              <div
                t-att-style="this.selectedRectStyle"
                class="position-absolute o-selected-border"
              />
            </t>
            <t t-foreach="container.figures" t-as="figureUI" t-key="figureUI.id">
              <FigureComponent
                figureUI="figureUI"
                style="this.getFigureStyle(figureUI)"
                class="this.getFigureClass(figureUI)"
                onMouseDown="(ev) => this.startDraggingFigure(figureUI, ev)"
                onClickAnchor.bind="this.resizeAllSelectedFigures"
              />
            </t>
          </div>
        </div>
      </t>
    </div>
    <div
      class="o-figure-container position-absolute pe-none overflow-hidden"
      t-if="this.dnd.horizontalSnap"
      t-att-style="this.dnd.horizontalSnap.containerStyle"
      t-att-data-id="'HorizontalSnapContainer'">
      <div class="o-figure-snap-line horizontal" t-att-style="this.dnd.horizontalSnap.lineStyle"/>
    </div>
    <div
      class="o-figure-container position-absolute pe-none overflow-hidden"
      t-if="this.dnd.verticalSnap"
      t-att-style="this.dnd.verticalSnap.containerStyle"
      t-att-data-id="'VerticalSnapContainer'">
      <div class="o-figure-snap-line vertical" t-att-style="this.dnd.verticalSnap.lineStyle"/>
    </div>
  </t>
</templates>
