{% extends "base.html" %}
{% set title = "资源" %}
{% set page = "resources" %}

{% block content %}
  <section class="page-header" style="background: linear-gradient(135deg, var(--brand) 0%, var(--brand-600) 100%); color: white; padding: 60px 20px; border-radius: 20px; text-align: center; margin-bottom: 32px; box-shadow: var(--shadow-lg);">
    <h1 style="font-size: 2.5rem; margin-bottom: 16px; color: white;"><i class="ri-apps-2-fill" style="margin-right:8px; opacity:0.9;"></i>资源库</h1>
    <p style="font-size: 1.1rem; opacity: 0.9; margin-bottom: 32px;">在这里按关键字与类型筛选，浏览与进入详情页</p>
    <div class="toolbar" style="justify-content: center; background: rgba(255,255,255,0.1); padding: 16px; border-radius: 16px; backdrop-filter: blur(10px); max-width: 800px; margin: 0 auto;">
      <div style="position: relative; flex: 1; min-width: 200px;">
        <i class="ri-search-line" style="position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,0.7); font-size: 1.2rem;"></i>
        <input id="q" class="input" placeholder="搜索标题或简介" style="width: 100%; padding-left: 48px; background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.3); color: white; border-radius: 12px;" />
      </div>
      <select id="type" class="input" style="background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.3); color: white; border-radius: 12px; flex: 1; min-width: 120px;">
        <option value="" style="color:#333">全部类型</option>
        <option value="FREE" style="color:#333">免费</option>
        <option value="VIP" style="color:#333">VIP</option>
      </select>
      <select id="sort" class="input" style="background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.3); color: white; border-radius: 12px; flex: 1; min-width: 120px;">
        <option value="latest" style="color:#333">最新</option>
        <option value="hot" style="color:#333">热门</option>
      </select>
      <button id="searchBtn" class="btn" style="background: white; color: var(--brand); border-radius: 12px; font-weight: 600; flex: 1; min-width: 120px;"><i class="ri-search-line"></i> 搜索</button>
    </div>
  </section>
  <div id="resourceList" class="grid" style="margin-top:16px"></div>
  <div class="pager" id="pager" style="margin-top: 32px;">
    <button id="prevPage" class="btn"><i class="ri-arrow-left-s-line"></i> 上一页</button>
    <span id="pageInfo" class="muted" style="font-weight: 500;"></span>
    <button id="nextPage" class="btn">下一页 <i class="ri-arrow-right-s-line"></i></button>
  </div>
{% endblock %}