{% extends 'base.html' %}

{% block content %}
  <section class="hero-card">
    <div>
      <p class="eyebrow">Docker Images</p>
      <h2>Docker 目录图片管理</h2>
      <p class="lead">这里会统一展示当前 Docker 本地目录中的用户提交图，以及历史遗留的任务/线索本地图，方便集中预览、下载与清理。新建任务主图与线索图现在使用外部图片链接，不再上传到这里。</p>
    </div>
    <div class="hero-badges">
      <span class="pill">总图片 {{ summary.total_count }}</span>
      <span class="pill">系统引用 {{ summary.referenced_count }}</span>
      <span class="pill">孤立图片 {{ summary.orphan_count }}</span>
    </div>
  </section>

  <section class="glass-card form-panel wide-panel">
    <div class="section-head compact-head">
      <div>
        <p class="eyebrow">Storage Root</p>
        <h3>图片目录</h3>
        <p class="mini-note">{{ summary.docker_root }}</p>
      </div>
      <form method="get" action="/admin/images" class="inline-form inline-form-wide">
        <label>
          <span>筛选范围</span>
          <select name="scope">
            <option value="all" {% if scope == 'all' %}selected{% endif %}>全部图片</option>
            <option value="tasks" {% if scope == 'tasks' %}selected{% endif %}>历史任务与线索图</option>
            <option value="submissions" {% if scope == 'submissions' %}selected{% endif %}>用户提交图</option>
            <option value="referenced" {% if scope == 'referenced' %}selected{% endif %}>系统引用中</option>
            <option value="orphan" {% if scope == 'orphan' %}selected{% endif %}>孤立图片</option>
          </select>
        </label>
        <button class="btn btn-secondary" type="submit">应用筛选</button>
      </form>
    </div>
  </section>

  <section class="image-library-grid">
    {% for item in image_items %}
      <article class="glass-card image-library-card">
        <img class="image-library-thumb" src="{{ item.preview_url }}" alt="{{ item.file_name }}" />
        <div class="image-library-body">
          <strong>{{ item.file_name }}</strong>
          <p class="muted image-library-path">{{ item.relative_path }}</p>
          <div class="chip-row">
            <span class="chip">{{ item.category }}</span>
            <span class="chip">{{ item.size_label }}</span>
            <span class="chip">{{ item.modified_at }}</span>
            <span class="status-badge {% if item.is_referenced %}status-approved{% else %}status-rejected{% endif %}">
              {{ '已引用' if item.is_referenced else '孤立图片' }}
            </span>
          </div>
          <div class="stack-list compact-stack-list">
            {% for label in item.reference_labels %}
              <div class="stack-item stack-item-block compact-stack-item">
                <p class="muted">{{ label }}</p>
              </div>
            {% else %}
              <p class="muted">当前没有系统记录引用这张图片，可以在确认后清理。</p>
            {% endfor %}
          </div>
          <div class="card-footer image-library-actions">
            <a class="btn btn-ghost small-btn" href="{{ item.download_url }}">下载图片</a>
            {% if not item.is_referenced %}
              <form method="post" action="/admin/images/delete" class="inline-form">
                <input type="hidden" name="relative_path" value="{{ item.relative_path }}" />
                <input type="hidden" name="scope" value="{{ scope }}" />
                <button class="btn btn-danger small-btn" type="submit" onclick="return confirm('确认删除这张未被系统引用的图片吗？');">删除图片</button>
              </form>
            {% endif %}
          </div>
        </div>
      </article>
    {% else %}
      <article class="glass-card empty-state">
        <h3>当前筛选下没有图片</h3>
        <p>可以切换筛选范围，或者等待用户上传新的打卡图片。</p>
      </article>
    {% endfor %}
  </section>
{% endblock %}