{% load djblets_js i18n %}

<div class="conditions-field"{% if field_id %} id="{{field_id}}"{% endif %}>
 <input type="hidden" name="{{field_name}}_last_id" value="{{serialized_rows|length}}">
 <div class="conditions-field-mode">{{rendered_mode}}</div>
 <div class="conditions-field-rows-container">
  <ul class="conditions-field-rows">
{% for row in rendered_rows %}
   <li class="conditions-field-row">
    <span class="conditions-field-action conditions-field-row-delete">
     <span class="fa fa-minus-circle"></span>
    </span>
    <span class="conditions-field-row-options">
{%  if row.error %}
     <ul class="error-list"><li>{{row.error}}</li></ul>
{%  endif %}
     <span class="conditions-field-choice">{{row.choice}}</span>
     <span class="conditions-field-operator">{{row.operator}}</span>
     <span class="conditions-field-value"></span>
    </span>
   </li>
{% endfor %}
  </ul>
  <a href="#" class="conditions-field-add-condition">
   <span class="conditions-field-action">
    <span class="fa fa-plus-circle"></span>
   </span>
   <span>{% trans "Add a new condition" %}</span>
  </a>
 </div>
 <script>
(function($) {
    $(document).ready(function() {
        var view = new Djblets.Forms.ConditionSetView({
            el: $('#{{field_id|escapejs}}'),
            model: new Djblets.Forms.ConditionSet({
                fieldName: '{{field_name|escapejs}}',
                choicesData: {{serialized_choices|json_dumps}},
                conditionsData: {{serialized_rows|json_dumps}}
            }, {
                parse: true
            })
        });
        view.render();
    });
})($ || window.jQuery || django.jQuery);
 </script>
</div>
