hummingbird-me/kitsu-web

{{#bootstrap/bs-modal id=modalId onClose=onClose as |modal|}}
  {{#modal.body}}
    <div style={{posterImageStyle}} class="reaction-poster">
      <div class="reaction-overlay">
        {{#if loadReactionTask.isRunning}}
          <div class="text-xs-center white reaction-loader">
            {{loading-spinner size="large" white=true}}
          </div>
        {{else}}
          {{! Reaction Content }}
          <div class="reaction-content">
            {{#if isEditing}}
              <span class="reaction-edit-warning">
                {{t "reaction-modal.edit-warning"}}
              </span>
            {{/if}}
            <div class="reaction-header">
              <span class="reaction-media-info">
                <a href={{href-to (concat media.modelType ".show") media.slug}} class="reaction-media-title">{{media.yearlessTitle}}</a>
                <span class="reaction-media-subtype">{{t (concat "media-shared.types." media.modelType "." (to-lower media.subtype))}}</span>
                {{#if media.year}}
                  &middot;
                  <span class="reaction-media-year">{{media.year}}</span>
                {{/if}}
              </span>
              <span class="reaction-media-remaining {{if (not reaction.validations.isValid) "is-invalid"}}">{{remaining}}</span>
            </div>
            {{expanding-textarea reaction.reaction
              update=(action (mut reaction.reaction))
              placeholder=(t "reaction-modal.placeholder" index=placeholderIndex)
              maxlength=240
              autofocus="true"
            }}
          </div>

          {{! Delete Button }}
          {{#if isEditing}}
            <a href="#" {{action (perform deleteReactionTask)}} class="reaction-delete-button hint--rounded hint--bounce hint--left" aria-label={{t "reaction-modal.delete"}}>
              {{#if deleteReactionTask.isRunning}}
                {{loading-spinner size="small" white=true}}
              {{else}}
                {{svg-jar "trash"}}
              {{/if}}
            </a>
          {{/if}}

          {{! Skip Button }}
          {{#if showSkipButton}}
            <button class="skip-button" onclick={{action onSkip}}>
              {{t "reaction-modal.skip"}}
            </button>
          {{/if}}

          {{! Edit/Post Button }}
          <button onclick={{perform createReactionTask}} disabled={{not canPost}}>
            {{t (concat "reaction-modal." (if isEditing "edit" "post"))}}
          </button>
        {{/if}}
      </div>
    </div>
  {{/modal.body}}
{{/bootstrap/bs-modal}}