{{extend defaultLayout}} {{block 'css'}}
<script src="{{_res_path}}template/extend/js/qrcode.min.js"></script>
<link rel="stylesheet" type="text/css" href="{{_res_path}}template/bilibili/css/dynamic/DYNAMIC_TYPE_FORWARD.css" />
{{/block}} {{block 'main'}}
<div class="spacer1"></div>

<div class="userinfo">
  <img src="{{avatar_url}}" alt="头像" class="avatar" />
  <img src="{{frame}}" class="avatar-1" />
  <div class="name_and_followers">
    <div class="username"><span>{{@username}}</span></div>
    <div class="dynamic_create_time">{{create_time}}</div>
  </div>
  <div class="bili_dyn_item_ornament">{{@decoration_card}}</div>
</div>
<div class="spacer1"></div>
<div class="info">
  <div class="info_text">{{@text}}</div>
  <div class="spacer4"></div>
</div>
<div class="original-content">
  {{if original_content.DYNAMIC_TYPE_AV}}
  <div class="DYNAMIC_TYPE_AV">
    <div class="AVuserinfo">
      <div class="forward_user_info">
        <div class="forward_name">
          <img class="forward_avatar" src="{{original_content.DYNAMIC_TYPE_AV.avatar_url}}">
          <img src="{{original_content.DYNAMIC_TYPE_AV.frame}}" class="forward_avatar-1" />
          <div>
            <div class="name">{{@original_content.DYNAMIC_TYPE_AV.username}}</div>
            <div class="dynamic_create_time">{{original_content.DYNAMIC_TYPE_AV.create_time}}</div>
          </div>
        </div>
        <div class="forward_decoration_card">
          {{@original_content.DYNAMIC_TYPE_AV.decoration_card}}
        </div>
      </div>
    </div>
    <div class="AVcover">
      <div class="imgbox">
        <img class="imgbox_1" src="{{original_content.DYNAMIC_TYPE_AV.cover}}" />
        <div class="gradient-overlay"></div>
        <div class="image-text"><span
            class="duration_text">{{original_content.DYNAMIC_TYPE_AV.duration_text}}</span>&nbsp;&nbsp;&nbsp;
          {{original_content.DYNAMIC_TYPE_AV.play}}观看&nbsp;&nbsp;&nbsp;
          {{original_content.DYNAMIC_TYPE_AV.danmaku}}弹幕</div>
      </div>
    </div>
    <div class="intro">{{@original_content.DYNAMIC_TYPE_AV.title}}</div>
    <div style="height: 15px"></div>
  </div>
  {{else if original_content.DYNAMIC_TYPE_DRAW}}
  <div class="DYNAMIC_TYPE_DRAW">
    <div class="DRAWuserinfo">
      <div class="forward_user_info">
        <div class="forward_name">
          <img class="forward_avatar" src="{{original_content.DYNAMIC_TYPE_DRAW.avatar_url}}">
          <img src="{{original_content.DYNAMIC_TYPE_DRAW.frame}}" class="forward_avatar-1" />
          <div>
            <div class="name">{{@original_content.DYNAMIC_TYPE_DRAW.username}}</div>
            <div class="dynamic_create_time">{{original_content.DYNAMIC_TYPE_DRAW.create_time}}</div>
          </div>
        </div>
        <div class="forward_decoration_card">
          {{@original_content.DYNAMIC_TYPE_DRAW.decoration_card}}
        </div>
      </div>
    </div>
    <div class="spacer4"></div>
    <div class="forward_info_text">{{@original_content.DYNAMIC_TYPE_DRAW.text}}</div>
    {{if original_content.DYNAMIC_TYPE_DRAW.image_url.length === 1}}
    <div class="single-image-container">
      <div class="DRAWcover">
        <div class="DRAWimgbox">
          <img class="DRAWimgbox_1" src="{{original_content.DYNAMIC_TYPE_DRAW.image_url[0].image_src}}">
        </div>
      </div>
    </div>
    {{else}}
    <div class="image-grid">
      {{each original_content.DYNAMIC_TYPE_DRAW.image_url}}
      <div class="image-container">
        <img src="{{$value.image_src}}" class="grid-image">
      </div>
      {{/each}}
    </div>
    {{/if}}
    <div class="spacer4"></div>
  </div>
  {{else if original_content.DYNAMIC_TYPE_WORD}}
  <div class="DYNAMIC_TYPE_WORD">
    <div class="DRAWuserinfo">
      <div class="forward_user_info">
        <div class="forward_name">
          <img class="forward_avatar" src="{{original_content.DYNAMIC_TYPE_WORD.avatar_url}}">
          <img src="{{original_content.DYNAMIC_TYPE_WORD.frame}}" class="forward_avatar-1" />
          <div>
            <div class="name">{{@original_content.DYNAMIC_TYPE_WORD.username}}</div>
            <div class="dynamic_create_time">{{original_content.DYNAMIC_TYPE_WORD.create_time}}</div>
          </div>
        </div>
        <div class="forward_decoration_card">
          {{@original_content.DYNAMIC_TYPE_WORD.decoration_card}}
        </div>
      </div>
    </div>
    <div class="spacer4"></div>
    <div class="forward_info_text">{{@original_content.DYNAMIC_TYPE_WORD.text}}</div>
  </div>
  {{else if original_content.DYNAMIC_TYPE_LIVE_RCMD}}
  <div class="DYNAMIC_TYPE_LIVE_RCMD">
    <div class="LIVE_RCMDuserinfo">
      <div class="forward_user_info">
        <div class="forward_name">
          <img class="forward_avatar" src="{{original_content.DYNAMIC_TYPE_LIVE_RCMD.avatar_url}}">
          <img src="{{original_content.DYNAMIC_TYPE_LIVE_RCMD.frame}}" class="forward_avatar-1" />
          <div>
            <div class="name">{{@original_content.DYNAMIC_TYPE_LIVE_RCMD.username}}</div>
            <div class="dynamic_create_time">{{original_content.DYNAMIC_TYPE_LIVE_RCMD.create_time}}</div>
          </div>
        </div>
        <div class="forward_decoration_card">
          {{@original_content.DYNAMIC_TYPE_LIVE_RCMD.decoration_card}}
        </div>
      </div>
    </div>
    <div class="LIVE_RCMDcover">
      <div class="imgbox">
        <img class="LIVE_RCMDimgbox_1" src="{{original_content.DYNAMIC_TYPE_LIVE_RCMD.cover}}" />
        <div class="gradient-overlay"></div>
        <div class="image-text"><span
            class="duration_text">{{original_content.DYNAMIC_TYPE_LIVE_RCMD.area_name}}</span>&nbsp;&nbsp;&nbsp;
          {{original_content.DYNAMIC_TYPE_LIVE_RCMD.text_large}}&nbsp;&nbsp;&nbsp;
          在线: {{original_content.DYNAMIC_TYPE_LIVE_RCMD.online}}</div>
      </div>
    </div>
    <div class="intro">{{@original_content.DYNAMIC_TYPE_LIVE_RCMD.title}}</div>
  </div>
  {{/if}}
