{{define "admin/attachments.html"}}
{{template "admin/layout_head" .}}
<div class="cs-admin-page">
{{template "admin_pagehead" (dict "Icon" "bx-paperclip" "Title" (T "admin.attachments.title") "Desc" (T "admin.attachments.page_desc"))}}

{{with index .Data "Notice"}}<div class="alert alert-success alert-dismissible fade show py-2 mb-3"><button type="button" class="btn-close" data-bs-dismiss="alert"></button>{{.}}</div>{{end}}
{{with index .Data "Err"}}<div class="alert alert-danger py-2 mb-3">{{.}}</div>{{end}}

<div class="row g-3 mb-3">
  <div class="col-12 col-sm-6 col-xl-3">
    <div class="card cs-admin-section admin-stat-card border-0 h-100">
      <div class="cs-admin-section__body">
        <div class="admin-stat-label"><i class="bx bx-paperclip me-1"></i>{{T "admin.attachments.stat_total"}}</div>
        <div class="admin-stat-value">{{(index .Data "Stats").TotalCount}}</div>
        <div class="small text-muted mt-1">{{index .Data "TotalSizeLabel"}}</div>
      </div>
    </div>
  </div>
  <div class="col-12 col-sm-6 col-xl-3">
    <div class="card cs-admin-section admin-stat-card border-0 h-100">
      <div class="cs-admin-section__body">
        <div class="admin-stat-label"><i class="bx bx-image me-1"></i>{{T "admin.attachments.stat_images"}}</div>
        <div class="admin-stat-value">{{(index .Data "Stats").ImageCount}}</div>
        <div class="small text-muted mt-1">{{index .Data "ImageSizeLabel"}}</div>
      </div>
    </div>
  </div>
  <div class="col-12 col-sm-6 col-xl-3">
    <div class="card cs-admin-section admin-stat-card border-0 h-100">
      <div class="cs-admin-section__body">
        <div class="admin-stat-label"><i class="bx bx-file me-1"></i>{{T "admin.attachments.stat_files"}}</div>
        <div class="admin-stat-value">{{(index .Data "Stats").FileCount}}</div>
        <div class="small text-muted mt-1">{{index .Data "FileSizeLabel"}}</div>
      </div>
    </div>
  </div>
  <div class="col-12 col-sm-6 col-xl-3">
    <div class="card cs-admin-section admin-stat-card border-0 h-100">
      <div class="cs-admin-section__body">
        <div class="admin-stat-label"><i class="bx bx-calendar me-1"></i>{{T "admin.attachments.stat_today"}}</div>
        <div class="admin-stat-value">{{(index .Data "Stats").TodayCount}}</div>
        <div class="small text-muted mt-1">{{T "admin.attachments.stat_today_hint"}}</div>
      </div>
    </div>
  </div>
</div>

<div class="cs-admin-section mb-3">
  <div class="cs-admin-section__head">
    <div class="cs-admin-section__head-icon cs-admin-section__head-icon--sky"><i class="bx bx-timer"></i></div>
    <div class="cs-admin-section__head-text">
      <h2 class="cs-admin-section__head-title">{{T "admin.attachments.auto_title"}}</h2>
      <p class="cs-admin-section__head-sub">{{T "admin.attachments.auto_sub"}}</p>
    </div>
  </div>
  <div class="cs-admin-section__body">
    <form method="post" action="/admin/attachments" class="row g-2 align-items-end" id="retentionForm">
      <input type="hidden" name="action" value="save_retention">
      <div class="col-auto">
        <label class="form-label" for="attachmentRetentionDays">{{T "admin.attachments.retention_days"}}</label>
        <input type="number" class="form-control form-control-sm" id="attachmentRetentionDays" name="attachment_retention_days" min="0" max="3650" value="{{index .Data "RetentionDays"}}" style="width:8rem">
      </div>
      <div class="col-auto">
        <button type="submit" class="btn btn-sm btn-primary"><i class="bx bx-save me-1"></i>{{T "admin.attachments.save"}}</button>
      </div>
    </form>
    <form method="post" action="/admin/attachments" class="mt-3" id="purgeForm">
      <input type="hidden" name="action" value="purge_now">
      <button type="submit" class="btn btn-sm btn-outline-danger" {{if le (index .Data "RetentionDays") 0}}disabled{{end}}><i class="bx bx-trash me-1"></i>{{T "admin.attachments.purge_older_prefix"}} {{index .Data "RetentionDays"}} {{T "admin.attachments.purge_older_suffix"}}</button>
      {{if le (index .Data "RetentionDays") 0}}<span class="small text-muted ms-2">{{T "admin.attachments.cleanup_need_days"}}</span>{{end}}
    </form>
  </div>
