[%# The form looks like:
  #
  # -- OR [+] --------------------
  # | -- AND [+] [NOT] --------- |
  # | | -- OR [+] ------------ | |
  # | | | field type value   | | |
  # | | | field type value   | | |
  # | | | ...                | | |
  # | | ---------------------| | |
  # | -------------------------- |
  # ------------------------------
  #
  # If there is just a single term inside some AND/OR, it is shown without fieldset.
  # So, if the whole chart consists of a single term, the form would look like:
  #
  # "field type value [OR] [AND] [NOT] [OR]"
  #
  # On [OR] [AND] etc clicks JavaScript turns the corresponding <div> into a <fieldset>.
  # %]

<p><strong><a name="chart">Advanced Searching Using Boolean Charts:</a></strong></p>

[% charts = default.charts %]
<div class="chart" id="boolean_chart_form">
[% chart_html = BLOCK %]

[% IF charts.size > 1 %]
<fieldset class="chart _or">
<legend class="_or">
  OR
  <input type="button" value="+" id="chartR-btn" onclick="chart_add(this.id)" />
  <input type="button" value="&#x2718;" class="chart_rm_button" id="rmR-btn" onclick="chart_rm(this)" />
</legend>
[% ELSE %]
<div class="chart" id="chartR">
[% END %]

[% FOREACH chart = charts %]
  [% C = loop.index %]

  [% IF C > 0 %]
  <div style="clear: both"></div>
  [% END %]

  [% IF chart.negate %]
  <fieldset class="chart _neg" id="negchart[% C %]">
    <legend class="_neg">
      NOT
      <input type="button" value="&#x2718;" id="unneg[% C %]-btn" onclick="chart_rm(this)" />
    </legend>
  [% END %]

  [% IF chart.rows.size > 1 %]
  <fieldset class="chart _and" id="chart[% C %]">
    <legend class="_and">
      AND
      <input type="button" value="+" id="chart[% C %]-btn" onclick="chart_add(this.id)" />
      <input type="button" value="&#x2718;" class="chart_rm_button" id="rm[% C %]-btn" onclick="chart_rm(this)" />
    </legend>
  [% ELSE %]
  <div class="chart" id="chart[% C %]">
  [% END %]

  [% FOREACH row = chart.rows %]
    [% I = loop.index %]

    [% IF row.size > 1 %]
    <fieldset class="chart _or" id="chart[% C %]-[% I %]">
      <legend class="_or">
        OR
        <input type="button" value="+" id="chart[% C %]-[% I %]-btn" onclick="chart_add(this.id)" />
        <input type="button" value="&#x2718;" class="chart_rm_button" id="rm[% C %]-[% I %]-btn" onclick="chart_rm(this)" />
      </legend>
    [% ELSE %]
    <div class="chart" id="chart[% C %]-[% I %]">
    [% END %]

    [% FOREACH col = row %]
    [% J = loop.index %]
    <div class="chart" id="chart[% C %]-[% I %]-[% J %]">
      [%- html_select("field$C-$I-$J", col.field, chart_fields) -%]
      [%- html_select("type$C-$I-$J", col.type, chart_types, lc_messages.operator_descs) -%]
      <input id="[% "value$C-$I-$J" %]" name="[% "value$C-$I-$J" %]" value="[% col.value | html %]" size="40" />
    </div>
    [% END %]

    [% IF row.size > 1 %]
    </fieldset>
    [% ELSE %]
      <input type="button" value="OR" id="chart[% C %]-[% I %]-btn" onclick="chart_add_second(this)" />
    </div>
    [% END %]

  [% END %]

  [% IF chart.rows.size == 1 %]
    <input type="button" value="AND" id="chart[% C %]-btn" onclick="chart_add_second(this)" />
  [% END %]
  [% IF chart.rows.size > 1 %]
    </fieldset>
  [% ELSE %]
    </div>
  [% END %]
  [% IF !chart.negate %]
    <input type="button" value="NOT" id="negate[% C %]-btn" onclick="chart_neg(this)" />
  [% ELSE %]
  </fieldset>
  [% END %]

  <input type="hidden" value="[% chart.negate ? '1' : '' %]" id="negate[% C %]" name="negate[% C %]" />
[% END %]

[% IF charts.size > 1 %]
</fieldset>
[% ELSE %]
  <input type="button" value="OR" id="chartR-btn" onclick="chart_add_second(this)" />
</div>
[% END %]

[% END %]
[% chart_html.replace('\s*\n\s*', '') %]
</div>
<input type="hidden" id="boolean_chart_form_save" />
<div style="clear: both"></div>

<script type="text/javascript" src="[% 'js/charts.js' | ts_url %]"></script>
