MarseyWorld/files/templates/modals/gif.html

<div class="modal fade" id="gifModal" tabindex="-1" role="dialog">
	<div class="modal-dialog modal-dialog-scrollable modal-dialog-centered p-5" style="max-width:100% !important" role="document">
		<div class="modal-content">
			<div class="modal-header border-bottom-0 shadow-md p-3">
				<div class="form-group d-flex align-items-center w-100 mb-0">
					<div id="gifs-back-btn"><button class="btn btn-link mx-2" id="gifs-back-btn"><i class="fas fa-long-arrow-left text-muted"></i></button></div>
					<input autocomplete="off" type="text" class="form-control" id="gifSearch" placeholder="Search and press enter" data-nonce="{{g.nonce}}" data-onchange="searchGifs()">
					<div id="gifs-cancel-btn"><button class="btn btn-link mx-2" id="gifs-cancel-btn"><i class="fas fa-times text-muted"></i></button></div>
				</div>
			</div>
			<div style="overflow-y: auto;">
				<div class="modal-body p-0" id="gif-modal-body">

					<div id="no-gifs-found">
					</div>

					<div class="gif-categories pt-3 px-3 pb-0" id="GIFs" style="text-align:center">
					</div>

					<div id="gifs-load-more">
					</div>

				</div>
			</div>
		</div>
	</div>
</div>

<script defer src="{{'js/gif_modal.js' | asset}}"></script>