hummingbird-me/kitsu-web

<div class="container">
  <div class="row settings-wrapper">
    <div class="group-create-wrapper">
      <div class="card">
        {{! 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 group.tagline
              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}}

        {{! Description }}
        {{#groups/group-form-field id="form-about" onHover=(action (mut hoveredField) "about")}}
          <span class="field-title">{{t "groups.create.form.about"}}</span>
          <div class="field-input-wrapper">
            {{expanding-textarea group.about
              update=(action (mut group.about))
              class="form-control"
            }}
          </div>
          <hr class="ruler">
        {{/groups/group-form-field}}

        {{! Rules }}
        {{#groups/group-form-field id="form-rules" onHover=(action (mut hoveredField) "rules")}}
          <span class="field-title">{{t "groups.create.form.rules"}}</span>
          <div class="field-input-wrapper">
            {{expanding-textarea group.rules
              update=(action (mut group.rules))
              class="form-control"
            }}
          </div>
          <hr class="ruler">
        {{/groups/group-form-field}}


        {{! Neighbors }}
        {{#groups/group-form-field id="form-neighbors" onHover=(action (mut hoveredField) "neighbors")}}
          <span class="field-title">{{t "groups.create.form.neighbors"}}</span>
          <div class="field-input-wrapper">
            {{#power-select
              search=(perform searchGroupsTask)
              onchange=(action "addNeighbor")
              disabled=neighborsDisabled
              placeholder=(t "groups.create.form.neighbors-placeholder")
              as |group|
            }}
              <strong>{{group.name}}</strong>
            {{/power-select}}

            {{groups/group-neighbors
              group=group
              addedNeighbors=addedNeighbors
              canRemove=true
              onRemove=(action "removeNeighbor")
              onLoad=(action (mut savedNeighbors))}}
          </div>
          <hr class="ruler">
        {{/groups/group-form-field}}

        {{! 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}}

        {{! Avatar }}
        {{#groups/group-form-field id="form-avatar" onHover=(action (mut hoveredField) "avatar")}}
          <span class="field-title">{{t "groups.create.form.avatar"}}</span>
          <div class="field-input-wrapper avatar-upload">
            {{image-form
              image=group.avatar
              aspectRatio=1
              update=(action (mut group.avatar))}}
          </div>
        {{/groups/group-form-field}}

        {{! Cover Photo }}
        {{#groups/group-form-field id="form-cover" onHover=(action (mut hoveredField) "cover")}}
          <span class="field-title">{{t "groups.create.form.cover"}}</span>
          <div class="field-input-wrapper">
            {{image-form
              image=group.coverImage
              aspectRatio=4.2
              update=(action (mut group.coverImage))}}
          </div>
        {{/groups/group-form-field}}


        <div class="form-group clearfix">
          {{#if errorMessage}}
            <div class="alert alert-danger">
              <p>{{errorMessage}}</p>
            </div>
          {{/if}}
          <button class="button button--primary group-create-cta" disabled={{unless isValid "disabled"}} onclick={{perform saveRecordsTask}}>
            {{#if saveRecordsTask.isRunning}}
              {{loading-spinner size="small"}}
            {{else}}
              {{t "groups.create.form.save-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>
  </div>
</div>