<div class="modal confirm -with-overlay -nav-padded js-modal js-modal-exit js-confirm-cancel" data-status="" data-modal="confirm">
    <div class="modal-inner inner">
        <div class="modal-panel">
            <div class="modal-header">
                <button type="button" class="btn btn-default btn-modal-exit js-modal-exit js-confirm-cancel svg-wrap" aria-label="Exit Modal">
					<span class="fa fa-times"></span>
				</button>
                <h3 class="modal-title">
                    <span class="text">Notice</span>
                </h3>
            </div>
            <div class="modal-section confirm-content">
                <div class="confirm-icon">
                    <i aria-hidden="true" class="fa fa-"></i>
                </div>
                <h3 class="confirm-heading"></h3>
                <div class="button-group">
                    <button class="btn btn-default btn-confirm-submit js-confirm-submit js-modal-exit" type="button">
						<span class="text"></span>
					</button>
                    <button class="btn btn-default js-modal-exit" type="button">
						<span class="text">Cancel</span>
					</button>
                </div>
            </div>
        </div>
    </div>
</div>
        
    
        <div class="modal confirm -with-overlay -nav-padded js-modal js-modal-exit js-confirm-cancel" data-status="{{confirmStatus}}" data-modal="confirm">
	<div class="modal-inner inner">
		<div class="modal-panel">
			<div class="modal-header">
				<button type="button" class="btn btn-default btn-modal-exit js-modal-exit js-confirm-cancel svg-wrap" aria-label="Exit Modal">
					<span class="fa fa-times"></span>
				</button>
				<h3 class="modal-title">
					<span class="text">Notice</span>
				</h3>
			</div>
			<div class="modal-section confirm-content">
				<div class="confirm-icon">
					<i aria-hidden="true" class="fa fa-{{confirmIcon}}"></i>
				</div>
				<h3 class="confirm-heading">{{{confirmHeading}}}</h3>
				{{#if confirmMessage}}
				<p class="confirm-body">{{{confirmMessage}}}</p>
				{{/if}}
				<div class="button-group">
					<button class="btn btn-default btn-confirm-submit js-confirm-submit{{#if confirmCustom }}-custom{{/if}} js-modal-exit" type="button">
						<span class="text">{{confirmButton}}</span>
					</button>
					<button class="btn btn-default js-modal-exit" type="button">
						<span class="text">Cancel</span>
					</button>
				</div>
			</div>
		</div>
	</div>
</div>
    
        
            
            /* No context defined for this component. */
            
        
    
                                .confirm {
	&.modal {
		.modal-inner {
			max-width: 125rem;
		}
	}
	&[data-status="warning"], &[data-status="danger"] {
		.modal-header {
			border-bottom-color: $color-irma-danger;
		}
		.confirm-icon, .btn-confirm-submit {
			background: $color-irma-danger;
		}
		.btn-confirm-submit {
			&:hover, &:focus {
				background: $color-irma-danger-dark;
			}
		}
	}
	&[data-status="good"], &[data-status="success"] {
		.modal-header {
			border-bottom-color: $color-irma-spearmint;
		}
		.confirm-icon, .btn-confirm-submit {
			background: $color-irma-spearmint;
		}
		.btn-confirm-submit {
			&:hover, &:focus {
				background: $color-irma-mint;
			}
		}
	}
	&[data-status="caution"] {
		.modal-header {
			border-bottom-color: $color-irma-goldenrod;
		}
		.confirm-icon, .btn-confirm-submit {
			background: $color-irma-goldenrod;
			color: $color-irma-navy;
		}
		.btn-confirm-submit {
			&:hover, &:focus {
				background: $color-irma-gold;
			}
		}
	}
	.confirm-content {
		text-align: center;
		.button-group {
			margin-top: 10rem;
			justify-content: center;
		}
	}
	.confirm-icon {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 15rem;
		height: 15rem;
		margin: 0 auto;
		border-radius: 50%;
		color: white;
		@include font-size-other(32px);
	}
	.confirm-heading {
		margin-top: 6rem;
	}
	.confirm-body {
		margin-top: 3rem;
	}
}
                            
                            
                        
                                /* 
 *	_confirm.js
 */
irma.confirm = (function () {
	'use strict';
	var createNew = function (options, callback) {
		$.get(irma.assetPath + '/templates/confirm/confirm.hbs?v=' + irma.templateVersion, function (template) {
			var templateScript = Handlebars.compile(template);
			var html = templateScript(options);
			$('.page-container').append(html);
			irma.modal.openModal('confirm');
			$('.js-confirm-submit-custom').on('click', function () {
				callback();
			});
		});
	};
	var confirm = function ($target, options) {
		$.get(irma.assetPath + '/templates/confirm/confirm.hbs?v=' + irma.templateVersion, function (template) {
			var templateScript = Handlebars.compile(template);
			var html = templateScript(options);
			$('.page-container').append(html);
			irma.modal.openModal('confirm');
			$('.confirm .js-confirm-submit').data('target', $target);
		});
	};
	var init = function () {
		$(document).on('click', '.js-confirm', function (e) {
			var $btn = $(this),
				data = $btn.data();
			if (!data.confirmed) {
				e.stopImmediatePropagation();
				e.preventDefault();
				confirm($btn, data);
			}
			else {
				$btn.data('confirmed', false);	
			}
		}).on('click', '.js-table-action', function (e) {
			var action = _.find(irma.confirmActions, { name: $(this).data().action });
			if (action) {
				var $btn = $(this);
				var data = _.merge(action, $(this).data());
				if (!data.confirmed) {
					e.stopImmediatePropagation();
					confirm($btn, data);
				}
				else {
					$btn.data('confirmed', false);	
				}
			}
		}).on('click', '.js-confirm-submit', function () {
			var $target = $(this).data().target;
			$target.data('confirmed', true)
				.trigger('click');
			$(this).closest('.confirm').remove();
		});
	};
	return {
		init: init,
		createNew: createNew
	};
}());
                            
                            
                        data-confirm-icon reference: https://fontawesome.com/v4.7.0/icons/
recommended: use icon “share-square-o” for form submission and “trash-o” for deletion
data-status options are “warning” and “good”