{% load i18n %}

<div class="modal fade bs-example-modal-sm" style="color:black;"  id="successModal" tabindex="-1" role="dialog">
    <div class="vertical-alignment-helper">
        <div class="modal-dialog vertical-align-center">
			<div class="modal-content">
			  <div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title">{% trans "Request Sent" %}</h4>
			  </div>
			  <div class="modal-body">
				<p>{% trans "Thank you for your subscription! You will receive a confirmation mail from our team" %}</p>
			  </div>
			</div><!-- /.modal-content -->
		</div>
	</div>
</div><!-- /.modal -->
<script>
	// Show modal
	$('#successModal').modal('show');
	// close the modal after 3 seconds
	setTimeout(function() {
	    $('#successModal').modal('hide');
	}, 5000);	
</script>
<style>
.vertical-alignment-helper {
    display:table;
    height: 100%;
    width: 100%;
    pointer-events:none; /* This makes sure that we can still click outside of the modal to close it */
}
.vertical-align-center {
    /* To center vertically */
    display: table-cell;
    vertical-align: middle;
    pointer-events:none;
}
.modal-content {
    /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
    width:inherit;
    height:inherit;
    /* To center horizontally */
    margin: 0 auto;
    pointer-events: all;
}
</style>