<div class="app-card-title mb-4"> 
   <anglo-title-component title = "Buttons"></anglo-title-component>
</div>
<div class="app-card button-wrapper">	
	<div class="mb-4">
		<mat-card>
			<div class="card-title p-2">
				<h3>{{'Flat Buttons'|translate}}</h3>
			</div>
			<div class="app-card-content p-2">
				<p>A-button is an HTML button or a tag enhanced with styling and animation to match the Material Design button spec.</p>
				<button mat-flat-button class="m-2">NORMAL</button>
				<button mat-flat-button class="m-2" color="primary">PRIMARY</button>
				<button mat-flat-button class="m-2" color="accent">ACCENT</button>
				<button mat-flat-button class="m-2" color="accent">SECONDARY</button>
				<button mat-flat-button class="m-2" color="warn">WARNING</button>
				<button mat-flat-button class="m-2" color="warn">ERROR</button>
				<button mat-flat-button class="m-2" color="warn">INFO</button>
				<button mat-flat-button class="m-2" color="warn">SUCCESS</button>
				<button mat-flat-button class="m-2" disabled>DISABLED</button>
			</div>	
		</mat-card>
	</div>
	<div class="mb-4">
		<mat-card>
			<div class="card-title p-2">
				<h3>{{'Basic Buttons'|translate}}</h3>
			</div>
			<div class="app-card-content p-2">
				<p>A-button is an HTML button or a tag enhanced with styling and animation to match the Material Design button spec.</p>
				<button mat-button class="m-2">NORMAL</button>
				<button mat-button class="m-2" color="primary">PRIMARY</button>
				<button mat-button class="m-2" color="accent">ACCENT</button>
				<button mat-button class="m-2" color="accent">SECONDARY</button>
				<button mat-button class="m-2" color="warn">WARNING</button>
				<button mat-button class="m-2" color="warn">ERROR</button>
				<button mat-button class="m-2" color="warn">INFO</button>
				<button mat-button class="m-2" color="warn">SUCCESS</button>
				<button mat-button class="m-2" disabled>DISABLED</button>
			</div>	
		</mat-card>
	</div>
	<div class="mb-4">
		<mat-card>
			<div class="card-title p-2">
				<h3>{{'Raised Button'|translate}}</h3>
			</div>
			<div class="app-card-content p-2">
				<p>A-button is an HTML button or a tag enhanced with styling and for <code>color="primary"</code>Applies specified color to the control</p>
				<button mat-raised-button class="m-2">NORMAL</button>
				<button mat-raised-button class="m-2" color="primary">PRIMARY</button>
				<button mat-raised-button class="m-2" color="accent">ACCENT</button>
				<button mat-raised-button class="m-2" color="accent">SECONDARY</button>
				<button mat-raised-button class="m-2" color="warn">WARN</button>
				<button mat-raised-button class="m-2" color="warn">ERROR</button>
				<button mat-raised-button class="m-2" color="warn">INFO</button>
				<button mat-raised-button class="m-2" color="warn">SUCCESS</button>
				<button mat-raised-button class="m-2" disabled>DISABLED</button>
			</div>
		</mat-card>
	</div>
	<div class="mb-4">
		<mat-card>
			<div class="card-title p-2">
				<h3>{{'Icon'|translate}}</h3>
			</div>
			<div class="app-card-content p-2">
				<p>Icons can be used for the primary content of a button.</p>
				<p class="title font-bold">Normal</p>
				<button mat-icon-button class="m-2"><mat-icon>favorite</mat-icon></button>
				<button mat-icon-button class="m-2" color="primary"><mat-icon>star_rate</mat-icon></button>
				<button mat-icon-button class="m-2" color="accent"><mat-icon >refresh</mat-icon></button>
				<button mat-icon-button class="m-2" color="warn"><mat-icon >thumb_up</mat-icon></button>
				<p class="title font-bold">Disabled</p>
				<button mat-icon-button class="m-2" disabled><mat-icon>favorite</mat-icon></button>
				<button  mat-icon-button class="m-2" disabled><mat-icon>star_rate</mat-icon></button>
				<button  mat-icon-button class="m-2" disabled><mat-icon >refresh</mat-icon></button>
				<button  mat-icon-button class="m-2" disabled><mat-icon >thumb_up</mat-icon></button>
			</div>
		</mat-card>
	</div>
	<div class="mb-4">
		<mat-card>
			<div class="card-title p-2">
				<h3>{{'Fab Button'|translate}}</h3>
			</div>
			<div class="app-card-content p-2">
				<p>mat-fab is an HTML button or a tag enhanced with styling and for color="primary" Applies specified color to the control</p>
				<button mat-fab class="m-2">Basic</button>
				<button mat-fab class="m-2" color="primary">Primary</button>
				<button mat-fab class="m-2" color="accent">Accent</button>
				<button mat-fab class="m-2" color="warn">Warn</button>
				<button mat-fab class="m-2" disabled>Disabled</button>
			</div>
		</mat-card>
	</div>
	<div class="mb-4">
		<mat-card>
			<div class="card-title p-2">
				<h3>{{'Mini Fab Buttons'|translate}}</h3>
			</div>
			<div class="app-card-content p-2">
				<p>Mini Fab Buttons buttons are round and usually contain an icon.</p>
				<button mat-mini-fab class="m-2">btn-1</button>
				<button mat-mini-fab class="m-2" color="primary">btn-2</button>
				<button mat-mini-fab class="m-2" color="accent">btn-3</button>
				<button mat-mini-fab class="m-2" color="warn">btn-4</button>
				<button mat-mini-fab class="m-2" disabled>btn-5</button>
			</div>
		</mat-card>
	</div>
</div>	


