<div class="m-2 m-lg-4">
    <div class="col-12 mx-5 col-sm-10 col-lg-8 mx-auto p-4 rounded shadow-sm context-main-bg">
		<nav aria-label="breadcrumb">
			<ol class="breadcrumb">
				<li class="breadcrumb-item">
					<a href="{ROOT_URL}messages" class="text-decoration-none">
						Messages
					</a>
				</li>
				<li class="breadcrumb-item active" aria-current="page">
					Create
				</li>
			</ol>
		</nav>
        <div class="row justify-content-center">
            <div class="col-md-6 col-lg-6">
                <form method="post" class="needs-validation">
                    <legend class="mb-3">New Message</legend>
                    <fieldset>
                        <!-- To User Field -->
                        <div class="mb-3 row">
                            <label for="toUser" class="col-sm-6 col-form-label">To:</label>
                            <div class="col-sm-6">
                                <input 
                                    type="text" 
                                    class="form-control" 
                                    name="toUser" 
                                    id="toUser" 
                                    value="{prepopuser}" 
                                    required>
                            </div>
                        </div>
        
                        <!-- Subject Field -->
                        <div class="mb-3 row">
                            <label for="subject" class="col-sm-6 col-form-label">Subject:</label>
                            <div class="col-sm-6">
                                <input 
                                    type="text" 
                                    class="form-control" 
                                    name="subject" 
                                    id="subject" 
                                    required>
                            </div>
                        </div>
        
                        <!-- Message Field -->
                        <div class="mb-3">
                            <label for="message" class="form-label">Message:</label>
                            <textarea 
                                class="form-control" 
                                name="message" 
                                id="message" 
                                rows="6" 
                                maxlength="2000" 
                                required></textarea>
                        </div>
                    </fieldset>
                    <input type="hidden" name="token" value="{TOKEN}">
                    <div class="text-center text-md-start">
                        <button 
                            type="submit" 
                            name="submit" 
                            value="submit" 
                            class="btn btn-primary btn-lg">
                            Send
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>