<c8y-title>Hello from outlet</c8y-title>

<c8y-action-bar-item [placement]="'right'">
  <button class="btn btn-link" (click)="addRandom()"><i c8yIcon="plus-circle"></i> Add random</button>
</c8y-action-bar-item>
<c8y-action-bar-item [placement]="'right'">
  <button class="btn btn-link" (click)="isFrozen = !isFrozen">
    <i [c8yIcon]="isFrozen ? 'lock' : 'unlock'"></i> Toggle freeze
  </button>
</c8y-action-bar-item>

<c8y-dashboard (dashboardChange)="dashboardChange($event)">
  <c8y-dashboard-child
    [isFrozen]="isFrozen"
    title="dynamic"
    *ngFor="let widget of widgets"
    #current
  >
    x: {{ current.x }}<br />
    y: {{ current.y }}<br />
    width: {{ current.width }}<br />
    height: {{ current.height }}<br />
  </c8y-dashboard-child>
  <c8y-dashboard-child
    #cpWidget
    [isFrozen]="isFrozen"
    [x]="0"
    [y]="1"
    [width]="3"
    [height]="2"
    [data]="widget"
    [class]="'card card-dashboard panel-title-regular panel-content-branded panel-title-overlay'"
  >
    <c8y-dashboard-child-title>
      <span>World!</span>
    </c8y-dashboard-child-title>
    x: {{ cpWidget.x }}<br />
    y: {{ cpWidget.y }}<br />
    width: {{ cpWidget.width }}<br />
    height: {{ cpWidget.height }}<br />
  </c8y-dashboard-child>
  <c8y-dashboard-child
    #cpWidget2
    [isFrozen]="isFrozen"
    [x]="8"
    [y]="1"
    [width]="4"
    [height]="4"
    [class]="'card card-dashboard panel-content-dark'"
  >
    <c8y-dashboard-child-title>
      <span>Hello!</span>
    </c8y-dashboard-child-title>
    <c8y-dashboard-child-action>
      <a href="" (click)="cpWidget2.isFrozen = !cpWidget2.isFrozen; (false)">
        <i [c8yIcon]="cpWidget2.isFrozen ? 'lock' : 'unlock'"></i> Toggle freeze
      </a>
    </c8y-dashboard-child-action>
    x: {{ cpWidget2.x }}<br />
    y: {{ cpWidget2.y }}<br />
    width: {{ cpWidget2.width }}<br />
    height: {{ cpWidget2.height }}<br />
  </c8y-dashboard-child>

  <c8y-dashboard-child
    #cpWidget3
    [isFrozen]="isFrozen"
    [x]="0"
    [y]="3"
    [width]="4"
    [height]="4"
    [class]="'card-dashboard panel-content-transparent'"
  >
    <c8y-dashboard-child-title *ngIf="showTitle">
      <span>Transparent!</span>
    </c8y-dashboard-child-title>
    <c8y-dashboard-child-action>
      <a href="" (click)="showTitle = !showTitle; (false)">
        <i [c8yIcon]="'heading'"></i> Hide/show title
      </a>
    </c8y-dashboard-child-action>
    <c8y-dashboard-child-action>
      <a href="" (click)="cpWidget3.isFrozen = !cpWidget3.isFrozen; (false)">
        <i [c8yIcon]="cpWidget3.isFrozen ? 'lock' : 'unlock'"></i> Toggle freeze
      </a>
    </c8y-dashboard-child-action>
    x: {{ cpWidget3.x }}<br />
    y: {{ cpWidget3.y }}<br />
    width: {{ cpWidget3.width }}<br />
    height: {{ cpWidget3.height }}<br />
  </c8y-dashboard-child>
</c8y-dashboard>