{% set page_name = "user_background" %}
{% extends "layout/basic.html" %}
{% block content %}
<style>
.user-bg-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 18px;
  align-items: start;
}
.user-bg-panel {
  overflow: hidden;
  border: 1px solid var(--ui-content-border);
  border-radius: var(--ui-panel-radius, 10px);
  background: var(--ui-content-surface);
  box-shadow: var(--ui-content-shadow);
  backdrop-filter: var(--ui-content-backdrop);
  -webkit-backdrop-filter: var(--ui-content-backdrop);
}
.user-bg-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--ui-content-border);
  background: var(--ui-content-surface-soft);
}
.user-bg-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--ui-text);
  font-size: 17px;
  line-height: 1.35;
}
.user-bg-panel__body { padding: 16px; }
.user-bg-field { margin-bottom: 18px; }
.user-bg-label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  color: var(--ui-text);
  font-weight: 500;
}
.user-bg-help {
  color: var(--ui-text-muted);
  font-size: 12px;
  font-weight: 400;
}
.user-bg-library {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.user-bg-card {
  display: grid;
  grid-template-rows: 86px minmax(0, 1fr);
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--ui-content-border);
  border-radius: var(--ui-control-radius, 6px);
  background: var(--ui-content-surface-soft);
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.user-bg-card:hover,
.user-bg-card.is-selected {
  border-color: #2563eb;
  background: var(--ui-hover-surface);
  box-shadow: 0 8px 20px rgba(37, 99, 235, .12);
}
.user-bg-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.user-bg-card__thumb {
  display: block;
  min-height: 86px;
  background-color: var(--ui-code-surface);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.user-bg-card__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 10px;
}
.user-bg-card__name,
.user-bg-card__meta {
  display: block;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-bg-card__name { color: var(--ui-text); font-weight: 600; }
.user-bg-card__meta { margin-top: 3px; color: var(--ui-text-muted); font-size: 12px; }
.user-bg-range {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px;
  gap: 12px;
  align-items: center;
}
.user-bg-preview {
  position: relative;
  min-height: 240px;
  overflow: hidden;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-control-radius, 6px);
  background: var(--ui-code-surface);
}
.user-bg-preview__image {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.user-bg-preview__content {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--ui-content-border);
  border-radius: var(--ui-control-radius, 6px);
  background: var(--ui-content-surface);
  color: var(--ui-text);
}
@media (max-width: 900px) {
  .user-bg-page { grid-template-columns: 1fr; }
}
</style>

<div class="row">
  <div class="columns">
    <div class="user-bg-page" data-user-bg-settings>
      <div class="user-bg-panel">
        <div class="user-bg-panel__head">
          <h1 class="user-bg-title"><span class="icon icon-insert--image"></span>背景设置</h1>
          {% if handler.user.hasPriv(PRIV.PRIV_EDIT_SYSTEM) %}
          <a class="rounded button" href="{{ url('user_background_manage') }}">
            <span class="icon icon-settings"></span> 管理图库
          </a>
          {% endif %}
        </div>
        <div class="user-bg-panel__body">
          <form method="post">
            <input type="hidden" name="csrfToken" value="{{ handler.csrfToken }}">
            <div class="user-bg-field">
              <label class="checkbox">
                <input type="checkbox" name="enabled" value="on"{% if config.enabled %} checked{% endif %} data-user-bg-enabled>
                启用背景图片
              </label>
            </div>

            <div class="user-bg-field">
              <label class="user-bg-label">
                <span>选择背景</span>
                <span class="user-bg-help">由系统管理员上传维护</span>
              </label>
              <div class="user-bg-library">
                <label class="user-bg-card{% if not config.imageId %} is-selected{% endif %}">
                  <input type="radio" name="imageId" value="" data-user-bg-option data-url=""{% if not config.imageId %} checked{% endif %}>
                  <span class="user-bg-card__thumb"></span>
                  <span class="user-bg-card__body">
                    <span class="user-bg-card__name">不使用图片</span>
                    <span class="user-bg-card__meta">关闭背景和自适应玻璃模式</span>
                  </span>
                </label>
                {% for image in images %}
                <label class="user-bg-card{% if config.imageId == image.id %} is-selected{% endif %}">
                  <input type="radio" name="imageId" value="{{ image.id }}" data-user-bg-option data-url="{{ image.url }}"{% if config.imageId == image.id %} checked{% endif %}>
                  <span class="user-bg-card__thumb" data-user-bg-lazy="{{ image.url }}"></span>
                  <span class="user-bg-card__body">
                    <span class="user-bg-card__name" title="{{ image.name }}">{{ image.name }}</span>
                    <span class="user-bg-card__meta">{{ image.sizeText }}</span>
                  </span>
                </label>
                {% endfor %}
              </div>
            </div>

            <div class="user-bg-field">
              <label class="user-bg-label">
                <span>背景透明度</span>
                <span class="user-bg-help"><span data-user-bg-opacity-text>{{ (config.opacity * 100)|round }}</span>%</span>
              </label>
              <div class="user-bg-range">
                <input type="range" name="opacity" min="0" max="1" step="0.01" value="{{ config.opacity }}" data-user-bg-opacity>
                <input class="textbox" value="{{ (config.opacity * 100)|round }}%" readonly data-user-bg-opacity-box>
              </div>
            </div>

            <button type="submit" class="rounded primary button">
              <span class="icon icon-save"></span> 保存设置
            </button>
          </form>
        </div>
      </div>

      <div class="user-bg-panel">
        <div class="user-bg-panel__head">
          <div class="user-bg-title"><span class="icon icon-preview"></span>预览 <span data-ui-help-anchor="user-background-help-0"></span></div>
        </div>
        <div class="user-bg-panel__body">
          <div class="user-bg-preview">
            <div class="user-bg-preview__image" data-user-bg-preview data-user-bg-lazy="{{ imageUrl }}" style="opacity:{{ config.opacity }}"></div>
          </div>
          <div data-ui-help="使用说明" data-ui-help-for="user-background-help-0" class="user-bg-preview__content">
            透明度只作用于背景图片，不会降低题面、按钮和表格本身的可读性。日常使用建议不高于 30%。
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}