{{> widgets/breadcrumb/breadcrumb}}

<div class="card mb-4">
	<div class="card-content">
		<div class="card-header justify-content-between d-flex">
			<h3 class="card-title"> {{ translation.modal }} </h3>
		</div>
		<div class="card-data">
			<p class="pb-4">Use a modal for dialog boxes, confirmation messages, or other content that can be called up. In order for the modal to work you have to add the Modal ID to the link of the trigger. To add a close button, just add the class .modal-close to your button.</p>
			<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
			<div id="modal1" class="modal">
				<div class="modal-content">
					<h2>Modal Header</h2>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
				</div>
				<div class="modal-footer">
					<a href="javascript:;" class="modal-close waves-effect waves-green btn error">Disagree</a>
					<a href="javascript:;" class="modal-close waves-effect waves-green btn primary">Agree</a>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="card mb-4">
	<div class="card-content">
		<div class="card-header justify-content-between d-flex">
			<h3 class="card-title"> {{ translation.modalsWithFixedFooter }} </h3>
		</div>
		<div class="card-data">
			<p class="pb-4">Use a modal for dialog boxes, confirmation messages, or other content that can be called up. In order for the modal to work you have to add the Modal ID to the link of the trigger. To add a close button, just add the class .modal-close to your button.</p>
			<a class="waves-effect waves-light btn modal-trigger" href="#modal2"> MODAL WITH FIXED FOOTER </a>
			<div id="modal2" class="modal modal-fixed-footer">
				<div class="modal-content">
					<h2>Modal Header</h2>
					<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla est velit, faucibus nec interdum id, aliquet at nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus pulvinar odio ac ipsum lacinia elementum. Nulla eleifend erat ac magna euismod, quis blandit enim finibus. Morbi nec velit eu eros ultricies elementum. Nulla suscipit tellus in erat cursus fringilla. Nam maximus purus in finibus sagittis. Suspendisse id mi accumsan, dignissim orci et, facilisis orci. Vestibulum quis arcu mi. Suspendisse porta eros lacus, sed euismod lacus feugiat id.Nullam varius, mauris ut rhoncus pellentesque, magna augue aliquet eros, vitae viverra sapien ipsum et sem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas quam erat, pellentesque nec felis sed, dapibus aliquam felis. Nam faucibus mattis gravida. Fusce nisi magna, cursus nec malesuada et, condimentum elementum ex. Aenean vehicula elit et lectus maximus, vitae dictum libero pharetra. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas ut nisl neque. In luctus, massa eget dapibus iaculis, lorem lectus vestibulum magna, at ultricies massa odio vel orci. Quisque ac elit ac eros mattis ultrices. Nam a tincidunt enim. Nulla facilisi. Donec luctus magna lacus, a scelerisque velit imperdiet et. Phasellus diam risus, dapibus et ornare sit amet, aliquet nec nisi. Sed nec eleifend nibh.</p>
					<p> Phasellus id gravida magna. In hac habitasse platea dictumst. Nam porttitor libero est, dapibus ornare orci interdum id. Curabitur blandit vitae orci sit amet lobortis. Vivamus vehicula suscipit justo nec pharetra. Aenean eu magna efficitur, elementum urna nec, tempus metus. Praesent blandit urna sed arcu facilisis, ut luctus erat pulvinar. Proin vehicula, nisl in posuere vestibulum, risus mi aliquam diam, in sodales odio justo id tortor. Vivamus iaculis nunc nisl. Nullam elementum est id arcu porttitor vulputate. Sed risus odio, commodo eget varius eget, venenatis eget elit. In maximus vestibulum ipsum, euismod tincidunt libero finibus non.Etiam id dui sit amet risus laoreet iaculis ac non nisl. Nullam sagittis aliquet lectus. Nullam fermentum egestas bibendum. Nullam sit amet nulla ornare, sagittis ipsum sit amet, imperdiet eros. Proin pretium vel massa ut fringilla. Aliquam mauris enim, imperdiet quis mauris non, placerat pharetra tortor. Mauris efficitur risus nec metus posuere, vel sollicitudin lorem ullamcorper. Maecenas egestas porttitor venenatis.</p>
					<p> Praesent iaculis placerat sem, ut volutpat ligula ornare a. Aliquam lacinia, felis sit amet sollicitudin dictum, leo orci tempor nunc, tincidunt dignissim neque tortor a nibh. Vestibulum at semper nisl. Nam sit amet laoreet urna, quis venenatis lorem. Cras sit amet pulvinar magna, vitae mollis felis. Morbi consequat at arcu ut sodales. Curabitur vel metus scelerisque, iaculis est vel, tincidunt eros. Praesent congue sed enim hendrerit commodo. Nunc sodales ligula massa, nec aliquet nulla aliquet non. In hac habitasse platea dictumst. Pellentesque mollis dapibus tortor, ut aliquam eros condimentum vel. Phasellus rhoncus augue vitae nibh tempor, a consectetur quam pretium. Suspendisse vestibulum arcu posuere faucibus fermentum. Donec molestie, magna ut rhoncus aliquet, dui eros porta ex, sed cursus ligula lacus vel tellus. Duis laoreet aliquam turpis eget pharetra. Aenean non aliquam orci. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque vel leo posuere, iaculis purus ac, finibus augue. Donec sed velit massa. Nam accumsan eleifend arcu, sed faucibus elit. Nulla porttitor ut ipsum sed malesuada. Vivamus dapibus aliquam quam ac finibus. Sed nec dignissim erat. Proin ac placerat libero. Nulla ut erat eu enim ultricies malesuada ut sed mi. Ut eleifend tellus vel ipsum vestibulum, non placerat leo tristique. Nam dolor lorem, rhoncus nec iaculis a, placerat vel augue. </p>
				</div>
				<div class="modal-footer">
					<a href="javascript:;" class="modal-close waves-effect waves-green btn error">Disagree</a>
					<a href="javascript:;" class="modal-close waves-effect waves-green btn primary">Agree</a>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="card mb-4">
	<div class="card-content">
		<div class="card-header justify-content-between d-flex">
			<h3 class="card-title"> {{ translation.bottomSheetModals }} </h3>
		</div>
		<div class="card-data">
			<p class="pb-4">Bottom Sheet Modals are good for displaying actions to the user on the bottom of a screen. They still act the same as regular modals.</p>
			<a class="waves-effect waves-light btn modal-trigger" href="#modal3">MODAL BOTTOM SHEET STYLE</a>
			<div id="modal3" class="modal bottom-sheet">
				<div class="modal-content">
					<h3 class="header mb-3">Modal Header</h3>
					<ul class="collection">
						<li class="collection-item avatar">
							<img src="/images/avatars/user-3.jpg" alt="" class="circle">
							<span class="title">Title</span>
							<p>First Line
								<br> Second Line
							</p>
							<a href="javascript:;" class="secondary-content">
	                  	<i class="material-icons">grade</i>
	                	</a>
						</li>
						<li class="collection-item avatar">
							<i class="material-icons circle">folder</i>
							<span class="title">Title</span>
							<p>First Line
								<br> Second Line
							</p>
							<a href="javascript:;" class="secondary-content">
	                  	<i class="material-icons">grade</i>
	                	</a>
						</li>
						<li class="collection-item avatar">
							<i class="material-icons circle green">assessment</i>
							<span class="title">Title</span>
							<p>First Line
								<br> Second Line
							</p>
							<a href="javascript:;" class="secondary-content">
	                  	<i class="material-icons">grade</i>
	                	</a>
						</li>
						<li class="collection-item avatar">
							<i class="material-icons circle red">play_arrow</i>
							<span class="title">Title</span>
							<p>First Line
								<br> Second Line
							</p>
							<a href="javascript:;" class="secondary-content">
	                  	<i class="material-icons">grade</i>
	                	</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>

{{#extend 'scripts'}}
<script type="text/javascript">
	$(document).ready(function() {
		$('.modal').modal();
	});

</script>
{{/extend}}
