import { css, html, LitElement } from 'lit'
import { customElement, property, state } from 'lit/decorators.js'

import './process-template-builder'

@customElement('process-info-link')
export class ProcessInfoLink extends LitElement {
  static styles = [
    css`
      :host {
        display: flex;
        flex-direction: column;
        background-color: var(--main-section-background-color);
        position: relative;
        text-align: center;
        color: var(--label-color);
        font: var(--label-font);

        overflow-y: auto;
      }

      link-builder {
        flex: 1;
        text-align: start;
      }

      process-template-builder {
        flex: 1;
        text-align: start;
      }

      @media screen and (max-width: 460px) {
        :host {
          width: 100vw;
        }
      }
    `
  ]

  @property({ type: Object }) process?: { id: string; name: string; description: string }

  render() {
    return html` <process-template-builder .process=${this.process}> </process-template-builder> `
  }
}