</div>

<div class="cs-admin-section">
  <div class="cs-admin-section__head">
    <div class="cs-admin-section__head-icon cs-admin-section__head-icon--violet"><i class="bx bx-list-ul"></i></div>
    <div class="cs-admin-section__head-text">
      <h2 class="cs-admin-section__head-title">{{T "admin.attachments.list"}}</h2>
      <p class="cs-admin-section__head-sub">{{printf (T "admin.attachments.pager") (index .Data "Total") (index .Data "Page") (index .Data "TotalPages")}}</p>
    </div>
  </div>
  <div class="cs-admin-section__body">
    <form method="get" action="/admin/attachments" class="row g-2 align-items-end mb-3">
      <div class="col-auto">
        <label class="form-label">{{T "admin.attachments.col_type"}}</label>
        <select class="form-select form-select-sm" name="type">
          <option value="" {{if eq (index .Data "FilterType") ""}}selected{{end}}>{{T "admin.attachments.filter_all"}}</option>
          <option value="image" {{if eq (index .Data "FilterType") "image"}}selected{{end}}>{{T "admin.attachments.stat_images"}}</option>
          <option value="file" {{if eq (index .Data "FilterType") "file"}}selected{{end}}>{{T "admin.attachments.stat_files"}}</option>
        </select>
      </div>
      <div class="col-auto">
        <label class="form-label">{{T "admin.attachments.col_name"}}</label>
        <input type="search" class="form-control form-control-sm" name="q" value="{{index .Data "FilterQ"}}" placeholder="{{T "admin.attachments.search_ph"}}" maxlength="80">
      </div>
      <div class="col-auto">
        <button type="submit" class="btn btn-sm btn-outline-secondary">{{T "admin.attachments.filter"}}</button>
      </div>
    </form>
    <form method="post" action="/admin/attachments" id="deleteForm">
      <input type="hidden" name="action" value="delete">
      <div class="table-responsive">
        <table class="table table-hover mb-0 align-middle">
          <thead class="table-light">
            <tr>
              <th style="width:2.5rem"><input type="checkbox" class="form-check-input" id="checkAllAttach" title="{{T "admin.attachments.select_all"}}"></th>
              <th>{{T "admin.attachments.preview"}}</th>
              <th>{{T "admin.attachments.col_name"}}</th>
              <th>{{T "admin.attachments.col_type"}}</th>
              <th>{{T "admin.attachments.col_size"}}</th>
              <th>{{T "admin.attachments.col_site"}}</th>
              <th>{{T "admin.attachments.uploader"}}</th>
              <th>{{T "admin.attachments.session"}}</th>
              <th>{{T "admin.attachments.time"}}</th>
            </tr>
          </thead>
          <tbody>
          {{range index .Data "Rows"}}
            <tr>
              <td><input type="checkbox" class="form-check-input attach-pick" name="ids" value="{{.id}}"></td>
              <td>
                {{if eq .msg_type "image"}}
                <a href="/uploads/{{.storage_key}}" target="_blank" rel="noopener"><img src="/uploads/{{.storage_key}}" alt="" style="max-width:64px;max-height:40px;object-fit:cover;border-radius:4px"></a>
                {{else}}
                <a class="small" href="/uploads/{{.storage_key}}" target="_blank" rel="noopener">{{T "admin.attachments.open"}}</a>
                {{end}}
              </td>
              <td class="small" style="max-width:16rem;word-break:break-all">{{.file_name}}</td>
              <td>
                {{if eq .msg_type "image"}}<span class="badge rounded-pill text-bg-info">{{T "admin.attachments.stat_images"}}</span>
                {{else}}<span class="badge rounded-pill text-bg-secondary">{{T "admin.attachments.stat_files"}}</span>{{end}}
              </td>
              <td class="small text-muted">{{.size_label}}</td>
              <td class="small">{{if .site_name}}{{.site_name}}{{else}}—{{end}}</td>
              <td class="small">
                {{if eq (asInt .uploader_type) 1}}{{T "admin.attachments.uploader_visitor"}}{{else if eq (asInt .uploader_type) 2}}{{T "admin.attachments.uploader_agent"}}{{else}}—{{end}}
                {{if .username}}<span class="text-muted"> · {{privacy "username" .username}}</span>{{end}}
              </td>
              <td class="small text-muted">{{if gt (asInt .session_id) 0}}#{{.session_id}}{{else}}—{{end}}</td>
              <td class="small text-muted">{{unixTime .created_at}}</td>
            </tr>
          {{else}}
            <tr><td colspan="9" class="text-center text-muted py-4">{{T "admin.attachments.empty"}}</td></tr>
          {{end}}
          </tbody>
        </table>
      </div>
      <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mt-3">
        <button type="submit" class="btn btn-sm btn-outline-danger" id="btnDeleteAttach"><i class="bx bx-trash me-1"></i>{{T "admin.attachments.delete_selected"}}</button>
        <div class="btn-group btn-group-sm">
          {{if index .Data "HasPrev"}}<a class="btn btn-outline-secondary" href="{{index .Data "PrevURL"}}">{{T "admin.attachments.prev"}}</a>{{else}}<span class="btn btn-outline-secondary disabled">{{T "admin.attachments.prev"}}</span>{{end}}
          {{if index .Data "HasNext"}}<a class="btn btn-outline-secondary" href="{{index .Data "NextURL"}}">{{T "admin.attachments.next"}}</a>{{else}}<span class="btn btn-outline-secondary disabled">{{T "admin.attachments.next"}}</span>{{end}}
        </div>
      </div>
    </form>
  </div>
