{% extends "fellchensammlung/base.html" %}

{% load i18n %}
{% load widget_tweaks %}

{% block content %}
    <div class="block">
        <p>
            {% blocktranslate %}
                Lade hier ein Foto hoch. Füge bitte eine Bildbeschreibung hinzu,
                damit die Fotos auch für blinde und sehbehinderte Personen zugänglich sind.
            {% endblocktranslate %}
        </p>
    </div>
    <div class="block">
        <form method="post" enctype="multipart/form-data">
            {% csrf_token %}
            <div class="file has-name is-boxed is-primary is-">
                <label class="file-label" for="image">
                    {{ form.image|add_class:"file-input"|attr:"id:image" }}
                    <span class="file-cta">
                          <span class="file-icon">
                            <i class="fas fa-upload"></i>
                          </span>
                          <span class="file-label">{{ form.image.help_text }}</span>
                    </span>
                    <span class="file-name" id="image-upload-filename">...</span>
                </label>
            </div>

            <!--- Image Preview: Only shown if image gets selected --->
            <div class="field" id="image-preview-wrapper" style="display: none;">
                <label class="label">{% translate "Vorschau" %}</label>
                <div class="box has-text-centered">
                    <figure class="image is-256x256 is-inline-block">
                        <img id="image-preview" src="" alt="{% translate 'Bildvorschau' %}" class="is-rounded">
                    </figure>
                </div>
            </div>

            <div class="field">
                <label class="label" for="alt-text">{{ form.alt_text.label }}</label>
                {{ form.alt_text|add_class:"textarea"|attr:"id:alt-text"|attr:"rows:3" }}
                <div class="help">
                    {{ form.alt_text.help_text }}
                </div>
                <div class="is-danger">{{ form.alt_text.errors }}</div>
            </div>
            <input class="button is-primary" type="submit" value="{% translate "Speichern" %}">
        </form>
    </div>

    <div class="block">
        <a class="button is-info is-warning is-fullwidth" target="_blank"
           href="https://www.dbsv.org/bildbeschreibung-4-regeln.html">
            <i class="fa-solid fa-link fa-fw"></i> {% translate 'Anleitung für Bildbeschreibungen' %}
        </a>
    </div>


    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const input = document.getElementById("image");
            const previewWrapper = document.getElementById("image-preview-wrapper");
            const preview = document.getElementById("image-preview");
            const filename = document.getElementById("image-upload-filename");

            input.addEventListener("change", function () {
                const file = this.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function (e) {
                        preview.src = e.target.result;
                        previewWrapper.style.display = "block";
                        filename.innerText = file.name;
                    }
                    reader.readAsDataURL(file);
                } else {
                    preview.src = "";
                    previewWrapper.style.display = "none";
                }
            });
        });
    </script>

{% endblock %}