{% extends "admin/change_list.html" %}
{% load static %}

{% block extrastyle %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'django_easy_query_builder/query_builder.css' %}?v=20260312">
{% endblock %}

{% block extrahead %}
{{ block.super }}
{{ query_builder_frontend_config|json_script:"advanced-query-builder-config" }}
<script src="{% static 'django_easy_query_builder/query_builder.js' %}?v=20260312" defer></script>
{% endblock %}

{% block search %}
<div class="advanced-query-builder-admin">
  <div class="page-inner">
    <div class="layout">
      <section class="card">
        <div class="card-header">
          <div class="card-header-top">
            <div class="aqb-header-actions">
              <select id="advanced-query-view-select" class="aqb-saved-views-select" aria-label="Saved query views">
                <option value="">Saved views</option>
              </select>
              <button id="advanced-query-apply" class="btn btn-sm" type="button">Apply Query</button>
              <button id="advanced-query-save" class="btn btn-outline btn-sm" type="button">Save Query</button>
              <button id="advanced-query-clear" class="btn btn-outline btn-sm" type="button">Clear Query</button>
              <button
                id="preview-toggle"
                class="btn btn-outline btn-sm"
                type="button"
                aria-expanded="false"
                aria-controls="preview-wrapper"
              >
                Show Preview
              </button>
            </div>
          </div>
          <p class="card-description">Build nested filters and apply them to this changelist.</p>
        </div>
        <div class="card-content">
          <div id="query-root"></div>
        </div>
      </section>

      <section id="preview-wrapper" class="preview-wrapper is-hidden" aria-hidden="true">
        <div class="card preview-card">
          <div class="card-header">
          </div>
          <div class="card-content preview-content">
            <div class="preview-section">
              <h3 class="preview-heading">Readable Format</h3>
              <pre id="readable-preview" class="code-block">No conditions defined</pre>
            </div>
            <div class="preview-section">
              <h3 class="preview-heading">Django ORM (Generated)</h3>
              <pre id="django-preview" class="code-block">from django.db.models import Q

query = Q()</pre>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>

  <div id="save-query-modal" class="aqb-modal is-hidden" aria-hidden="true">
    <div class="aqb-modal-backdrop" data-modal-close></div>
    <div class="aqb-modal-dialog card" role="dialog" aria-modal="true" aria-labelledby="save-query-modal-title">
      <div class="card-header">
        <h3 id="save-query-modal-title" class="card-title">Save Query View</h3>
        <p class="card-description">Give this query a name so you can reuse it later.</p>
      </div>
      <form id="save-query-form" class="card-content aqb-modal-form">
        <input id="save-query-name" type="text" maxlength="120" placeholder="View name" required>
        <p id="save-query-mode-hint" class="aqb-modal-note is-hidden"></p>
        <p id="save-query-error" class="aqb-modal-error is-hidden"></p>
        <div class="aqb-modal-actions">
          <button id="save-query-cancel" class="btn btn-outline btn-sm" type="button">Cancel</button>
          <button id="save-query-save-as-new" class="btn btn-outline btn-sm" type="button">Save as New</button>
          <button id="save-query-update" class="btn btn-sm is-hidden" type="button">Update Existing</button>
        </div>
      </form>
    </div>
  </div>
</div>
{{ block.super }}
{% endblock %}