{% load static dynamicforms %}
{% if include_libs != False %}
<script src="{% static 'jquery_ui/js/jquery-3.3.1.min.js' %}"></script>
<link href="{% static 'bootstrap-4.3.1-dist/css/bootstrap.min.css' %}" rel="stylesheet">
<script src="{% static 'bootstrap-4.3.1-dist/js/bootstrap.bundle.min.js' %}"></script>
{% endif %}
<script src="{% static 'dynamicforms/dynamicforms.js' %}"></script>
<script type="application/javascript">
  dynamicforms.DYNAMICFORMS = {{ DYNAMICFORMS|json }};
  dynamicforms.csrf_token = '{{ csrf_token }}';
</script>

{% if DYNAMICFORMS.use_select2 %}
  {% include DYNAMICFORMS.select2_include %}
{% endif %}

<style>
  .dynamicforms-actioncontrol {
    padding: 0 .25rem;
  }

  .dynamicforms-actioncontrol .btn {
    margin-top:    -.25rem;
    margin-right:  .5rem;
    padding:       .15rem .3rem;
    font-size:     .675rem;
    line-height:   1.1;
    border-radius: .13rem;
  }

  .dynamicforms-actioncontrol .btn img {
    margin: .05rem .25rem .05rem 0;
    width:  .75rem;
    height: .75rem;
  }

  .dynamicforms-filterrow label, .dynamicforms-filterrow span[id*="help-"] {
    display: none !important;
  }

  .dynamicforms-filterrow div {
    margin: 0;
  }

  .select2-container--bootstrap4 {
    /* otherwise select2s are too narrow */
    width: 100% !important;
  }

  .df-card {
    display: inline-block;
    margin: 1em;
  }

  input[type=number] {
    max-width: 8em;
  }

  @media (max-width: 991px) {
    .modal-lg {
      max-width: calc(100% - 2em);
    }
  }
</style>
