{% 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 style="margin-bottom: 2em;">
  <h1>嘿，这里是 MikuInvidious！<small>MikuInvidious 是自由的哔哩哔哩前端。</small></h1>
  <p>要把哔哩哔哩链接转换成 MikuInvidious，你需要把 <code>www.bilibili.com</code> 和 <code>b23.tv</code> 替换成 MikuInvidious 实例的域名。</p>
  <p>个人空间需要把 <code>space.bilibili.com</code> 后的数字粘贴到实例域名 + <code>/space/</code> 后面。</p>
</div>

<hr>

<div class="pure-g">
  {% for v in i['item'] %}
  <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['owner']['mid'] }}">
            <p class="channel-name" dir="auto">{{ v['owner']['name'] }}</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 %}