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

{% block head %}
<title>分区 - MikuInvidious</title>
<meta name="referrer" content="never">
<link rel="stylesheet" href="/static/themes/wayback/css/search.css">
{% endblock %}

{% block content %}
<div class="h-box">
  <h1>{{ info['archives'][0]['tname'] }}</h1>
</div>

<div class="pure-g h-box v-box">
  <div class="pure-u-1 pure-u-lg-1-5">
    {% if info['page']['num'] > 1 %}
    <a href="/vv/{{ info['archives'][0]['tid'] }}?i={{info['page']['num']-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 (info['page']['num']+1)*(info['page']['size']) < info['page']['count'] %}
    <a href="/vv/{{ info['archives'][0]['tid'] }}?i={{info['page']['num']+1}}">下一页</a>
    {% endif %}
  </div>
</div>

<div class="pure-g">
  {% for v in info['archives'] %}
  <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['pubdate']|date }}</p>
        </div>
        <div class="flex-right">
          <p class="video-data" dir="auto">{{ v['stat']['view']|intsep }} 次播放</p>
        </div>
      </div>      
    </div>
  </div>
  {% endfor %}
</div>

{% endblock %}