MarseyWorld/drama/templates/flag_post_modal.html

<!-- Report Post Modal -->
<div class="modal fade" id="reportPostModal" tabindex="-1" role="dialog" aria-labelledby="reportPostModalTitle" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">Report <span id="post-author"></span>'s post</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true"><i class="far fa-times"></i></span>
				</button>
			</div>
			<!-- Before report is made, show this -->
			<div class="" id="reportPostFormBefore">
				<form id="report-post-form" method="post">
					<div class="modal-body">
						<div class="h6">We're sorry something here is wrong.</div>
						<small class="form-text text-muted">Please enter a reason for flagging below.</small>
						<pre></pre>
						<input name="reason" type="text" maxlength="100" id="reason" class="form-control"/>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-link text-muted" data-dismiss="modal">Cancel</button>
						<button type="button" id="reportPostButton" class="btn btn-danger">Report post</button>
					</div>
				</form>
			</div>
			<!-- After report is made, show this -->
			<div class="d-none" id="reportPostFormAfter">
				<div class="modal-body">
					<div class="h6">Thank you for reporting this post!</div>
					<small class="form-text text-muted">We'll take it from here.</small>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
				</div>
			</div>
		</div>
	</div>
</div>