hummingbird-me/kitsu-web

<div class="group-create-wrapper">
  <div class="group-create-header">
    <h3>{{t "groups.create.header"}}</h3>
  </div>
  <div class="card">
    {{! Group Name }}
    {{#groups/group-form-field id="form-name" onHover=(action (mut hoveredField) "name")}}
      <span class="field-title">{{t "groups.create.form.name"}}</span>
      <div class="field-input-wrapper">
        {{one-way-text
          update=(action (mut group.name))
          minlength=4
          maxlength=50
          class="form-control"
        }}
      </div>
      <span class="field-notice">{{t "groups.create.form.required"}}</span>
      <hr class="ruler">
    {{/groups/group-form-field}}

    {{! Group Tagline }}
    {{#groups/group-form-field id="form-tagline" onHover=(action (mut hoveredField) "tagline")}}
      <span class="field-title">{{t "groups.create.form.tagline"}}</span>
      <div class="field-input-wrapper">
        {{one-way-text
          update=(action (mut group.tagline))
          maxlength=60
          class="form-control"
        }}
      </div>
      <span class="field-notice">{{t "groups.create.form.required"}}</span>
      <hr class="ruler">
    {{/groups/group-form-field}}

    {{! Group Privacy }}
    {{#groups/group-form-field id="form-privacy" onHover=(action (mut hoveredField) "privacy")}}
      <span class="field-title">{{t "groups.create.form.privacy"}}</span>
      <div class="field-input-wrapper">
        <fieldset>
          <div class="radio-card-group">
            {{#each privacyOptions as |option|}}
              <div class="radio-card">
                {{one-way-radio
                  id=(concat "radio-" option)
                  value=group.privacy
                  option=option
                  update=(action (mut group.privacy))}}
                <label for="radio-{{option}}">
                  <span class="card-title">{{t (concat "groups.create.form.privacy-options." option)}}</span>
                  <ul class="card-desc">
                    {{t (concat "groups.create.form.privacy-features." option) htmlSafe=true}}
                  </ul>
                </label>
              </div>
            {{/each}}
          </div>
        </fieldset>
      </div>
      <hr class="ruler">
    {{/groups/group-form-field}}

    {{! Category }}
    {{#groups/group-form-field id="form-category" onHover=(action (mut hoveredField) "category")}}
      <span class="field-title">{{t "groups.create.form.category"}}</span>
      <div class="field-input-wrapper">
        {{#power-select
          selected=selectedCategory
          options=categories
          onchange=(action "selectCategory")
          renderInPlace=true
          searchEnabled=false
          placeholder=(t "groups.create.form.category-placeholder")
          triggerClass="form-control"
          as |category|
        }}
          <span class="icon">{{svg-jar category.slug}}</span>
          {{category.name}}
        {{/power-select}}
      </div>
      <hr class="ruler">
    {{/groups/group-form-field}}

    {{! Submit }}
    <div class="form-group clearfix">
      <button class="button button--primary group-create-cta" disabled={{unless isValid "disabled"}} {{action (route-action "createGroup")}}>
        {{#if isSaving}}
          {{loading-spinner size="small"}}
        {{else}}
          {{t "groups.create.form.create-btn"}}
        {{/if}}
      </button>
    </div>

    {{! Helper }}
    <div>
      {{#ember-tether
        target=(concat "#form-" hoveredField)
        attachment="bottom left"
        offset="0 -40px"
      }}
        <div class="group-create-helper">
          <div class="group-create-helper--title">{{t (concat "groups.create.form.helper." hoveredField ".header")}}</div>
          <span class="group-create-helper--description">
            <span>
              <p>{{t (concat "groups.create.form.helper." hoveredField ".desc")}}</p>
            </span>
          </span>
        </div>
      {{/ember-tether}}
    </div>
  </div>
</div>