<div id="asset-upload-modal" class="modal" role="dialog" aria-modal="true" aria-labelledby="asset-upload-title">
    <div class="modal-content">
        <div class="modal-header">
            <h2 id="asset-upload-title" data-i18n="asset.upload">Upload Asset</h2>
            <button class="modal-close-btn" onclick="closeAssetUploadModal()" data-i18n-aria-label="aria.close">&#x2715;</button>
        </div>
        <div class="modal-body">
            <div id="asset-upload-error" class="modal-error" style="display:none"></div>

            <div class="form-group">
                <div class="label-row">
                    <label for="asset-upload-name" data-i18n="asset.name">Name:</label>
                    <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
                </div>
                <small class="input-hint" style="display:none" data-i18n="asset.name.hint">Display name for this asset.</small>
                <input type="text" id="asset-upload-name" maxlength="100">
                <div id="asset-upload-tags-container"></div>
            </div>

            <div class="form-group">
                <div class="label-row">
                    <label for="asset-upload-description" data-i18n="asset.description">Description:</label>
                    <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
                </div>
                <small class="input-hint" style="display:none" data-i18n="asset.description.hint">Optional description for this asset.</small>
                <input type="text" id="asset-upload-description" maxlength="500">
            </div>

            <div class="form-group">
                <div class="label-row">
                    <label data-i18n="asset.file">File:</label>
                    <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
                </div>
                <small class="input-hint" style="display:none" data-i18n="asset.file.hint">Select a file to upload (sound, image, video, or other).</small>
                <input type="file" id="asset-upload-file" required hidden>
                <div id="asset-upload-dropzone" class="file-dropzone" tabindex="0" role="button"
                     data-i18n-aria-label="asset.drop_or_browse">
                    <div class="file-dropzone-icon">
                        <svg class="icon" viewBox="0 0 24 24" style="width:32px;height:32px">
                            <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/>
                            <path d="M14 2v4a2 2 0 0 0 2 2h4"/>
                            <path d="M12 12v6"/><path d="m15 15-3-3-3 3"/>
                        </svg>
                    </div>
                    <div class="file-dropzone-text">
                        <span class="file-dropzone-label" data-i18n="asset.drop_or_browse">Drop file here or click to browse</span>
                    </div>
                    <div id="asset-upload-file-info" class="file-dropzone-info" style="display:none">
                        <span id="asset-upload-file-name" class="file-dropzone-filename"></span>
                        <span id="asset-upload-file-size" class="file-dropzone-filesize"></span>
                        <button type="button" class="file-dropzone-remove" id="asset-upload-file-remove"
                                title="Remove" data-i18n-title="common.remove">&#x2715;</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-icon btn-secondary" onclick="closeAssetUploadModal()" title="Cancel" data-i18n-title="settings.button.cancel" data-i18n-aria-label="aria.cancel">&#x2715;</button>
            <button class="btn btn-icon btn-primary" onclick="uploadAsset()" title="Upload" data-i18n-title="asset.upload" data-i18n-aria-label="asset.upload">&#x2713;</button>
        </div>
    </div>
</div>
