{% extends "wagtailadmin/base.html" %}
{% load wagtailadmin_tags i18n %}

{% block content %}
	<div class="w-header">
		<div class="w-header__container nice-padding w-flex w-flex-row w-items-center w-justify-between w-gap-4">
			<div class="w-header__title w-mt-8 w-mb-8">
				<h1 class="w-header__title__text">
					{% blocktrans with tag_name=tag.name %}Objects using tag: {{ tag_name }}{% endblocktrans %}
				</h1>
			</div>

		<form method="get" class="w-flex w-gap-2 w-items-center w-mr-4">
      <div class="w-field__input">
        <svg class="icon icon-search w-field__icon" aria-hidden="true">
          <use href="#icon-search"></use>
        </svg>
        <input
          type="text"
          name="q"
          placeholder="{% trans 'Search objects' %}"
          value="{{ request.GET.q }}"
          id="id_q"
          class="w-input"
        />
      </div>
    </form>
	</div>
</div>

  <div class="nice-padding">
    {% if object_list %}
      <form method="post">
        {% csrf_token %}
        <table class="listing">
          <thead>
            <tr>
              <th class="select"><input type="checkbox" class="bulk-select-all" id="bulk-select-all"></th>
              <th>{% trans "Title" %}</th>
              <th>{% trans "Object Type" %}</th>
              <th>{% trans "Last Edited" %}</th>
            </tr>
          </thead>
          <tbody>
            {% for item in object_list %}
						{% with page=item.obj %}
						<tr>
							<td class="select">
								<input type="checkbox" name="selected_items" value="{{ page.pk }}" class="bulk-select-item">
							</td>
							<td>
								{% if item.edit_url %}
									<a href="{{ item.edit_url }}">{{ page }}</a>
								{% else %}
									{{ page }}
								{% endif %}
							</td>
							<td>{{ item.model_name }}</td>
							<td>
								{% if page.latest_revision_created_at %}
									{{ page.latest_revision_created_at|date:"SHORT_DATETIME_FORMAT" }}
								{% else %}
									—
								{% endif %}
							</td>
						</tr>
						{% endwith %}
					{% endfor %}
          </tbody>
        </table>

        <div class="bulk-actions">
          <div class="bulk-actions__select">
            <button type="submit" name="action" value="remove_tag" class="button">
              {% trans "Remove Tag from Selected Objects" %}
            </button>

            {% if can_add_pages %}
              <a href="{% url 'wagtail_tagmanager_add_pages' tag.id %}" class="button button-secondary">
                {% trans "Add pages to this tag" %}
              </a>
            {% endif %}
						<a href="{{ edit_url }}" class="button button-secondary">
							{% trans "Back to edit tag" %}
						</a>
          </div>
        </div>

        {% include "wagtailadmin/shared/pagination_nav.html" with items=page_obj %}
      </form>

    {% else %}
      <p>{% trans "No objects are currently tagged with this tag." %}</p>

      <div class="bulk-actions">
        <div class="bulk-actions__select">
          <a href="{% url 'wagtail_tagmanager_add_pages' tag.id %}" class="button button-secondary">
            {% trans "Add pages to this tag" %}
          </a>
					<a href="{{ edit_url }}" class="button button-secondary">
						{% trans "Back to edit tag" %}
					</a>
        </div>
      </div>
    {% endif %}
  </div>
{% endblock %}

{% block extra_js %}
  <script>
    document.addEventListener("DOMContentLoaded", function () {
      const selectAll = document.getElementById("bulk-select-all");
      if (!selectAll) return;
      selectAll.addEventListener("change", () => {
        document.querySelectorAll(".bulk-select-item").forEach(cb => {
          cb.checked = selectAll.checked;
        });
      });
    });
  </script>
{% endblock %}
