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

{% block breadcrumbs %}
<div class="text-sm breadcrumbs">
  <ul>
    <li><a href="{% url 'admin:index' %}" class="link link-hover">{% translate 'Home' %}</a></li>
    <li><a href="{% url 'admin:app_list' app_label=opts.app_label %}" class="link link-hover">{{ opts.app_config.verbose_name }}</a></li>
    <li><a href="{% url opts|admin_urlname:'changelist' %}" class="link link-hover">{{ module_name }}</a></li>
    <li><a href="{% url opts|admin_urlname:'change' object.pk|admin_urlquote %}" class="link link-hover">{{ object|truncatewords:"18" }}</a></li>
    <li>{% translate 'History' %}</li>
  </ul>
</div>
{% endblock %}

{% block content %}
<div class="mt-4">
  <section class="form-hero p-6 md:p-8 mb-5">
    <div class="relative z-10 flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
      <div class="space-y-2">
        <p class="text-xs uppercase tracking-[0.3em] text-base-content/60">{% trans "Audit Log" %}</p>
        <h1 class="text-3xl font-semibold md:text-4xl">{{ object|truncatewords:"18" }}</h1>
        <p class="text-sm text-base-content/70">{{ opts.verbose_name_plural|capfirst }}</p>
      </div>
    </div>
  </section>

  <div id="content-main" class="border-base-200">
    <div class="card bg-base-100 border border-base-200">
      <div class="card-body p-0 sm:p-4">
        {% if action_list %}
        <div class="overflow-x-auto">
          <table class="table">
            <thead>
              <tr>
                <th>{% translate 'Date/time' %}</th>
                <th>{% translate 'User' %}</th>
                <th>{% translate 'Action' %}</th>
              </tr>
            </thead>
            <tbody>
              {% for action in action_list %}
              <tr class="hover:bg-base-200/50">
                <td class="text-sm">{{ action.action_time|date:"DATETIME_FORMAT" }}</td>
                <td>{{ action.user.get_username }}{% if action.user.get_full_name %} <span class="text-base-content/50">({{ action.user.get_full_name }})</span>{% endif %}</td>
                <td class="text-sm text-base-content/70">{{ action.get_change_message }}</td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
        <div class="flex flex-wrap items-center justify-between gap-3 p-4">
          {% if pagination_required %}
          <div class="join">
            {% for i in page_range %}
            {% if i == action_list.paginator.ELLIPSIS %}
            <button class="join-item btn btn-sm">...</button>
            {% elif i == action_list.number %}
            <button class="join-item btn btn-sm btn-primary">{{ i }}</button>
            {% else %}
            <a href="?{{ page_var }}={{ i }}" class="join-item btn btn-sm">{{ i }}</a>
            {% endif %}
            {% endfor %}
          </div>
          {% endif %}
          <span class="text-sm text-base-content/60">
            {{ action_list.paginator.count }} {% blocktranslate count counter=action_list.paginator.count %}entry{% plural %}entries{% endblocktranslate %}
          </span>
        </div>
        {% else %}
        <div class="flex flex-col items-center gap-3 py-12">
          <i class="fa-solid fa-clock-rotate-left text-4xl text-base-content/20"></i>
          <p class="text-base-content/50">{% translate 'This object doesn’t have a change history.' %}</p>
        </div>
        {% endif %}
      </div>
    </div>
  </div>
</div>
{% endblock %}