<div class="chat-chip {{if isChatDark 'chat-chip--dark'}} {{if (or isErrored isLoading) 'chat-chip--no-hover' }}">
  <div class="card card--row card--sm {{if isChatDark 'card--theme-dark'}}">
    {{#if (or isErrored isLoading)}}
      <div class="card__layout">
        <figure class="card__img chat-chip-img {{if isErrored 'chat-chip-img--error'}}">
          {{#if isLoading}}
            <div class="loading-spinner"></div>
          {{else}}
            {{fallback-image src=cardPreviewImage errorSrc=fallbackImage}}
          {{/if}}
        </figure>
        <div class="card__body">
          <h3 class="card__title ellipsis">
            {{#if isErrored}}
              {{i18n 'Something went wrong'}}
            {{else}}
              {{i18n 'Loading Clipperino...'}}
            {{/if}}
          </h3>
          <p class="card__info ellipsis">
            {{#if isErrored}}
              {{i18n "We couldn't find that Clip."}}
            {{else}}
              ...
            {{/if}}
          </p>
        </div>
      </div>
    {{else}}
      <a href="{{clipsUrl}}" target="_blank" rel="noopener noreferrer" class="card__layout">
        <figure class="card__img chat-chip-img">
          {{fallback-image src=cardPreviewImage errorSrc=fallbackImage}}
        </figure>
        <div class="card__body">
          <h3 class="card__title ellipsis">
            {{#if clipInfo.game}}
              {{cardTitle}}
            {{else}}
              {{styled-i18n 'Clip of %{broadcaster}' (hash broadcaster=clipInfo.broadcasterDisplayName)}}
            {{/if}}
          </h3>
          <p class="card__info ellipsis">
            {{styled-i18n 'Clipped by %{curator}' (hash curator=clipInfo.curatorDisplayName)}}
          </p>
        </div>
      </a>
    {{/if}}
  </div>
</div>
