Recent candidates

import * as ng from '@angular/core';
import { Component, ViewEncapsulation } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { createGrid } from '@toclocoinc/lattice-grid';
import '@toclocoinc/lattice-grid/css';
import createLatticeGrid from '@toclocoinc/lattice-grid/modules/angular';

const { LatticeGridComponent } = createLatticeGrid({ ng, createGrid });

// avatar is an inline SVG data URI (initials on a disc); swap it for a photo URL.
const candidates = [
  { id: '1', name: 'Elena Rodriguez', email: 'elena.r@example.com', avatar: 'data:image/svg+xml,...',
    position: 'Senior Frontend Developer', progress: 40, stage: 'Screening', applied: '2026-03-08' },
  // ...
];

const columns = [
  { field: 'avatar', title: ' ', sort: { enabled: false }, layout: { width: 64 },
    cell: { render: 'image', props: { shape: 'circle', size: 'md', alt: '' } } },
  { field: 'name', title: 'Candidate', layout: { width: 230 },
    cell: { render: 'twoline', props: { secondary: 'email' } } },
  { field: 'progress', title: 'Position', sort: { enabled: false }, layout: { width: 130 },
    cell: { render: 'progress', props: { min: 0, max: 100, showValue: false, variant: 'amber', label: 'Stage progress' } } },
  { field: 'position', title: ' ', sort: { enabled: false }, layout: { width: 210 }, header: { render: () => '' } },
  { field: 'stage', title: 'Stage', layout: { width: 150 },
    cell: { render: 'pill', props: { shape: 'pill',
      variant: { map: { Screening: 'info', 'Phone Screen': 'success', Interview: 'accent', Offer: 'warning' }, default: 'neutral' } } } },
  { field: 'applied', title: 'Applied date', type: 'date', format: { pattern: 'd MMM yyyy' }, layout: { width: 150 } },
  { id: 'act', title: 'Action', sort: { enabled: false }, layout: { width: 320 },
    cell: { template: '<button class="btn btn--primary">Schedule interview</button>'
                    + '<button class="btn btn--ghost">View profile</button>' } },
];

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [LatticeGridComponent],
  encapsulation: ViewEncapsulation.None,
  styles: [`
    :host { display: block; font-family: "IBM Plex Sans", system-ui, sans-serif; background: #EFEDE4; padding: 34px; }
    .card { background: #FBFAF5; border-radius: 20px; padding: 22px 24px 12px;
      box-shadow: 0 1px 2px rgba(20,22,28,.04), 0 18px 46px -30px rgba(20,22,28,.4); }
    .card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
    .card-head h2 { font-size: 1.25rem; font-weight: 700; margin: 0; }
    .lattice {
      --lattice-background: transparent;
      --lattice-border-color: #EDEAE0;
      --lattice-header-foreground: #8C8A80;
      --lattice-accent: #F0A94C;
      --lattice-variant-success-fill: #DEF7EC; --lattice-variant-success-text: #036C4F;
      --lattice-variant-info-fill: #E1EFFE;    --lattice-variant-info-text: #1A56DB;
      --lattice-variant-accent-fill: #EDE9FE;  --lattice-variant-accent-text: #6D28D9;
      --lattice-variant-warning-fill: #FEF0DC; --lattice-variant-warning-text: #92400E;
    }
    .lattice .lat-header-cell, .lattice .lat-cell { border-right: 0; }
    .lattice [data-variant="amber"] .lat-progress-track {
      background-image: repeating-linear-gradient(-45deg, #E7EBF3 0 4px, #F4F6FA 4px 8px);
      background-color: #F4F6FA; border-radius: 999px; height: 12px;
    }
    .lattice [data-variant="amber"] .lat-progress-fill { background: #F5B863; border-radius: 999px; }
    .lattice .btn { font: inherit; font-size: .82rem; font-weight: 600; border-radius: 999px; padding: 7px 14px; cursor: pointer; margin-right: 8px; }
    .lattice .btn--primary { background: #F5B863; color: #4A3410; border: 0; }
    .lattice .btn--ghost { background: transparent; color: #17181C; border: 1px solid #E2DFD2; }
  `],
  template:
    '<div class="card">' +
    '  <div class="card-head"><h2>Recent Candidates</h2></div>' +
    '  <lattice-grid [config]="grid"></lattice-grid>' +
    '</div>',
})
export class AppComponent {
  grid = {
    rowKey: 'id',
    density: 'spacious',
    showColumnFunctions: false,
    autoHeight: true,
    columns,
    rows: candidates,
  };
}

bootstrapApplication(AppComponent);