hummingbird-me/kitsu-web

<div class="add-content-header" {{action "toggleExpand" }}>
  {{#if author}}
  {{! avatar }}
  <div style="display: inline-block; margin-right: 10px;">
    <img style="width: 36px; height: 36px; border-radius: 100%;" src={{image author.avatar "small" }}>
  </div>
  {{/if}}

  {{! placeholder/name }}
  <div style="display: inline-block; font-size: 16px; vertical-align: middle;">
    {{#if isExpanded}}
    <a href="#" class="author-name">{{author.name}}</a>
    {{else}}
    {{placeholder}}
    {{/if}}
  </div>
</div>

{{#if isExpanded}}
<div class="add-content-expanded">
  {{! uploads }}
  {{#file-dropzone name="uploads" as |dropzone uploadQueue|}}
  {{! editor }}
  {{expanding-textarea content
  update=(action (queue (action (mut content)) (action "processLinks")))
  keyEvents=(hash
  13=(action "createPost")
  )
  onpaste=(action "paste")
  autofocus=true
  maxlength=maxLength
  class="stream-content-editor"
  }}

  <div class="post-uploads">
    {{#if uploads}}
    {{#sortable-group direction="x" tagName="ul" class="uploads-list" onChange=(action "reorderUploads") as |group|}}
    {{#each uploads as |upload|}}
    {{#sortable-item model=upload group=group tagName="li" class="uploads-item"}}
    <img src={{upload.content.original}} />
    <div class="uploads-number">{{inc upload.uploadOrder}}</div>
    <a href="#" {{action "removeUpload" upload}}>{{svg-jar "cancel"}}</a>
    {{/sortable-item}}
    {{/each}}
    {{/sortable-group}}
    {{else if embedUrl}}
    <div class="embed-helper">
      <div class="embed-preview-action">
        {{t "feeds.embed.preview"}}
        <span class="hint--top hint--bounce hint--rounded" aria-label="Remove" {{action "removeEmbed" }}>
          {{svg-jar "close"}}
        </span>
      </div>
      {{#if previewEmbedTask.isRunning}}
      <div class="w-100 text-xs-center">
        {{loading-spinner size="small"}}
      </div>
      {{else}}
      {{#let (or previewEmbedTask.last.value post.embed) as |embed|}}
      {{stream-feed/items/post/embed embed=embed}}
      {{/let}}
      {{/if}}
    </div>
    {{/if}}

    {{#unless embedUrl}}
    {{#if dropzone.active}}
    <div class="add-uploads">
      {{#if dropzone.valid}}
      {{t "feeds.uploads.drop"}}
      {{else}}
      {{t "feeds.uploads.invalid"}}
      {{/if}}
    </div>
    {{else}}
    {{#if uploadQueue.files.length}}
    <div class="add-uploads">
      {{t "feeds.uploads.uploading" number=uploadCount progress=uploadQueue.progress}}
    </div>
    {{/if}}

    {{#file-upload name="uploads"
    accept=accept
    multiple=true
    onfileadd=(action (perform uploadImagesTask))
    disabled=(or hasMaxUploads (not (is-empty embedUrl)))
    class=(if (or hasMaxUploads (not (is-empty embedUrl))) "disabled" "")
    }}
    {{svg-jar "picture"}}
    {{t "feeds.uploads.select"}}
    {{/file-upload}}
    {{/if}}
    {{/unless}}
  </div>
  {{/file-dropzone}}

  {{! media tagging }}
  <div class="tag-media">
    {{#if _usableMedia}}
    <div class="tagged-media--wrapper">
      <div class="tagged-media row">
        <div class="stream-item--media col-xs-1">
          <a href={{href-to (concat _usableMedia.modelType ".show" ) _usableMedia.slug}}>
            {{lazy-image src=(image _usableMedia.posterImage "small")}}
          </a>
        </div>
        <div class="col-sm no-padding-left">
          <div class="stream-item--title-block">
            <div class="author-info">
              <a class="author-name" href={{href-to (concat _usableMedia.modelType ".show" ) _usableMedia.slug}}>
                {{_usableMedia.computedTitle}}
              </a>
              {{#if _usableMedia.description }}
              <small class="author-secondary">
                <div class="media-tag-description">
                  {{truncate _usableMedia.description 150}}
                </div>
              </small>
              {{/if}}
            </div>
          </div>
        </div>
        {{#unless mediaReadOnly}}
        <a href="#" class="tagged-media--remove hint--top hint--bounce hint--rounded" aria-label="Remove?" {{action
          (queue (action (mut _usableMedia) null) (action (mut spoiler) false))}}>
          {{svg-jar "close"}}
        </a>
        {{/unless}}
      </div>
    </div>
    {{else}}
    {{! media tagging input }}
    {{#search-typeahead
    value=_usableMedia.computedTitle
    search=(perform search)
    disabled=mediaReadOnly
    placeholder=(t "components.stream-feed.create-post.tag-media") as |media|
    }}
    <div {{action (queue (action (mut _usableMedia) media) (perform setUnitNumberTask) (action (mut spoiler) true))}}>
      <span class="tag-poster">{{lazy-image src=(image media.posterImage "tiny")}}</span>
      <span class="tag tag-primary">{{capitalize media.modelType}}</span>
      <span>{{media.computedTitle}}</span>
    </div>
    {{/search-typeahead}}
    {{/if}}
  </div>

  {{! post actions }}
  <div class="add-content-footer">
    <button type="button" class="button button--primary" disabled={{unless canPost "disabled" }} {{action (perform
      createPost)}}>
      {{#if createPost.isRunning}}
      {{loading-spinner size="small"}}
      {{else}}
      {{#if post}}
      {{t "components.stream-feed.create-post.edit"}}
      {{else}}
      {{t "components.stream-feed.create-post.create"}}
      {{/if}}
      {{/if}}
    </button>

    <label class="custom-control custom-checkbox">
      {{one-way-checkbox nsfw update=(action (mut nsfw)) disabled=forceNsfw class="custom-control-input"}}
      <span class="custom-control-indicator"></span>
      <span class="custom-control-description">{{t "components.stream-feed.create-post.nsfw"}}</span>
    </label>

    <label class="custom-control custom-checkbox">
      {{one-way-checkbox spoiler update=(action (mut spoiler)) class="custom-control-input"}}
      <span class="custom-control-indicator"></span>
      <span class="custom-control-description">{{t "components.stream-feed.create-post.spoiler"}}</span>
    </label>

    {{! Unit Tagging }}
    {{#if _usableMedia}}
    <span class="tag-unit">
      <label class="custom-control custom-checkbox">
        {{one-way-checkbox shouldUnit update=(action (mut shouldUnit)) disabled=(or isEditing forceUnit (not
        unitNumber)) class="custom-control-input"}}
        <span class="custom-control-indicator"></span>
      </label>
      <span>
        {{t "media.show.units.unit" type=(if (eq _usableMedia.modelType "anime") "episode" "chapter")}}
        {{one-way-number unitNumber
        disabled=(or isEditing forceUnit)
        min=1
        max=_usableMedia.unitCount
        update=(queue (action (mut unitNumber)) (action (mut shouldUnit) true))
        placeholder="-"
        }}
      </span>
    </span>
    {{/if}}
  </div>
</div>
{{/if}}