{@args heading: String, token: String, cs: Changeset, action: String, cats: [OpinionhubCategory], back: String}
{@import opinionhub/opinionhub_categories}
<section class="opinionhub-form-page">
<h1>{heading}</h1>
{if not (changeset_valid cs)}
<p role="alert">Please correct the fields marked below.</p>
{end}
<form method="post" action={action} class="opinionhub-form">
  <input type="hidden" name="_csrf_token" value={token}>
  <div>
    <label for="opinionhub_category">Category</label>
    <select id="opinionhub_category" name="category" aria-describedby="opinionhub_category-errors">
      {for c: OpinionhubCategory in cats}
      {if (opinionhub_category_slug c) == (field_value cs "category")}
      <option value={opinionhub_category_slug c} selected>{opinionhub_category_name c}</option>
      {else}
      <option value={opinionhub_category_slug c}>{opinionhub_category_name c}</option>
      {end}
      {end}
    </select>
    <ul id="opinionhub_category-errors" class="opinionhub-errors">
      {for e: String in field_errors cs "category"}
      <li>{html translated e}</li>
      {end}
    </ul>
  </div>
  <div>
    <label for="opinionhub_title">Title</label>
    <input id="opinionhub_title" name="title" type="text" required maxlength="150" value={field_value cs "title"} aria-invalid={field_invalid cs "title"} aria-describedby="opinionhub_title-errors">
    <ul id="opinionhub_title-errors" class="opinionhub-errors">
      {for e: String in field_errors cs "title"}
      <li>{html translated e}</li>
      {end}
    </ul>
  </div>
  <div>
    <label for="opinionhub_body">What would you like to say?</label>
    <textarea id="opinionhub_body" name="body" rows="12" required maxlength="20000" aria-invalid={field_invalid cs "body"} aria-describedby="opinionhub_body-help opinionhub_body-errors">{field_value cs "body"}</textarea>
    <p id="opinionhub_body-help">Markdown works: *emphasis*, **strong**, `code`, lists, quotes with > and code blocks between ```; ```ridgun colours Ridgun.</p>
    <ul id="opinionhub_body-errors" class="opinionhub-errors">
      {for e: String in field_errors cs "body"}
      <li>{html translated e}</li>
      {end}
    </ul>
  </div>
  <div class="opinionhub-check">
    {if field_checked cs "private"}
    <input id="opinionhub_private" name="private" type="checkbox" value="on" checked>
    {else}
    <input id="opinionhub_private" name="private" type="checkbox" value="on">
    {end}
    <label for="opinionhub_private">Only signed-in members can read this topic</label>
  </div>
  <p class="opinionhub-form-actions"><button type="submit" class="opinionhub-button">Open topic</button> <a href={back}>Cancel</a></p>
</form>
</section>