import { __decorate, __metadata } from "tslib";
import { css, html, LitElement } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import { ScrollbarStyles } from '@operato/styles';
import { privileged } from '@things-factory/auth-base/dist-client';
import './group-info-basic';
import './group-info-import';
let GroupInfo = class GroupInfo extends LitElement {
    constructor() {
        super(...arguments);
        this.tab = 'basic';
    }
    render() {
        return html `
      ${privileged({ privilege: 'mutation', category: 'board' }, html `
          <div tab>
            <span @click=${() => (this.tab = 'basic')} ?active=${this.tab == 'basic'}>basic</span>
            <span @click=${() => (this.tab = 'import')} ?active=${this.tab == 'import'}>import</span>
          </div>
        `)}
      <div content>
        ${this.tab == 'basic'
            ? html `<group-info-basic groupId=${ifDefined(this.groupId)}></group-info-basic>`
            : html `<group-info-import groupId=${ifDefined(this.groupId)}></group-info-import>`}
      </div>
    `;
    }
    close() {
        history.back();
    }
};
GroupInfo.styles = [
    ScrollbarStyles,
    css `
      :host {
        height: 100%;
        min-width: 360px;

        display: flex;
        flex-direction: column;
        position: relative;
        background-color: var(--md-sys-color-surface);
      }

      [tab] {
        width: 100%;
        display: flex;
      }

      [tab] > * {
        flex: 1;
      }

      [content] {
        flex: 1;
        overflow-y: auto;
      }

      span {
        padding: 5px 4px 1px;
        font: var(--group-bar-textbutton);
        background-color: var(--md-sys-color-secondary);
        color: rgba(255, 255, 255, 0.8);
        text-align: center;
        text-transform: uppercase;
      }

      span[active] {
        background-color: var(--md-sys-color-primary);
      }

      @media screen and (max-width: 460px) {
        :host {
          width: 100vw;
        }
      }
    `
];
__decorate([
    property({ type: String }),
    __metadata("design:type", String)
], GroupInfo.prototype, "groupId", void 0);
__decorate([
    state(),
    __metadata("design:type", String)
], GroupInfo.prototype, "tab", void 0);
GroupInfo = __decorate([
    customElement('group-info')
], GroupInfo);
export { GroupInfo };
//# sourceMappingURL=group-info.js.map