<div class="modal fade" id="directMessageModal" tabindex="-1" role="dialog" aria-labelledby="directMessageModalTitle" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered mx-auto max-w-xl" role="document">
		<div class="modal-content mx-auto max-w-xl bg-gray-100 rounded-md shadow-lg">
			<div class="modal-header">
				<h5 class="font-bold text-xl text-black font-heading leading-normal">Send message to @{{u.username}}</h5>
				<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
					<span aria-hidden="true"><i class="far fa-times"></i></span>
				</button>
			</div>
			<div class="modal-body">
				<form id="message" action="/@{{u.username}}/message" method="post" enctype="multipart/form-data">
					<input type="hidden" name="formkey" value="{{v.formkey}}"> 
					<div class="relative rounded-lg border border-gray-300 bg-gray-100 shadow-inner w-full"> 
						<textarea maxlength="1000" id="input-message" name="message" form="message" class="w-full rounded-t-md p-3 bg-transparent focus:bg-white shadow-inner resize-y focus:outline-none" aria-label="With textarea" placeholder="Write your message..." rows="3"></textarea>
						<ul class="-mt-1 flex space-x-4 px-3 py-2 border-t border-dashed border-gray-400 mb-0">
							<li>
								<button type="button" class="text-gray-400 hover:text-gray-500" onclick="makeBold('input-message')">
									<i class="fas fa-bold fa-fw fa-sm" data-bs-toggle="tooltip" data-bs-placement="bottom"  title="" data-bs-original-title="Bold"></i>
								</button>
							</li>
							<li>
								<button type="button" class="text-gray-400 hover:text-gray-500" onclick="makeItalics('input-message')">
									<i class="fas fa-italic fa-fw fa-sm" data-bs-toggle="tooltip" data-bs-placement="bottom"  title="" data-bs-original-title="Italicize"></i>
								</button>
							</li>
							<li>
								<button type="button" class="text-gray-400 hover:text-gray-500" onclick="makeQuote('input-message')">
									<i class="fas fa-quote-right fa-fw fa-sm" data-bs-toggle="tooltip" data-bs-placement="bottom"  title="" data-bs-original-title="Quote"></i>
								</button>
							</li>
						</ul>
					</div>
				</form>
			</div>
			<div class="flex justify-end space-x-2 border-t border-gray-300 p-4">
				<button type="button" class="px-4 py-2 text-sm font-bold text-gray-500 hover:text-gray-700" data-bs-dismiss="modal">
					Cancel
				</button>
				<button type="submit" form="message" class="block px-4 py-2 bg-gradient-to-t from-red-700 to-red-600 hover:from-red-600 hover:to-red-700 active:shadow-inner border border-red-900 rounded-md text-shadow-t shadow-inset-t-white-10 text-sm font-bold text-gray-100 focus:text-gray-400 focus:outline-none">
					Send message
				</button>
			</div>
		</div>
	</div>
</div>