{% extends "django_qbe2/base.html" %}
{% load i18n static %}
{% block extrahead %}{{ block.super }}<script src="{% static 'django_qbe2/builder.js' %}" defer></script>{% endblock %}
{% block breadcrumbs %}<div class="breadcrumbs"><a href="{% url 'admin:index' %}">{% translate "Home" %}</a> &rsaquo; {% translate "Reports" %}</div>{% endblock %}
{% block content %}
<div class="qbe-workspace">
  <p><a href="{% url 'django_qbe2:saved_list' %}">{% translate "Saved queries" %}</a></p>
  {% if saved_query %}<p>{% translate "Editing a saved definition:" %} <strong>{{ saved_query.name }}</strong>. {% translate "Previewing does not save changes." %}</p>{% endif %}
  <p class="qbe-intro">{% translate "Choose the data you need. Add conditions, preview results, and export your report." %}</p>
  <p id="qbe-feedback" class="visually-hidden" role="status" aria-live="polite"></p>
  {% if has_reports %}
  <form method="get" action="{% url 'django_qbe2:builder' %}" class="qbe-report-picker">
    {{ form.report.as_field_group }}
    <button type="submit" class="button">{% translate "Choose report" %}</button>
  </form>
  {% url 'django_qbe2:results' as results_url %}
  <form method="post" action="{{ results_url }}" id="qbe-builder">
    {% csrf_token %}
    <input type="hidden" name="report" value="{{ form.report.value }}">
    {% if saved_query %}<input type="hidden" name="saved_query" value="{{ saved_query.pk }}">{% endif %}
    {% if form.errors %}<div role="alert" id="query-errors">{{ form.non_field_errors }}{{ form.report.errors }}</div>{% endif %}
    <section class="module qbe-section qbe-mode-picker">
      <h2>{% translate "Report type" %}</h2>
      {{ form.mode.errors }}{{ form.mode.as_field_group }}
      <button type="submit" name="action" value="apply_mode" class="button" formnovalidate>{% translate "Apply report type" %}</button>
      <p class="help">{% translate "Changing report type preserves the report and conditions, but resets columns, calculations and ordering. Saved queries change only when you explicitly update them." %}</p>
    </section>
    {% if form.mode.value == "summary" %}
    <section class="module qbe-section">
      <h2>{% translate "1. Grouping and calculations" %}</h2>
      <p>{% translate "Optionally group by fields, then choose the calculations to display." %}</p>
      {{ form.group_by.errors }}{{ form.group_by }}
      {{ form.metrics.management_form }}{{ form.metrics.non_form_errors }}
      <div id="metric-rows">{% for row in form.metrics %}<div class="qbe-row">{{ row.as_div }}</div>{% endfor %}</div>
      <button type="button" class="button qbe-add-row" data-prefix="metrics" data-added-message="{% translate 'Calculation added' %}" hidden>{% translate "Add calculation" %}</button>
      <button type="submit" name="action" value="add_metric" class="button qbe-server-add" formnovalidate>{% translate "Add calculation" %}</button>
      <template id="metrics-empty-form"><div class="qbe-row">{{ form.metrics.empty_form.as_div }}</div></template>
    </section>
    {% else %}
    <section class="module qbe-section">
      <h2>{% translate "1. Columns" %}</h2>
      <p>{% translate "Select the fields to include in your report." %}</p>
      {{ form.columns.errors }}{{ form.columns }}
    </section>
    {% endif %}
    <section class="module qbe-section">
      <h2>{% translate "2. Conditions" %}</h2>
      <p>{% translate "Choose AND to match all conditions, OR to match any, and NOT to exclude a group. Choose a listed value when options are available. For boolean values, use true or false." %}</p>
      {{ form.filters.management_form }}{{ form.filters.non_form_errors }}
      {{ form.groups.management_form }}{{ form.groups.non_form_errors }}
      <div id="filter-rows">{% include "django_qbe2/condition_group.html" with node=form.condition_groups only %}</div>
    </section>
    <section class="module qbe-section">
      <h2>{% translate "3. Ordering" %}</h2>
      {% if form.mode.value == "summary" %}
      {{ form.summary_ordering.management_form }}{{ form.summary_ordering.non_form_errors }}
      <div id="summary-ordering-rows">{% for row in form.summary_ordering %}<div class="qbe-row">{{ row.as_div }}</div>{% endfor %}</div>
      <button type="submit" name="action" value="add_summary_ordering" class="button qbe-server-add" formnovalidate>{% translate "Add ordering" %}</button>
      {% else %}
      {{ form.ordering.management_form }}{{ form.ordering.non_form_errors }}
      <div id="ordering-rows">{% for row in form.ordering %}<div class="qbe-row">{{ row.as_div }}</div>{% endfor %}</div>
      <button type="button" class="button qbe-add-row" data-prefix="ordering" data-added-message="{% translate 'Ordering added' %}" hidden>{% translate "Add ordering" %}</button>
      <template id="ordering-empty-form"><div class="qbe-row">{{ form.ordering.empty_form.as_div }}</div></template>
      {% endif %}
      {{ form.page_size.as_field_group }}
    </section>
    <div class="submit-row"><input type="submit" class="default" value="{% translate 'Preview report' %}"></div>
  </form>
  {{ field_data|json_script:"qbe-fields" }}
  {{ widget_labels|json_script:"qbe-widget-labels" }}
  {% else %}
  <div class="module qbe-empty" role="status"><h2>{% translate "No reports available" %}</h2><p>{% translate "Ask your administrator to register a report and grant you access." %}</p></div>
  {% endif %}
</div>
{% endblock %}