<div class="container-divider"></div>
<div class="container">
  <div class="sub-nav">
    {{breadcrumbs}}
    <div class="search-container">
      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12" class="search-icon" aria-hidden="true">
        <circle cx="4.5" cy="4.5" r="4" fill="none" stroke="currentColor"/>
        <path stroke="currentColor" stroke-linecap="round" d="M11 11L7.5 7.5"/>
      </svg>
      {{search submit=false}}
    </div>
  </div>

  <h1 class="form-header">
    {{t 'what_is_your_post_about'}}
  </h1>

  <div id="main-content" class="form">
    {{#form 'post' class='new_community_post hbs-form'}}
      <div class="form-field">
        {{#required 'title'}}
          {{label 'title'}}
        {{else}}
          {{#label 'title'}}
            {{t 'title_label'}}<span class="optional">({{t 'optional'}})</span>
          {{/label}}
        {{/required}}
        {{input 'title' autofocus=true aria-describedby='title-error-notification'}}
        {{#validate 'title'}}
          <div id="title-error-notification" class="notification notification-error notification-inline">
            {{error 'title'}}
          </div>
        {{/validate}}
      </div>

      {{suggestion_list class='suggestion-list'}}

      <div class="form-field">
        {{#required 'details'}}
          {{label 'details'}}
        {{else}}
          {{#label 'details'}}
            {{t 'details_label'}}<span class="optional">({{t 'optional'}})</span>
          {{/label}}
        {{/required}}
        {{wysiwyg 'details' aria-describedby="details-error-notification"}}
        {{#validate 'details'}}
          <div id="details-error-notification" class="notification notification-error notification-inline">
            {{error 'details'}}
          </div>
        {{/validate}}
      </div>

      <div class="form-field">
        {{#required 'topic'}}
          {{label 'topic'}}
        {{else}}
          {{#label 'topic'}}
            {{t 'topic_label'}}<span class="optional">({{t 'optional'}})</span>
          {{/label}}
        {{/required}}
        {{select 'topic' aria-describedby="topic-error-notification"}}
        {{#validate 'topic'}}
          <div id="topic-error-notification" class="notification notification-error notification-inline">
            {{error 'topic'}}
          </div>
        {{/validate}}
      </div>

      <div class="form-field">
        {{#required 'content_tags'}}
          {{label 'content_tags'}}
        {{else}}
          {{#label 'content_tags'}}
            {{t 'content_tags_label'}}<span class="optional">({{t 'optional'}})</span>
          {{/label}}
        {{/required}}
        <span class="content-tags-add-hint">{{t 'content_tags_description'}}</span>
        {{multiselect 'content_tags' aria-describedby='content-tags-error-notification'}}
        {{#validate 'content_tags'}}
          <div id="content-tags-error-notification" class="notification notification-error notification-inline">
            {{error 'content_tags'}}
          </div>
        {{/validate}}
      </div>

      <footer>{{input type='submit'}}</footer>
    {{/form}}
  </div>
</div>
