{% load static dynamicforms %}

{% if include_libs != False %}
<script src="{% static 'jquery_ui/js/jquery-3.3.1.min.js' %}"></script>
<link href="{% static 'jquery_ui/css/jquery-ui.min.css' %}" rel="stylesheet">
<link href="{% static 'jquery_ui/css/jquery-ui.structure.min.css' %}" rel="stylesheet">
<link href="{% static 'jquery_ui/css/jquery-ui.theme.min.css' %}" rel="stylesheet">
<script src="{% static 'jquery_ui/js/jquery-ui.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 %}
<link href="{% static "select2/select2-4.0.5/css/select2.min.css" %}" rel="stylesheet">
<script src="{% static "select2/select2-4.0.5/js/select2.min.js" %}"></script>
{% endif %}

<style>
  fieldset {
    border: none;
    padding: 0;
  }

  form fieldset {
    border-spacing: .4em;
  }

  .ui-dialog .ui-state-error {
    padding: .3em;
  }

  .ui-error-container {
    margin-bottom: .8em;
  }

  table {
    border-collapse: collapse;
  }

  table td {
    border-top: 1px solid #ddd;
    height: 2em;
    padding-left: .5em;
    padding-right: .5em;
  }

  table tr:nth-child(even):not(.dynamicforms-filterrow){
    background: rgba(0, 0, 0, .1)
  }

  table tr:nth-child(odd){
    background: rgba(255, 255, 255, .1)
  }

  .ui-widget-overlay {
    background: #aaaaaa;
    opacity: .3;
  }

  .add-btn {
    float: right;
  }

  .dynamicforms-actioncontrol {
    padding: 0 .25rem;
    display: inline-block;
  }

  .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;
  }

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

  .help-block {
    font-size: 75%;
    opacity: .5;
  }

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

  .dynamicforms-label {
      display: table-cell;
  }

  .dynamicforms-table-row {
    display: table-row;
  }

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

  .dynamicforms-inputs {
      width: 100%;
      box-sizing: border-box;
  }

  .dynamicforms-table-col {
      display: table-cell;
  }

  .dynamicforms-filterrow {
      height: 2.2em;
  }
</style>
