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

<!-- FILE (EDIT) -->

{% if item.is_multi %}

<div class="mb-3 row">
    <label class="col-form-label col-sm-2">{{ item.displayname }}</label>
    <div class="form-check col-sm-10">
      Unsupported Multi-value
      <div class="form-text">{{item.dataformat }}</div>
    </div>
  </div>

{% else %}

<div class="mb-3 row">

    <label class="col-form-label col-sm-2">
        {{ item.displayname }}
    </label>
    
    <div class="form-check col-sm-10">   

        <div class="input-group mb-2">
            <input type="file" class="form-control" name="file-{{ item.fieldname}}" id="id-file-{{ item.fieldname }}">
            <span class="btn btn-outline-secondary" id="id-clear-{{ item.fieldname }}">X</span>
        </div>

        <div class="form-text mb-1"><i class="fa fa-upload ms-2 me-2"></i>{{ item.description|default:"upload" }}</div>
        
        {% if item.queryset.0.filename %}
        <div class="form-text mb-1">
            <i class="fa fa-file ms-2 me-2 mb-3"></i>
            <span id="id-current-{{ item.fieldname }}">
                {{ item.queryset.0.filename}} ({{ item.queryset.0.size}})
            </span>
            <input type="hidden" 
                id="id-hidden-{{ item.fieldname }}"
                name="current-{{ item.fieldname}}" 
                value="{{item.queryset.0.fileid}}">
        </div>
        {% endif %}
        

    </div>

    <script>
        document.getElementById("id-clear-{{ item.fieldname }}").addEventListener("click", clearInput_{{ item.fieldname }} );
        function clearInput_{{ item.fieldname }}(){
            document.getElementById("id-file-{{ item.fieldname }}").value = "";
            document.getElementById("id-hidden-{{ item.fieldname }}").value = "";
            document.getElementById("id-current-{{ item.fieldname }}").textContent = "";
        }
    </script>
</div>
{% endif %}








