{% load static %}
{% load i18n %}


<input type="hidden" name="view" id="filterView" value="">
  <div class="oh-dropdown__filter-body">
    <div class="oh-accordion">
      <div class="oh-accordion-header">{% trans "Key Result" %}</div>
      <div class="oh-accordion-body">
        <div class="row">
          <div class="col-sm-6">
            <div class="oh-input-group">
              <label class="oh-label">{% trans "Progress Type" %}</label>
              {{ f.form.progress_type }}
            </div>
          </div>
          <div class="col-sm-6">
            <div class="oh-input-group">
              <label class="oh-label">{% trans "Target Value" %}</label>
              {{ f.form.target_value }}
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-6">
            <div class="oh-input-group">
              <label class="oh-label">{% trans "Duration" %}</label>
              {{ f.form.duration }}
            </div>
          </div>
          <div class="col-sm-6">
            <div class="oh-input-group">
              <label class="oh-label">{% trans "Company" %}</label>
              {{ f.form.company_id }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="oh-dropdown__filter-footer">
    <button type="submit" class="oh-btn oh-btn--secondary oh-btn--small w-100 filterButton" id="filterSubmit">
      {% trans "Filter" %}
    </button>
  </div>

<script>
  $("#filterForm").submit(function (e) {
    var formData = $(this).serialize();
    count = 0;
    formData.split("&").forEach(function (field) {
      parts = field.split("=");
      value = parts[1];
      if (parts[0] !== "view"){
        if (value && value !== "unknown") {
          count++;
        }
      }
    });
    $("#filterCount").empty();
    if (count > 0) {
      $("#filterCount").text("(" + count + ")");
    }
    // $('#field').attr('hx-vals',`{'data':${formData}}` );
  });
</script>