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

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

  <p class="color-error">${state.error}</p>
  
  <label>Add Nick</label>
  <div class="add-nick-row">
    <input key="newNick" placeholder="New_Nick" class="big" on-change("change", "newNick") value=state.values.newNick />
    <button disabled=state.loading on-click("addNick")>Add</button>
  </div>
  
  <label>Current Nicks</label>
  <div for(nick in input.character.nicks) class="existing-nick-row" key=nick >
    <div class="content color-text">${nick}</div>
    <button disabled=state.loading on-click("removeNick", nick)>Remove</button>
  </div>

  <h2>Unknown Nicks</h2>
  <p>These are the 100 most common nicks in the logs, maybe one of these belongs to <strong>${input.character.name}</strong>?</p>
  <unknown-nick-list key="un-list" on-select("selectUnknown") />
</modal>