<svg:path [attr.d]="outlinePath" fill="var(--ion-color-light)" stroke="var(--ion-color-medium-soft)"></svg:path>
@if (isEnabled) {
  <svg:path [attr.d]="valuePath" fill="var(--ion-color-production)" stroke="var(--ion-color-production)"></svg:path>
}
@if (isEnabled && energyFlow) {
  <svg:g>
    <svg:defs>
      <svg:linearGradient [attr.id]="sectionId" [attr.x1]="energyFlow.gradient.x1" [attr.y1]="energyFlow.gradient.y1" [attr.x2]="energyFlow.gradient.x2" [attr.y2]="energyFlow.gradient.y2">
        <svg:stop offset="0%" stop-color="var(--ion-item-background)" />
        <svg:stop offset="100%" stop-color="var(--ion-color-production)" />
      </svg:linearGradient>
    </svg:defs>
    <svg:polygon [attr.points]="energyFlow.points" [attr.fill]="fillRef" />
    <svg:polygon [class]="productionAnimationClass" [attr.points]="energyFlow.animationPoints" style="fill: var(--ion-item-background)" />
  </svg:g>
}
@if (isEnabled && squarePosition && square) {
  <svg:g attr.transform="translate({{squarePosition.x}},{{squarePosition.y}})">
    <svg:text [attr.x]="square.valueText.x" [attr.y]="square.valueText.y" text-anchor="middle" font-family="sans-serif" [attr.font-size]="square.valueText.fontsize" fill="var(--ion-text-color)">
      @if (valueText) {
        <ng-container>{{valueText}}</ng-container>
      } @else {
        <ng-template [ngTemplateOutlet]="no_text"></ng-template>
      }
      <ng-template #no_text>-</ng-template>
    </svg:text>
    <svg:use style="color: var(--ion-color-production)" [attr.x]="square.image.x" [attr.y]="square.image.y" [attr.width]="square.image.length" [attr.height]="square.image.length" [attr.href]="square.image.image + '#root'"></svg:use>

    @if (targetRoute() !== null) {
      <svg:rect [attr.x]="square.image.x" [attr.y]="square.image.y" [attr.width]="square.image.length" [attr.height]="square.image.length" pointer-events="all" opacity="0" cursor="pointer" (click)="onIconClick($event)" />
    }
  </svg:g>
}