</div>
<div class="spacer6"></div>
<div class="info">
  <div class="work_status">{{dianzan}}点赞 · {{pinglun}}评论 · {{share}}分享</div>
  <div class="work_status">图片生成时间: {{render_time}}</div>
  <div class="spacer5"></div>
</div>
<div style="height: 90px"></div>
<div class="under">
  <div class="rectangular_box">
    <div class="user" style="align-items: center">
      <div class="bitop">
        <img src="{{_res_path}}image/bilibili/bilibili-light.png" />
        <br>
        <span class="userinfo_text" style="font-size: 50px;">长按识别二维码即可查看全文</span>
      </div>
      <div class="userinfo_text">
        <span>UID: {{user_shortid}}</span>
        <span>获赞: {{total_favorited}}</span>
        <span>关注: {{following_count}}</span>
        <span>粉丝: {{fans}}</span>
      </div>
    </div>
    <div class="qrcode_box">
      <div class="qrcode_text">{{dynamicTYPE}}</div>
      <div id="qrcode"></div>
    </div>
  </div>
</div>
<script>
  qrcode = new QRCode(document.getElementById('qrcode'), {
    width: 600,
    height: 600,
    colorDark: '{{useDarkTheme}}' === 'true' ? '#c3c3c3' : '#3a3a3a',
    colorLight: '{{useDarkTheme}}' === 'true' ? '#121212' : '#f4f4f4',
  })
  qrcode.makeCode('{{share_url}}')
</script>
{{/block}}