{% 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">
  <link href="{% static 'dynamicforms/dynamicforms_v4.css' %}" rel="stylesheet">
  <script src="{% static 'bootstrap-4.3.1-dist/js/bootstrap.bundle.min.js' %}"></script>
  <script src="{% static 'tinymce/v5.4.2/jquery.tinymce.min.js' %}"></script>
  <script src="{% static 'tinymce/v5.4.2/tinymce.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);
    }
  }

  /* ordering indicators in table header */
  th.ordering {
    cursor:      pointer;
    user-select: none;
  }

  .password-field {
    display:             inline-block;
    content:             "";
    background-image:    url("{% static '/dynamicforms/icons/eye-outline.svg' %}");
    background-repeat:   no-repeat;
    background-size:     1rem 1rem;
    background-color:    transparent;
    background-position: center;
  }

  .password-field-slash {
    display:             inline-block;
    content:             "";
    background-image:    url("{% static '/dynamicforms/icons/eye-off-outline.svg' %}");
    background-repeat:   no-repeat;
    background-size:     1rem 1rem;
    background-color:    transparent;
    background-position: center;
  }

  .progress-bar.indeterminate {
    position:  relative;
    animation: progress-indeterminate 3s linear infinite;
  }

  @keyframes progress-indeterminate {
    from {
      left:  -25%;
      width: 25%;
    }
    to {
      left:  100%;
      width: 25%;
    }
  }

</style>
