djLint/tests/django_ledger/data_import_ofx.html

{% extends 'django_ledger/layouts/content_layout_1.html' %}
{% load i18n %}
{% load static %}
{% load django_ledger %}
{% block view_content %}
    <div class="columns is-centered">
        <div class="column is-8-tablet">
            <div class="box">
                <div class="columns is-centered">
                    <div class="column is-8-tablet ">
                        <form action="{% url 'django_ledger:data-import-ofx' entity_slug=view.kwargs.entity_slug %}"
                              enctype="multipart/form-data"
                              method="post">
                            {% csrf_token %}
                            <div class="field">
                                <div class="control">
                                    <div id="file-js-django-ledger" class="file has-name">
                                        <label class="file-label">
                                            {{ form.ofx_file }}
                                            <span class="file-cta">
                                                <span class="icon is-medium">{% icon 'bi:cloud-upload-fill' 24 %}</span>
                                                <span class="file-label">{{ form.ofx_file.label }}</span>
                                            </span>
                                            <span class="file-name">No file uploaded</span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="field">
                                <div class="control">
                                    <button class="button is-dark is-fullwidth is-outlined" type="submit">
                                        {% trans 'Upload' %}
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block script_bottom %}
    {{ block.super }}
    <script>
        const fileInput = document.querySelector('#file-js-django-ledger input[type=file]');
        fileInput.onchange = () => {
            if (fileInput.files.length > 0) {
                const fileName = document.querySelector('#file-js-django-ledger .file-name');
                fileName.textContent = fileInput.files[0].name;
            }
        }
    </script>
{% endblock %}