{% 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 mb-4">
                                <div class="control">
                                    {{ form.description }}
                                </div>
                            </div>

                            <div class="field mb-4">
                                {{ form.bank_account_model.help_text }}
                                <div class="control">
                                    {{ form.bank_account_model }}
                                </div>
                            </div>

                            <div class="field mb-4">
                                <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">
                                                {% trans '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 %}