import { Component } from '@angular/core';

@Component({
	template: `
		<gui-grid [source]="users"
				  [columns]="columns"
				  [rowDetail]="rowDetail">
		</gui-grid>
	`
})
export class RowDetailComponent {

	users = users;

	columns: Array<GuiColumn> = [{
        header: 'Name',
        field: 'name'
    }, {
        header: 'Position',
        field: 'position'
    }, {
        header: 'Team',
        field: 'teamShort',
        width: 80
    }, {
        header: 'Training',
        field: 'training',
        type: GuiDataType.NUMBER,
        width: 100
    }, {
        header: 'Company',
        field: 'company'
    }];
			
	rowDetail: GuiRowDetail = {
		enabled: true,
		template: (item) => {
	
		return `
			<div class='user-detail'>
				<h1>${item.name}</h1>
	
				<img src='${item.avatar}' />
	
				<h2>${item.company}</h2>
				<h3>${item.position}</h3>
				<div><b>Team:</b> ${item.team.name}</div>
			</div>`;
		}
	 };
	
	
}

.user-detail {
	padding: 20px;
	min-width: 300px;
	font-family: Lato;
}

.user-detail img {
	height: 160px;
}

.user-detail div {
	display: block;
	margin-top: 16px;
	font-size: 16px;
}

.user-detail h1 {
	font-size: 2.0rem;
	font-weight: 500;

}

.user-detail h2 {
	font-size: 1.5rem;
	font-weight: 300;
	margin-top: 16px;
}

.user-detail h3 {
	font-size: 1.2rem;
	font-weight: 300;
	margin-top: 16px;
}

[
    {
        "id": "#1",
        "name": "Mark Ross",
        "company": "Genco Pura Olive Oil Company",
        "position": "Team Leader",
        "teamSort": "TI",
        "training": 13,
        "budget": -7000
    }, ...
]