import { Component, Input } from '@angular/core';
import { NodeDef } from '../models/nodeDef'

@Component({
  selector: 'chix-node-card',
  template: `
    <a [routerLink]="['/nodes', id]">
      <mat-card>
        <mat-card-title-group>
          <img mat-card-sm-image *ngIf="thumbnail" [src]="thumbnail"/>
          <mat-card-title>{{ title | bcEllipsis:35 }}</mat-card-title>
          <mat-card-subtitle *ngIf="subtitle">{{ subtitle | bcEllipsis:40 }}</mat-card-subtitle>
        </mat-card-title-group>
        <mat-card-content>
          <p *ngIf="description">{{ description | bcEllipsis }}</p>
        </mat-card-content>
        <mat-card-footer>
          <bc-book-authors [book]="book"></bc-book-authors>
        </mat-card-footer>
      </mat-card>
    </a>
  `,
  styles: [
    `
    :host {
      display: flex;
    }
    :host a {
      display: flex;
    }
  `,
  ],
})
export class NodeCardComponent {
  @Input() node: NodeDef;

  get id() {
    return this.node._id;
  }

  get title() {
    return this.node.title;
  }

  get description() {
    return this.node.description;
  }
}