{% extends "admin/base_site.html" %}
{% load i18n %}
{% load static %}

{% block title %}{{ title }} | {% translate 'Django site admin' %}{% endblock %}

{% block extrahead %}
  {{ block.super }}
  {{ form.media }}
  <style>
    .archive-form-fields { display: flex; gap: 24px 16px; flex-wrap: wrap; }
    .archive-field { flex: 1 1 200px; }
    .archive-field label { display: block; margin-bottom: 6px; font-weight: 600; }
    .archive-field input[type="date"] { width: 100%; box-sizing: border-box; }
  </style>
{% endblock %}

{% block content %}
  <h1>{{ title }}</h1>
  <p>{% translate "指定归档截止日期（含），该日期之前的日志将由系统在后台执行归档。" %}</p>
  <form method="post" action="{% url archive_url_name %}">
    {% csrf_token %}
    <fieldset class="module aligned">
      {% if archive_date_presets %}
        <div class="archive-date-presets" style="display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:14px;">
          <span style="font-weight:600;">{% translate "快捷日期:" %}</span>
          {% for preset in archive_date_presets %}
            <button type="button" class="button archive-preset-btn" data-key="{{ preset.key }}">{{ preset.label }}</button>
          {% endfor %}
        </div>
      {% endif %}
      <div class="archive-form-fields" style="display:flex; gap:16px; flex-wrap:wrap;">
        {% for field in form.visible_fields %}
          <div class="form-row archive-field" style="flex:1 1 200px;">
            {{ field.errors }}
            <div>
              {{ field.label_tag }}
              {{ field }}
              {% if field.help_text %}<div class="help">{{ field.help_text|safe }}</div>{% endif %}
            </div>
          </div>
        {% endfor %}
      </div>
    </fieldset>
    <div class="submit-row">
      <input type="submit" value="{% translate '开始归档' %}" class="default">
    </div>
  </form>
  <script type="text/javascript">
    (function () {
      function isoDate(d) {
        var m = String(d.getMonth() + 1).padStart(2, "0");
        var day = String(d.getDate()).padStart(2, "0");
        return d.getFullYear() + "-" + m + "-" + day;
      }
      function weekdayStart(date, target) {
        var d = new Date(date.getTime());
        var diff = d.getDay() - target;
        if (diff < 0) diff += 7;
        d.setDate(d.getDate() - diff);
        return d;
      }
      function presetRange(key) {
        var today = new Date();
        today.setHours(0, 0, 0, 0);
        var yesterday = new Date(today.getTime() - 86400000);
        var monday = weekdayStart(today, 1);
        var lastMonday = weekdayStart(today, 1);
        lastMonday.setDate(lastMonday.getDate() - 7);
        var lastSunday = new Date(lastMonday.getTime() + 6 * 86400000);
        var monthStart = new Date(today.getFullYear(), today.getMonth(), 1);
        switch (key) {
          case "today": return [today, today];
          case "yesterday": return [yesterday, yesterday];
          case "this_week": return [monday, today];
          case "last_week": return [lastMonday, lastSunday];
          case "this_month": return [monthStart, today];
        }
        return null;
      }
      var presets = document.querySelectorAll(".archive-preset-btn");
      presets.forEach(function (btn) {
        btn.addEventListener("click", function () {
          var range = presetRange(btn.getAttribute("data-key"));
          if (!range) return;
          document.querySelectorAll("input[type='date']").forEach(function (input, i) {
            if (range[i]) input.value = isoDate(range[i]);
          });
        });
      });
    })();
  </script>
{% endblock %}