{% set page_name = "user_background_manage" %}
{% extends "manage_base.html" %}
{% block manage_content %}
<style>
.user-bg-manage {
  --ubg-surface: rgba(255, 255, 255, .74);
  --ubg-surface-soft: rgba(248, 251, 255, .68);
  --ubg-surface-head: rgba(255, 255, 255, .42);
  --ubg-input: rgba(255, 255, 255, .88);
  --ubg-border: rgba(217, 226, 236, .72);
  --ubg-border-soft: rgba(230, 237, 245, .64);
  --ubg-text: #1f2937;
  --ubg-muted: #64748b;
  --ubg-accent: #2563eb;
  --ubg-shadow: 0 16px 36px rgba(15, 23, 42, .08);
  --ubg-card-shadow: 0 10px 24px rgba(15, 23, 42, .06);
  --ubg-backdrop: blur(16px) saturate(150%);
  --ubg-thumb-bg: #f8fafc;
  --ubg-thumb-overlay: transparent;
}
.theme--dark .user-bg-manage,
.theme-dark .user-bg-manage,
.theme_dark .user-bg-manage,
[data-theme="dark"] .user-bg-manage,
body.dark .user-bg-manage {
  color-scheme: dark;
  --ubg-surface: rgba(31, 36, 44, .68);
  --ubg-surface-soft: rgba(24, 30, 39, .62);
  --ubg-surface-head: rgba(36, 43, 53, .48);
  --ubg-input: rgba(15, 23, 42, .58);
  --ubg-border: rgba(58, 70, 86, .72);
  --ubg-border-soft: rgba(58, 70, 86, .52);
  --ubg-text: #e2e8f0;
  --ubg-muted: #94a3b8;
  --ubg-accent: #7aa7e4;
  --ubg-shadow: 0 16px 36px rgba(0, 0, 0, .18);
  --ubg-card-shadow: 0 10px 24px rgba(0, 0, 0, .16);
  --ubg-backdrop: blur(16px) saturate(150%);
  --ubg-thumb-bg: #111827;
  --ubg-thumb-overlay: linear-gradient(180deg, rgba(15, 23, 42, .12), rgba(15, 23, 42, .32));
}
.user-bg-manage.section {
  border-color: var(--ubg-border);
  background: var(--ubg-surface);
  box-shadow: var(--ubg-shadow);
  backdrop-filter: var(--ubg-backdrop);
  -webkit-backdrop-filter: var(--ubg-backdrop);
}
html.hydro-user-background-enabled .user-bg-manage.section {
  border-color: var(--ubg-border) !important;
  background: var(--ubg-surface) !important;
  box-shadow: var(--ubg-shadow) !important;
  backdrop-filter: var(--ubg-backdrop) !important;
  -webkit-backdrop-filter: var(--ubg-backdrop) !important;
}
.user-bg-manage .section__header,
.user-bg-manage .section__body {
  background: transparent;
}
.user-bg-manage .section__header {
  border-color: var(--ubg-border-soft);
  background: var(--ubg-surface-head);
}
.user-bg-manage .section__title {
  color: var(--ubg-text);
}
.user-bg-manage-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 18px;
  align-items: start;
}
.user-bg-upload-box {
  border: 1px solid var(--ubg-border);
  border-radius: 8px;
  padding: 14px;
  background: var(--ubg-surface-soft);
  box-shadow: var(--ubg-card-shadow);
  backdrop-filter: var(--ubg-backdrop);
  -webkit-backdrop-filter: var(--ubg-backdrop);
}
.user-bg-upload-row {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}
.user-bg-upload-row label {
  color: var(--ubg-text);
  font-weight: 700;
}
.user-bg-upload-row .supplementary {
  color: var(--ubg-muted);
}
.user-bg-manage .textbox {
  border-color: var(--ubg-border);
  background: var(--ubg-input);
  color: var(--ubg-text);
}
.user-bg-manage input[type="file"].textbox::file-selector-button {
  margin-right: 10px;
  border: 1px solid var(--ubg-border);
  border-radius: 6px;
  background: var(--ubg-surface-soft);
  color: var(--ubg-text);
  cursor: pointer;
}
.user-bg-images {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
}
.user-bg-image {
  border: 1px solid var(--ubg-border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--ubg-surface-soft);
  box-shadow: var(--ubg-card-shadow);
  backdrop-filter: var(--ubg-backdrop);
  -webkit-backdrop-filter: var(--ubg-backdrop);
}
.user-bg-image__thumb {
  display: block;
  position: relative;
  height: 120px;
  overflow: hidden;
  background-color: var(--ubg-thumb-bg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.user-bg-image__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ubg-thumb-overlay);
  pointer-events: none;
}
.user-bg-image__body {
  padding: 10px;
}
.user-bg-image__name {
  display: block;
  overflow: hidden;
  color: var(--ubg-text);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-bg-image__meta {
  display: block;
  overflow: hidden;
  margin: 4px 0 10px;
  color: var(--ubg-muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-bg-image__badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  color: var(--ubg-muted);
  font-size: 12px;
}
.user-bg-empty {
  padding: 24px;
  border: 1px dashed var(--ubg-border);
  border-radius: 8px;
  background: var(--ubg-surface-soft);
  color: var(--ubg-muted);
  text-align: center;
}
@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>
        {% if images|length %}
        <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>
        {% else %}
        <div class="user-bg-empty">还没有上传任何背景图片</div>
        {% endif %}
      </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 %}