<label class="rich-input is-required mt-5">
    <div class="rich-input__label">{{ 'Váš životopis' }}</div>
    <div class="input-file-wrapper d-flex align-items-center justify-content-between">
        {{ form_widget(attachment, {
            'attr': {
                'class': 'input-file', 'accept': '.pdf,.doc,.docx',
                'style': 'max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 1;'
            }}) }}

        <button type="button" class="uploaded-files__file-remove mr-3" name="Odebrat soubor" style="display: none;">
            <svg>
                <use href="/build/svg/_icons.svg#close"></use>
            </svg>
        </button>
        {#    <svg id="attachmentErrorIcon" class="rich-input__error-icon"> #}
        {#        <use href="svg/_icons.svg#input-error"></use> #}
        {#    </svg> #}
    </div>
    <div id="attachmentErrorMsg" class="rich-input__error-msg" style="display: none;">
        {% trans %}Soubor přesahuje maximální velikost 5MB nebo není ve správném formátu.{% endtrans %}
    </div>
</label>

<script>
    (function () {
        const inputFile = document.querySelector('.input-file');
        const removeFileButton = document.querySelector('.uploaded-files__file-remove');
        const errorMsg = document.querySelector('#attachmentErrorMsg');
        // const errorIcon = document.querySelector('#attachmentErrorIcon');
        const maxFileSize = 5 * 1024 * 1024; // 5 MB
        const allowedFormats = ['application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'application/pdf'];

        inputFile.addEventListener('change', function () {
            errorMsg.style.display = 'none';
            // errorIcon.style.display = 'none';
            removeFileButton.style.display = 'none';

            if (inputFile.files.length > 0) {
                const file = inputFile.files[0];
                if (file.size > maxFileSize || !allowedFormats.includes(file.type)) {
                    errorMsg.style.display = 'block';
                    // errorIcon.style.display = 'block';
                    inputFile.value = '';
                } else {
                    removeFileButton.style.display = 'inline-block';
                }
            }
        });

        removeFileButton.addEventListener('click', function () {
            inputFile.value = '';
            removeFileButton.style.display = 'none';
            errorMsg.style.display = 'none';
            // errorIcon.style.display = 'none';
        });
    })();
</script>