[%# 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">

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

[% FOREACH chart = charts %]
  [% C = loop.count - 1 %]

  [% IF chart.rows.size > 1 %]
  <fieldset class="chart _and" id="chart[% C %]">
  <legend class="_and">AND
    <input type="button" value="+" class="chart_add_button" id="chart[% C %]-btn" onclick="chart_add(this.id)" />
    <input type="button" value="NOT" class="chart_not_[% chart.negate ? 'c' : 'u' %]" style="font-size: 85%" id="negate[% C %]-btn" onclick="chart_neg(this)" />
  </legend>
  [% ELSE %]
  <div class="chart" id="chart[% C %]">
  [% END %]

  [% FOREACH row = chart.rows %]
    [% I = loop.count - 1 %]

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

    [% FOREACH col = row %]
      [% J = loop.count - 1 %]
      [% "<br />" IF 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" />
    [% 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 %]
  </fieldset>
  [% ELSE %]
  <input type="button" value="AND" id="chart[% C %]-btn" onclick="chart_add_second(this)"
  /><input type="button" value="NOT" class="chart_not_[% chart.negate ? 'c' : 'u' %]"
      id="negate[% C %]-btn" onclick="chart_neg(this)" />
  </div>
  [% END %]
  <input type="hidden" value="[% chart.negate %]" 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 %]

</div>
<br style="clear: both" />

<script language="JavaScript" type="text/javascript" src="js/charts.js"></script>
