<div class="aspect">
  <iframe data-test-selector="clips-playback" src={{clip.embedURL}} width=100% height=100% class="block aspect__fill" allowfullscreen="true"/>
</div>
<div class="text-content pd-b-0">
  <div class="item flex flex--nowrap">
    <div class="form__input-group form__input-group--icon-left flex__item--grow mg-r-1">
      {{#copy-button tagName='div' clipboardText=clip.url}}
        {{copiable-text id='share-url-copy' value=clip.url class="form__input cursor--pointer" onClick=(action 'selectShareURL')}}
      {{/copy-button}}
      <div class="form__icon-group">
        <figure class="form__icon icon">
          <svg viewBox="0 0 32 32" width="30px" height="30px">
            <use xlink:href="#icon_copy"></use>
          </svg>
        </figure>
      </div>
    </div>
    {{clips/clips-share-box clip}}
    {{clips/clips-more-button clip=clip openRemoveModal=(action 'openRemoveModal') openReportModal=(action 'openReportModal')}}
  </div>
  <div class="cn-metabar">
    <div class="card card--row card--sm cn-card">
      <div class="card__layout flex flex--spaceBetween flex--nowrap">
        <div class="card__body mg-l-0 mg-r-1">
          <h3 class="cn-card__title card__title ellipsis">
            {{clip.title}}
            <span class='cn-metabar__timeago'> &bull; {{relative-time clip.createdAt}}</span>
          </h3>
          <div class="card__info" data-test-selector="clip-modal-card-info">
            {{#if clip.game}}
              {{#intl/t-yield 'channel.clips.clip.broadcaster.info' dynamicYields=(array 'broadcaster' 'game') as |h|}}
                {{#h.section 'broadcaster'}}
                  {{#link-to 'channel' clip.broadcasterLogin}}
                    {{clip.broadcasterDisplayName}}
                  {{/link-to}}
                {{/h.section}}
                {{#h.section 'game'}}
                  {{#link-to-game clip.game}}
                    {{clip.game}}
                  {{/link-to-game}}
                {{/h.section}}
              {{/intl/t-yield}}
            {{else}}
              {{#link-to 'channel' clip.broadcasterLogin}}
                {{clip.broadcasterDisplayName}}
              {{/link-to}}
            {{/if}}
            &middot;
            {{#intl/t-yield 'channel.clips.clip.curator.info' dynamicYields=(array 'curator')}}
              {{#link-to 'channel' clip.curatorLogin}}
                {{clip.curatorDisplayName}}
              {{/link-to}}
            {{/intl/t-yield}}
          </div>
        </div>
        <div class="cn-metabar__viewcount mg-b-2" data-test-selector="clip-modal-viewcount">
          <figure class="icon cn-metabar__icon">{{partial 'svg/glyph-views'}}</figure>
          {{t 'channel.clips.clip.viewCount.info' numViews=clip.views}}
        </div>
      </div>
    </div>
  </div>
</div>

{{#if arrowsAreVisible }}
  {{#if leftArrowIsVisible }}
    <div
      class="card-carousel__control card-carousel__control--left theme--dark"
      style="left: -4rem"
      data-test-selector="clip-modal-arrow-left"
    >
      <a type="button" class="card-carousel__button card-carousel__button--next flex-prev button" {{action 'onPrevClipClick'}}>
        <div class="card-carousel__arrow card-carousel__arrow--prev"></div>
      </a>
    </div>
  {{/if}}

  <div
    class="card-carousel__control card-carousel__control--right theme--dark"
    style="right: -4rem"
    data-test-selector="clip-modal-arrow-right"
  >
    <a type="button" name="button" class="card-carousel__button card-carousel__button--next flex-next button" {{action 'onNextClipClick'}}>
      <div class="card-carousel__arrow card-carousel__arrow--next"></div>
    </a>
  </div>
{{/if}}