</div>
</div>
<script>
(function () {
  var all = document.getElementById('checkAllAttach');
  var picks = document.querySelectorAll('.attach-pick');
  if (all) {
    all.addEventListener('change', function () {
      picks.forEach(function (el) { el.checked = all.checked; });
    });
  }
  var del = document.getElementById('deleteForm');
  if (del) {
    del.addEventListener('submit', function (e) {
      var n = document.querySelectorAll('.attach-pick:checked').length;
      if (!n) {
        e.preventDefault();
        if (window.adminBsAlert) window.adminBsAlert({ title: {{jsString (T "admin.attachments.alert_title")}}, message: {{jsString (T "admin.attachments.select_one")}} });
        return;
      }
      if (!window.adminBsConfirm) return;
      e.preventDefault();
      window.adminBsConfirm({
        title: {{jsString (T "admin.attachments.del_title")}},
        message: {{jsString (T "admin.attachments.confirm_del_selected_prefix")}} + n + {{jsString (T "admin.attachments.confirm_del_selected_suffix")}},
        okText: {{jsString (T "admin.attachments.delete")}},
        okClass: 'btn-danger'
      }).then(function (ok) { if (ok) del.submit(); });
    });
  }
  var purge = document.getElementById('purgeForm');
  if (purge) {
    purge.addEventListener('submit', function (e) {
      if (!window.adminBsConfirm) return;
      e.preventDefault();
      window.adminBsConfirm({
        title: {{jsString (T "admin.attachments.cleanup_now")}},
        message: {{jsString (T "admin.attachments.confirm_purge_old")}},
        okText: {{jsString (T "admin.attachments.cleanup_ok")}},
        okClass: 'btn-danger'
      }).then(function (ok) { if (ok) purge.submit(); });
    });
  }
})();
</script>
{{template "admin/layout_foot" .}}
{{end}}