<style>
	/* page-specific styling */
	.btn-block {margin-bottom: 10px;}
</style>

    <ol class="breadcrumb">
		<li><a href="#/">Dashboard</a></li>
		<li>UI Components</li>
		<li class="active">Alerts</li>
	</ol>


<div class="container-fluid" ng-controller="AlertsController">
  <tabset panel-tabs="true" panel-class="panel-transparent" heading="Alerts">
    <tab>
      <tab-heading><i class="ti ti-desktop"></i></tab-heading>
      	<p>Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages</p>
		<alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)"><span ng-bind-html="alert.msg | safe_html"></span></alert>
		<button class='btn btn-default' ng-click="addAlert()">Add Alert</button>
    </tab>
    <tab>
    	<tab-heading><i class="ti ti-settings"></i></tab-heading>
        <tabset>
        	<tab heading="HTML">
<pre class="prettyprint">
&lt;alert type="{{alert.type}}"&gt;&lt;span ng-bind-html="alert.msg | safe_html"></span>&lt;/alert&gt;
</pre>
			</tab>
        	<tab heading="JavaScript">
<pre class="prettyprint">
// in the controller
$scope.alert = { type: 'success', msg: '<strong>Well done!</strong> You successfully read this important alert message.' };
</pre>
        	</tab>
        </tabset>
		<alert type="success"><span ng-bind-html="'<strong>Well done!</strong> You successfully read this important alert message.' | safe_html"></span></alert>
    </tab>
  </tabset>

  <panel panel-class="panel-transparent" heading="Alert Blocks">
		<p>Alerts can contain more than a line of messege. They can be extended with to focus on a particular messege.</p>
		<alert type="success" ng-show="!hideAlert1">
			<h4>Well done!</h4>
			<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores in eveniet sapiente error fuga tenetur ex ea dignissimos voluptas ab molestiae eos totam quo dolorem maxime illo neque quia itaque.</p>
			<p><button class="btn btn-success" ng-click="$parent.$parent.hideAlert1=true">Okay</button></p>
		</alert>
		<alert type="info" ng-show="!hideAlert2">
			<h4>Heads up!</h4>
			<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores in eveniet sapiente error fuga tenetur ex ea dignissimos voluptas ab molestiae eos totam quo dolorem maxime illo neque quia itaque.</p>
			<p><button class="btn btn-primary" ng-click="$parent.$parent.hideAlert2=true">Alright</button></p>
		</alert>
		<alert type="warning" ng-show="!hideAlert3">
			<h4>Warning!</h4>
			<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores in eveniet sapiente error fuga tenetur ex ea dignissimos voluptas ab molestiae eos totam quo dolorem maxime illo neque quia itaque.</p>
			<p><button class="btn btn-warning" ng-click="$parent.$parent.hideAlert3=true">Do Something</button></p>
		</alert>
		<alert type="danger" ng-show="!hideAlert4">
			<h4>Oh Snap!</h4>
			<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores in eveniet sapiente error fuga tenetur ex ea dignissimos voluptas ab molestiae eos totam quo dolorem maxime illo neque quia itaque.</p>
			<p><button class="btn btn-danger" ng-click="$parent.$parent.hideAlert4=true">What To Do?</button></p>
		</alert>
  </panel>

</div> <!-- container-fluid -->
