{% extends "ishtar/forms/base_form.html" %}
{% load i18n table_form %}

{% block bs_form_inlines %}
<div class="card">
  <div class="card-body">
    <div class="w-100 pb-3 text-center">
      <div class="btn-group btn-group-toggle" data-toggle="buttons">
        <label class="btn btn-lg btn-secondary active">
          <input value="true" type="radio" name="planned-toggle" id="planned-toggle-true" autocomplete="off" checked>
          {% trans "Planned" %}
        </label>
        <label class="btn btn-lg btn-secondary">
          <input value="false" type="radio" name="planned-toggle" id="planned-toggle-false" autocomplete="off">
          {% trans "Worked" %}
        </label>
      </div>
    </div>
    <div class="w-100 pb-3 text-center">
       <button class="btn btn-secondary btn-sm form-planned" type="button">{% trans "Add default costs" %}</button>
    </div>
    <div class="w-100 pb-3 text-center">
      <button class="btn btn-secondary btn-sm form-worked" type="button">{% trans "Copy planned costs" %}</button>
    </div>
    {{block.super}}
  </div>
</div>
{% endblock %}

{# <script type='text/javascript'> #}
{% block end_js %}
  {{block.super}}
  var check_planned_value = function() {
    if (this.value == 'false'){
      $(".form-planned").parent().hide()
      $(".form-worked").parent().show()
    } else {
      $(".form-planned").parent().show()
      $(".form-worked").parent().hide()
    }
  };
  $('input[type=radio][name=planned-toggle]').change(check_planned_value);
  $(document).ready(check_planned_value);
{% endblock %}
{# </script> #}