<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Recent Videos</title>
  <style>
    .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
    .card { border: 1px solid #ddd; border-radius: 8px; padding: 10px; background: #fff; }
    .thumb { width: 100%; height: auto; border-radius: 6px; display: block; }
    .meta { margin-top: 8px; font-size: 14px; line-height: 1.4; }
    .meta a { text-decoration: none; color: #0b73ff; }
    .pager { margin: 16px 0; display: flex; gap: 8px; justify-content: center; }
    .pager a { padding: 6px 10px; border: 1px solid #ccc; border-radius: 6px; text-decoration: none; color: #333; }
    .pager .current { padding: 6px 10px; border-radius: 6px; background: #eee; }
    body {
        font-family: Arial, sans-serif;
        background: #111;
        color: #eee;
        text-align: center;
        margin: 0;
        padding: 0;
    }

  </style>
</head>
<body>
  <h1>Recent Videos</h1>

  <div class="grid">
    {% for v in videos %}
      <div class="card">
        <a href="{{ url_for('web.view_video', video_id=v.video_id) }}">
          <img class="thumb"
               src="{{ (v.thumbnail or '') | replace('\\','/') }}"
               alt="thumb"
               onerror="this.style.display='none'">
        </a>
        <div class="meta">
          <div>
            <strong><a href="{{ url_for('web.view_video', video_id=v.video_id) }}">{{ v.video_id }}</a></strong>
          </div>
          <div>
            by <a href="{{ url_for('web.user_page', username=v.username) }}">{{ v.username }}</a>
            · {{ v.platform }}
          </div>
          <div>
            {{ (v.created_at or v.updated_at) }}
          </div>
          <div>
            {{ "%.1f"|format((v.size or 0)|float) }} MB · {{ v.duration or 0 }}s
          </div>
        </div>
      </div>
    {% endfor %}
  </div>

  <div class="pager">
    {% if page > 1 %}
      <a href="{{ url_for('web.recent', page=page-1) }}">&laquo; Prev</a>
    {% endif %}
    <span class="current">Page {{ page }} / {{ total_pages }}</span>
    {% if page < total_pages %}
      <a href="{{ url_for('web.recent', page=page+1) }}">Next &raquo;</a>
    {% endif %}
  </div>
</body>
</html>
