<section class="content">
	<div class="content-block">
		<div class="block-header">
			<!-- breadcrumb -->
			<app-breadcrumb [title]="'Blank'" [items]="['Home','Settings']" [active_item]="'Items'">
			</app-breadcrumb>
		</div>
		<div class="row">
			<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
				<div class="card">
					<div class="body">
						<div id="mail-nav">
							<ul>
								<mat-form-field class="example-full-width right-content" *ngIf="selectedCount > 0">
									<mat-label>Move to category</mat-label>
									<mat-select [(ngModel)]="category"  (selectionChange)="onCategoryChange($event)">
										<mat-option *ngFor="let category of categories" [value]="category.id">
											{{category.name}}
										</mat-option>
									</mat-select>
								</mat-form-field>
							</ul>
							<ul class="" id="mail-folders">
								<li *ngFor="let category of categories" [class.active]="selectedCategory && selectedCategory.id == category.id">
									<a href="javascript:;" (click)="selectCategory(category)" title="{{category.name}}">{{category.name}}</a>
								</li>
							</ul>
							<ul *ngIf="categoryAddShow">
								<mat-form-field class="example-full-width">
									<mat-label>Code</mat-label>
									<input matInput [(ngModel)]="categoryAddName">
								</mat-form-field>
							</ul>
							<ul *ngIf="!categoryAddShow">

							</ul>
						</div>
					</div>
				</div>
			</div>
			<div class="col-xs-12 col-sm-12 col-md-9 col-lg-9">
				<mat-card class="card">
					<mat-card-header>
						<mat-card-title-group>
							<mat-card-title>
								Motions
							</mat-card-title>
							<mat-card-subtitle>
							</mat-card-subtitle>
						</mat-card-title-group>
						<div fxFlex></div>
					</mat-card-header>
					<mat-card-content>
						<div class="body table-responsive">
							<table class="table">
								<tbody>
									<tr *ngFor="let item of items">
										<td>
											<mat-checkbox [(ngModel)]="item.selected" (change)="onCheckboxChange(item)">
												{{item.model.name}}
											</mat-checkbox>
										</td>
										<td>
											<button class="btn-space" (click)="edit(item.model)" mat-raised-button color="primary">
												Edit
											</button>
										</td>
									</tr>
								</tbody>
							</table>
						</div>
					</mat-card-content>
				</mat-card>
			</div>
		</div>
	</div>
</section>
