{% extends "admin/change_form.html" %}

{% block content %}
  {% if approval_pending_delete %}
    <div style="display:flex; align-items:flex-start; gap:12px; margin-bottom:16px; padding:14px 16px; border:1px solid #f5c2c7; border-left:4px solid #dc3545; border-radius:8px; background:#fdf2f3; color:#842029;">
      <span style="font-size:20px; line-height:1.3;">🗑️</span>
      <div>
        <div style="font-weight:600; font-size:15px; margin-bottom:2px;">Pending deletion</div>
        <div style="font-size:13px; opacity:0.85;">This object is marked for deletion and is awaiting approval. Editing is disabled until the request is approved or rejected.</div>
      </div>
    </div>
  {% endif %}
  {% if approval_pending %}
    <div style="margin-bottom:16px; padding:14px 16px; border:1px solid #ffe08a; border-left:4px solid #f0ad4e; border-radius:8px; background:#fff9e6; color:#664d03;">
      <div style="display:flex; align-items:flex-start; gap:12px;">
        <span style="font-size:20px; line-height:1.3;">⏳</span>
        <div>
          <div style="font-weight:600; font-size:15px; margin-bottom:2px;">Pending approval</div>
          <div style="font-size:13px; opacity:0.85;">These field changes are awaiting a reviewer's approval. Listed fields are locked, and the object cannot be deleted until each request is approved or rejected.</div>
        </div>
      </div>
      <table style="width:100%; margin-top:12px; border-collapse:collapse;">
        <thead>
          <tr>
            <th style="text-align:left; padding:6px 8px; border-bottom:1px solid #f0d98a;">Field</th>
            <th style="text-align:left; padding:6px 8px; border-bottom:1px solid #f0d98a;">Current → Requested</th>
            <th style="text-align:left; padding:6px 8px; border-bottom:1px solid #f0d98a;">Status</th>
            <th style="text-align:left; padding:6px 8px; border-bottom:1px solid #f0d98a;">Requested by</th>
          </tr>
        </thead>
        <tbody>
          {% for cr in approval_pending %}
            <tr>
              <td style="padding:6px 8px;">{{ cr.field_name }}</td>
              <td style="padding:6px 8px;">
                <span style="opacity:0.6;">{{ cr.old_value|default:"—" }}</span>
                &nbsp;→&nbsp;
                <strong>{{ cr.new_value|default:"—" }}</strong>
              </td>
              <td style="padding:6px 8px;">{{ cr.status }}</td>
              <td style="padding:6px 8px;">{{ cr.requested_by|default:"—" }}</td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  {% endif %}
  {{ block.super }}
{% endblock %}