import { html, cssManager } from '@design.estate/dees-element';
import * as tsclass from '@tsclass/tsclass';

export const demoFunc = () => html` <style>
    .demo {
      background: ${cssManager.bdTheme('#eeeeeb', '#000000')};
      display: block;
      content: '';
      padding: 40px;
    }
  </style>
  <div class="demo">
    <dees-dataview-statusobject
      .statusObject=${{
        id: '1',
        name: 'Demo Item',
        combinedStatus: 'partly_ok',
        combinedStatusText: 'partly_ok',
        details: [
          {
            name: 'Detail 1',
            value: 'Value 1',
            status: 'ok',
            statusText: 'OK',
          },
          {
            name: 'Detail 2',
            value: 'Value 2',
            status: 'partly_ok',
            statusText: 'partly_ok',
          },
          {
            name: 'Detail 3',
            value: 'Value 3',
            status: 'not_ok',
            statusText: 'not_ok',
          },
          {
            name: 'Detail 4',
            value:
              'Value 4 jhdkfjhalskdfjhfdjskalsdkfjhfdjskalskdjfhjdkslaksjdhfjdkslaskdfjhfjdkslaskdjfhjdskalskdjhfdjskalskdjfhdjskl',
            status: 'ok',
            statusText: 'OK',
          },
        ],
      } as tsclass.code.IStatusObject}
    >
    </dees-dataview-statusobject>
  </div>`;