hummingbird-me/kitsu-web

<div class="modal-wrapper">
  <h4 class="edit-heading">
    {{t "users.edit-modal.about.header"}}
  </h4>

  {{! location }}
  <div class="form-group row">
    <label for="location-input" class="col-xs-2 col-form-label">
      {{t "users.edit-modal.about.location.label"}}
    </label>
    <div class="col-xs-10">
      {{one-way-text user.location
        update=(action (mut user.location))
        id="location-input"
        class="form-control"
        placeholder=(t "users.edit-modal.about.location.placeholder")
      }}
    </div>
  </div>

  {{! birthday }}
  <div class="form-group row">
    <label for="birthday-input" class="col-xs-2 col-form-label">
      {{t "users.edit-modal.about.birthday"}}
    </label>
    <div class="col-xs-10">
      {{pikaday-input
        value=user.birthday
        onSelection=(action (mut user.birthday))
        useUTC=true
        id="birthday-input"
        class="form-control"
        format="DD/MM/YYYY"
        yearRange="1900,currentYear"
        placeholder=(t "date-format")
        options=(hash maxDate=(now))
      }}
    </div>
  </div>

  {{! gender }}
  <div class="form-group row">
    <label for="gender-input" class="col-xs-2 col-form-label">
      {{t "users.edit-modal.about.gender.label"}}
    </label>
    <div class="col-xs-10">
      {{#power-select
        class="form-control"
        renderInPlace=true
        searchEnabled=false
        selected=selectedGender
        options=genderOptions
        onchange=(action "updateGender") as |option|
      }}
        {{option}}
      {{/power-select}}

      {{#if (eq selectedGender (get this 'genderOptions.lastObject'))}}
        {{one-way-text (capitalize user.gender)
          update=(action (mut user.gender))
          class="form-control form-toggle-field"
          placeholder=(t "users.edit-modal.about.gender.options.custom")
        }}
      {{/if}}
    </div>
  </div>

  {{! waifu }}
  <div class="form-group row">
    <label for="waifu-search" class="col-xs-2 col-form-label">
      {{t "users.edit-modal.about.waifu.label"}}
    </label>
    <div class="col-xs-4">
      {{#power-select
        renderInPlace=true
        searchEnabled=false
        selected=user.waifuOrHusbando
        options=(array "Waifu" "Husbando")
        placeholder=(t "users.edit-modal.about.waifu.placeholder")
        onchange=(action (mut user.waifuOrHusbando)) as |option|}}
        <span>{{option}}</span>
      {{/power-select}}
    </div>
    <div class="col-xs-6">
      {{#power-select
        search=(perform searchCharacters)
        selected=user.waifu
        onchange=(action "setWaifu")
        renderInPlace=true
        placeholder=(t "users.edit-modal.about.waifu.search")
        as |character|
      }}
        <span class="waifu-wrapper">
          <img src={{image character.image}}>
        </span>
        <span class="waifu-name">{{or character.name character.canonicalName}}</span>
      {{/power-select}}

      {{#if user.waifu}}
        <a href="#" class="pull-sm-right" {{action (action (queue (action (mut user.waifu) null) (action (mut user.waifuDirtyHack) true)))}}>
          {{t "users.edit-modal.about.waifu.divorce"}}
        </a>
      {{/if}}
    </div>
  </div>

  {{! bio }}
  <div class="form-group row">
    <label for="bio-input" class="col-xs-2 col-form-label">
      {{t "users.edit-modal.about.bio.label"}}
    </label>
    <div class="col-xs-10">
      {{expanding-textarea user.about
        update=(action (mut user.about))
        name="about"
        id="bio-input"
        class="about"
        placeholder=(t "users.edit-modal.about.bio.placeholder")
        rows="2"
      }}
    </div>
  </div>
</div>