<div class="np-file-input-drop-container border r-m">
    <input type="file"
           id="{{ file_input_id }}"
           name="{{ file_input_id }}"
           {% if file_accept is not none %}accept="{{ file_accept }}"{% endif %}
           class="np-file-input-drop w-full p-xl"
           {% if file_multiple %}multiple{% endif %}>

    {% if file_upload_button or file_clear_button %}
        <p id="{{ file_input_id }}-text-drop"
           class="np-file-drop-text pt-s mb-s">
            {% if text_override == "" %}
                {% if file_multiple %}
                    {{ l10n("file.drop.select.multiple", "commons", user_lang) }}
                {% else %}
                    {{ l10n("file.drop.select.single", "commons", user_lang) }}
                {% endif %}
            {% else %}
                {{ text_override }}
            {% endif %}
        </p>

        <div class="np-file-drop-buttons pb-s">
            {% if file_upload_button %}
                <button id="{{ file_input_id }}-add" class="p-xs r-s border btn-primary np-file-drop-button">
                    <i class="fa-duotone fa-solid fa-cloud-arrow-up mr-xxs"></i>
                    {% if file_multiple %}
                        {{ l10n("file.drop.upload.multiple", "commons", user_lang) }}
                    {% else %}
                        {{ l10n("file.drop.upload.single", "commons", user_lang) }}
                    {% endif %}
                </button>
            {% endif %}

            {% if file_clear_button %}
                <button id="{{ file_input_id }}-reset" class="p-xs r-s border btn-warning np-file-drop-button">
                    {{ "<i class=\"fa-duotone fa-solid fa-trash mr-xs\"></i>" + l10n("file.drop.clear", "commons", user_lang) }}
                </button>
            {% endif %}
        </div>
    {% else %}
        <p class="np-file-drop-text py-l">
            {% if text_override == "" %}
                {% if file_multiple %}
                    {{ l10n("file.drop.select.multiple", "commons", user_lang) }}
                {% else %}
                    {{ l10n("file.drop.select.single", "commons", user_lang) }}
                {% endif %}
            {% else %}
                {{ text_override }}
            {% endif %}
        </p>
    {% endif %}
</div>
