{{define "title"}}Compose a Message{{end}} {{define "content"}} <div class="container"> <section class="hero is-info is-bold"> <div class="hero-body"> <div class="container"> <h1 class="title"> Write to: {{.User.Username}} </h1> </div> </div> </section> <div class="block p-4"> <div class="columns is-centered"> <div class="column is-half"> <div class="card" style="width: 100%; max-width: 640px"> <header class="card-header has-background-link"> <p class="card-header-title has-text-light"> <span class="icon"><i class="fa fa-message"></i></span> Compose a Message </p> </header> <div class="card-content"> <div class="media block"> <div class="media-left"> <figure class="image is-64x64"> {{if .User.ProfilePhoto.ID}} <img src="{{PhotoURL .User.ProfilePhoto.CroppedFilename}}"> {{else}} <img src="/static/img/shy.png"> {{end}} </figure> </div> <div class="media-content"> <p class="title is-4">{{.NameOrUsername}}</p> <p class="subtitle is-6"> <span class="icon"><i class="fa fa-user"></i></span> <a href="/u/{{.User.Username}}" target="_blank">{{.User.Username}}</a> </p> </div> </div> <form action="/messages/compose" method="POST"> {{InputCSRF}} <input type="hidden" name="to" value="{{.User.Username}}"> <div class="field block"> <label for="message" class="label">Message</label> <textarea class="textarea" cols="80" rows="8" name="message" id="message" required placeholder="Message"></textarea> <p class="help"> Markdown formatting supported. </p> </div> <div class="field has-text-centered"> <button type="submit" class="button is-success"> Send Message </button> </div> </form> </div> </div> </div> </div> </div> </div> <script type="text/javascript"> window.addEventListener("DOMContentLoaded", (event) => { let $file = document.querySelector("#file"), $fileName = document.querySelector("#fileName"); $file.addEventListener("change", function() { let file = this.files[0]; $fileName.innerHTML = file.name; }); }); </script> {{end}}