{% set page_name = "user_background_manage" %}
{% extends "manage_base.html" %}
{% block manage_content %}
<style>
.user-bg-manage-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 18px;
  align-items: start;
}
.user-bg-images {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
}
.user-bg-image,
.user-bg-upload-box {
  overflow: hidden;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-control-radius, 6px);
  background: var(--ui-surface-soft);
  box-shadow: var(--ui-floating-shadow);
}
.user-bg-upload-box { padding: 14px; }
.user-bg-upload-row {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}
.user-bg-image__thumb {
  display: block;
  height: 120px;
  background-color: var(--ui-code-surface);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.user-bg-image__body { padding: 10px; }
.user-bg-image__name,
.user-bg-image__meta {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-bg-image__name { color: var(--ui-text); font-weight: 600; }
.user-bg-image__meta { margin: 4px 0 10px; color: var(--ui-text-muted); font-size: 12px; }
.user-bg-image__badge { color: var(--ui-text-muted); font-size: 12px; }
@media (max-width: 900px) {
  .user-bg-manage-grid { grid-template-columns: 1fr; }
}
</style>

<div class="section user-bg-manage">
  <div class="section__header">
    <h1 class="section__title" data-heading>背景图库</h1>
  </div>
  <div class="section__body">
    <div class="user-bg-manage-grid">
      <div>
        <div class="user-bg-images">
          {% for image in images %}
          <div class="user-bg-image">
            <span class="user-bg-image__thumb" data-user-bg-lazy="{{ image.url }}"></span>
            <div class="user-bg-image__body">
              <span class="user-bg-image__name" title="{{ image.name }}">{{ image.name }}</span>
              <span class="user-bg-image__meta">{{ image.sizeText }} · {{ image.filename }}</span>
              {% if image.builtin %}
              <span class="user-bg-image__badge">系统内置，不能删除</span>
              {% else %}
              <form method="post">
                <input type="hidden" name="csrfToken" value="{{ handler.csrfToken }}">
                <input type="hidden" name="operation" value="delete">
                <input type="hidden" name="imageId" value="{{ image.id }}">
                <button type="submit" class="rounded button" data-user-bg-delete>
                  <span class="icon icon-delete"></span> 删除
                </button>
              </form>
              {% endif %}
            </div>
          </div>
          {% endfor %}
        </div>
      </div>

      <form method="post" enctype="multipart/form-data" class="user-bg-upload-box">
        <input type="hidden" name="csrfToken" value="{{ handler.csrfToken }}">
        <input type="hidden" name="operation" value="upload">
        <div class="user-bg-upload-row">
          <label>图片名称</label>
          <input type="text" name="name" class="textbox" maxlength="60" required>
        </div>
        <div class="user-bg-upload-row">
          <label>图片文件 <span class="supplementary">最大 {{ maxImageSizeMB }} MB</span></label>
          <input type="file" name="file" class="textbox" accept=".jpg,.jpeg,.png,.gif,.webp,.bmp" required>
        </div>
        <button type="submit" class="rounded primary button">
          <span class="icon icon-upload"></span> 上传到图库
        </button>
      </form>
    </div>
  </div>
</div>
{% endblock %}