{% extends "base.html" %}

{% block title %}سطل زباله{% endblock %}

{% block content %}
<div class="container" dir="rtl">
  <div class="page-header" style="display:flex;justify-content:space-between;align-items:center;gap:1rem;">
    <h1 style="margin:0;">سطل زباله</h1>
    <div class="muted">
      <span>درس‌ها: {{ totals.lessons }}</span>
      <span style="margin-inline:0.75rem;">|</span>
      <span>نسخه‌ها: {{ totals.releases }}</span>
    </div>
  </div>

  {% if groups %}
    <div class="recycle-groups" style="margin-top:1rem;display:grid;grid-template-columns:1fr;gap:1rem;">
      {% for g in groups %}
        {% with lesson=g.lesson %}
        <div class="card" style="border:1px solid var(--border-color, #e5e7eb); border-radius:12px; padding:1rem;">
          <div class="card-header" style="display:flex;justify-content:space-between;align-items:center;gap:1rem;">
            <div>
              <h3 style="margin:0 0 .25rem 0;">درس #{{ lesson.pk }}</h3>
              <div class="muted">
                نویسنده: {{ lesson.author }} &middot;
                نسخهٔ فعال: {{ lesson.active_version|default:"—" }} &middot;
                آخرین بروزرسانی: {{ lesson.updated_at|date:"Y-m-d H:i" }}
              </div>
            </div>

            <div style="display:flex;align-items:center;gap:.5rem;">
              {% if g.lesson_is_deleted %}
                <span class="badge" style="background:#fee2e2;color:#991b1b;border-radius:999px;padding:.25rem .6rem;font-weight:600;">حذف شده</span>

                <form method="post"
                      action="{% url 'restore_lesson' lesson.pk %}"
                      style="margin:0;">
                  {% csrf_token %}
                  <input type="hidden" name="next" value="{{ request.get_full_path }}">
                  <button type="submit"
                          class="btn btn-sm"
                          style="background:#10b981;color:white;border:none;border-radius:8px;padding:.35rem .7rem;">
                    بازیابی درس
                  </button>
                </form>
              {% else %}
                <span class="badge" style="background:#e0f2fe;color:#075985;border-radius:999px;padding:.25rem .6rem;font-weight:600;">فعال</span>
              {% endif %}
            </div>
          </div>

          <div class="card-body" style="margin-top:0.75rem;">
            <h4 style="margin:.25rem 0 .5rem 0;">نسخه‌های حذف شده</h4>

            {% if g.deleted_releases %}
              <div class="table-responsive">
                <table class="table" style="width:100%;border-collapse:collapse;">
                  <thead>
                    <tr style="text-align:right;border-bottom:1px solid var(--border-color, #e5e7eb);">
                      <th style="padding:.5rem;">نسخه</th>
                      <th style="padding:.5rem;">عنوان</th>
                      <th style="padding:.5rem;">برچسب</th>
                      <th style="padding:.5rem;">رنگ</th>
                      <th style="padding:.5rem;">ایجاد</th>
                      <th style="padding:.5rem;">حذف</th>
                      <th style="padding:.5rem;">اقدامات</th>
                    </tr>
                  </thead>
                  <tbody>
                    {% for r in g.deleted_releases %}
                      <tr style="border-bottom:1px solid var(--table-row-border, #f3f4f6);">
                        <td style="padding:.5rem;white-space:nowrap;">{{ r.version_str }}</td>
                        <td style="padding:.5rem;">{{ r.title }}</td>
                        <td style="padding:.5rem;">{{ r.label }}</td>
                        <td style="padding:.5rem;">
                          {% if r.color %}
                            <span title="{{ r.color }}" style="display:inline-block;width:1.25rem;height:1rem;border:1px solid #d1d5db;vertical-align:middle;background:{{ r.color }}"></span>
                            <small style="margin-inline-start:.4rem;vertical-align:middle;">{{ r.color }}</small>
                          {% else %}—{% endif %}
                        </td>
                        <td style="padding:.5rem;white-space:nowrap;">{{ r.created_at|date:"Y-m-d H:i" }}</td>
                        <td style="padding:.5rem;white-space:nowrap;">{{ r.deleted_at|date:"Y-m-d H:i" }}</td>

                        <td style="padding:.5rem;white-space:nowrap;">
                          <form method="post"
                                action="{% url 'restore_release' lesson.pk r.major r.minor r.patch %}"
                                style="display:inline-block;margin:0;">
                            {% csrf_token %}
                            <input type="hidden" name="next" value="{{ request.get_full_path }}">
                            <input type="hidden" name="auto_restore_lesson" value="1">
                            <button type="submit"
                                    class="btn btn-xs"
                                    style="background:#3b82f6;color:white;border:none;border-radius:8px;padding:.3rem .6rem;">
                              بازگردانی
                            </button>
                          </form>
                        </td>
                      </tr>
                    {% endfor %}
                  </tbody>
                </table>
              </div>
            {% else %}
              <div class="muted">هیچ نسخهٔ حذف‌شده‌ای برای این درس وجود ندارد.</div>
            {% endif %}
          </div>
        </div>
        {% endwith %}
      {% endfor %}
    </div>
  {% else %}
    <div class="empty" style="margin-top:2rem;text-align:center;color:#6b7280;">
      چیزی در سطل زباله نیست.
    </div>
  {% endif %}
</div>
{% endblock %}