frontend/marko/components/story-tag-options/index.marko

<div class="tag-options">
  <div class="field">
    <label>Tag Name</label>
    <input key="name" autofocus placeholder="Name" on-change("change", "name") value=state.values.name />
  </div>
  <div class="field">
    <label>Tag Kind</label>
    <select key="kind" placeholder="Kind" on-change("change", "kind") value=state.values.kind>
      <option value="Character" selected=(state.values.kind === "Character")>Character</option>
      <option value="Event" selected=(state.values.kind === "Event")>Event</option>
      <option value="Location" selected=(state.values.kind === "Location")>Location</option>
      <option value="Organization" selected=(state.values.kind === "Organization")>Organization</option>
      <option value="Series" selected=(state.values.kind === "Series")>Series</option>
    </select>
  </div>
  <div class="button-field">
    <button class="add-tag" disabled=(input.loading) on-click("add", state.values)>Add</button>
  </div>
  
  <div class="suggestion-list" if(state.suggestions.length > 0)>
    <div class="header color-menu">Suggestions:</div>
    <a for(tag in state.suggestions) on-click("applySuggestion", tag) class=["tag", "color-tag-" + tag.kind.toLowerCase()]>${tag.name}</a>
  </div>

  <div for(tag in (input.tags || [])) class="tag" key=(tag.kind+":"+tag.name)>
    <div class=("content color-tag-"+tag.kind.toLowerCase())>${tag.name}</div>
    <button on-click("emit", "remove", tag)>Remove</button>
  </div>
</div>