
{% load i18n %}

<div class="modal fade bs-example-modal-sm" style="color:black;"  id="successModal" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <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>
            </div>
            <div class="modal-body">
              <div class="modal-icon"><i class="checkmark" aria-hidden="true"></i></div>
              <h4 class="modal-title">{% trans "Request Sent" %}</h4>
              <p class="modal-text">{% trans "Thank you for your subscription! You will receive a confirmation mail from our team" %}</p>
            </div>
        </div><!-- /.modal-content -->
    </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>