{% extends 'themes/wayback/base.html' %}

{% block head %}
<title>{{ uinfo['name'] }} - MikuInvidious</title>
<meta name="referrer" content="never">
<meta name="description" content="{{ uinfo['sign'] }}">
<meta property="og:site_name" content="MikuInvidious">
<meta property="og:url" content="{{ site_url }}/space/{{ uinfo['mid'] }}">
<meta property="og:title" content="{{ uinfo['name'] }}">
<meta property="og:image" content="{{ uinfo['face']|pic }}">
<meta property="og:description" content="{{ uinfo['sign'] }}">
<meta name="twitter:card" content="summary">
<meta name="twitter:url" content="{{ site_url }}/space/{{ uinfo['mid'] }}">
<meta name="twitter:title" content="{{ uinfo['name'] }}">
<meta name="twitter:description" content="{{ uinfo['sign'] }}">
<meta name="twitter:image" content="{{ uinfo['face']|pic }}">
<link rel="alternate" href="https://space.bilibili.com/{{ uinfo['mid'] }}">
{% endblock %}

{% block content %}
<div class="pure-g h-box">
  <div class="pure-u-2-3">
    <div class="channel-profile">
      <img src="{{ uinfo['face']|pic }}" alt="" />
      <span>{{ uinfo['name'] }}</span>
    </div>
  </div>
</div>

<div class="h-box">
  <div id="descriptionWrapper">
    <p><span style="white-space:pre-wrap">{{ uinfo['sign'] }}</span></p>
  </div>
</div>

<div class="pure-g h-box">
  <div class="pure-u-1-2">
    <div class="pure-u-1 pure-md-1-3">
      <a href="https://space.bilibili.com/{{ uinfo['mid'] }}">在哔哩哔哩上浏览</a>
    </div>
    <div class="pure-u-1 pure-md-1-3">
      <a href="/author/{{ uinfo['mid'] }}">浏览发布的文章</a>
    </div>
  </div>
</div>

<div class="h-box">
    <hr>
</div>

<div class="pure-g h-box v-box">
  <div class="pure-u-1 pure-u-lg-1-5">
    {% if uvids['page']['pn'] > 1 %}
    <a href="/space/{{ uinfo['mid'] }}?i={{ uvids['page']['pn']-1 }}">上一页</a>
    {% endif %}
  </div>
  <div class="pure-u-1 pure-u-lg-3-5"></div>
  <div class="pure-u-1 pure-u-lg-1-5" style="text-align:right">
    {% if (uvids['page']['pn']+1)*(uvids['page']['ps']) < uvids['page']['count'] %}
    <a href="/space/{{ uinfo['mid'] }}?i={{ uvids['page']['pn']+1 }}">下一页</a>
    {% endif %}
  </div>
</div>

<div class="pure-g">
  {% for v in uvids['list']['vlist'] %}
  <div class="pure-u-1 pure-u-md-1-4">
    <div class="h-box">
      <a style="width:100%" href="/video/{{ v['bvid'] }}">
        <div class="thumbnail">
          <img width="320" height="180" loading="lazy" tabindex="-1" class="thumbnail" src="{{ "{}@320w".format(v['pic'])|pic }}" alt="">
          <p class="length">{{ v['duration'] }}</p>
        </div>
        <p dir="auto">
	  {{ v['title']|safe }}
	</p>
      </a>

      <div class="video-card-row flexible">
        <div class="flex-left"><a href="/space/{{ v['mid'] }}">
            <p class="channel-name" dir="auto">{{ v['author'] }}</p>
        </a></div>
        <div class="flex-right">
	  <div class="icon-buttons">
            <a title="在哔哩哔哩上观看" href="https://www.bilibili.com/video/{{ v['bvid'] }}">
              <i class="icon ion-logo-youtube"></i>
            </a>
            <a title="音频模式" href="/video/{{ v['bvid'] }}?listen=1">
              <i class="icon ion-md-headset"></i>
            </a>
	  </div>
	</div>
      </div>

      <div class="video-card-row flexible">
        <div class="flex-left">
          <p class="video-data" dir="auto">{{ v['created']|date }}</p>
        </div>
        <div class="flex-right">
          <p class="video-data" dir="auto">{{ v['play']|intsep }} 次播放</p>
        </div>
      </div>      
    </div>
  </div>
  {% endfor %}
</div>
{% endblock %}