frontend/marko/page/data/components/add-character-modal/index.marko

<modal class="modal color-text nolabel" key="modal" enabled=(input.enabled) closable on-close("close") on-open("open") >
  <h1>Add Character</h1>

  <p class="color-error">${state.error}</p>
  
  <label>Full Name</label>
  <input key="name" autofocus placeholder="" class="big" on-change("change", "name") value=state.values.name />
  
  <label>IRC Nick</label>
  <input key="nick" placeholder="" on-change("change", "nick") value=state.values.nick />
  
  <label>Short Name</label>
  <input key="shortName" placeholder="(Optional)" on-change("change", "shortName") value=state.values.shortName />
  
  <if-permitted user=input.user permission="character.add">
    <label>Author</label>
    <input key="author" placeholder=(input.user.name) on-change("change", "author") value=state.values.author />
  </if-permitted>

  <label>Description</label>
  <textarea key="description" placeholder="Description" on-change("change", "description") value=state.values.description />

  <button disabled=state.loading on-click("save")>Save</button>

  <h2>Unknown Nicks</h2>
  <p>After you're done adding the one you're here for, why not take a look at the unknown nicks discovered in the last log character updates?</p>
  <p>Clicking one will change the nick in the form above, and add a guess for what the full name is.</p>
  <if-permitted not user=input.user permission="character.add">
    <p class="color-danger">You don't have permission to set a different author on characters, so only add your own.</p>
  </if-permitted>
  <unknown-nick-list on-select("selectUnknown") />
</modal>