import {
  DeesElement,
  TemplateResult,
  property,
  customElement,
  html,
} from '@designestate/dees-element';

import * as domtools from '@designestate/dees-domtools';

@customElement('deap-activitylog')
export class DeapActivitylog extends DeesElement {
  public static demo = () => html`<deap-activitylog></deap-activitylog>`;

  // INSTANCE
  public render(): TemplateResult {
    return html`
      ${domtools.elementBasic.styles}
      <style>
        :host {
          color: #fff;
          position: relative;
          display: block;
          width: 100%;
          max-width: 300px;
          height: 100%;
          background: #343b43;
        }
        .maincontainer {
          position: absolute;
          top: 0px;
          left: 0px;
          height: 100%;
          width: 100%;
        }

        .topbar {
          position: absolute;
          height: 80px;
          width: calc(100% - 20px);
          margin: 0px 10px 0px 10px;
          border-bottom: 1px solid #707070;
        }

        .topbar .heading {
          text-align: center;
          line-height: 80px;
          font-family: Roboto Mono;
          font-size: 14px;
        }

        .activityContainer {
          position: absolute;
          top: 80px;
          bottom: 0px;
          width: 100%;
          padding: 10px;
        }

        .activityentry {
          background: rgba(0, 0, 0, 0.2);
          min-height: 30px;
          border-radius: 3px;
          cursor: pointer;
        }
      </style>
      <div class="maincontainer">
        <div class="topbar">
          <div class="heading">Activity Log</div>
        </div>
        <div class="activityContainer">
          <div class="activityentry"></div>
        </div>
      </div>
    `;
  }
}