{% load i18n %}
<div class="file-configuration" style="display: flex; height: 100%;">
    <div class="uploaded-files" style="width: calc(39.3% - 4px);min-width: 493px; padding: 10px;">
        <h4><span data-bind="text: $root.translations.uploadedFiles"></span></h4>
        <span class="file-config-instuctions">{% trans "Specify how to process the data files for viewing.  Any additional files (such as images) will be automatically displayed if possible." %}</span>
        <div class="file-button-container">
            <div class="file-buttons" data-bind="click:() => {fileMode('data')}, css: {active: fileMode() == 'data'}" role="button">{% trans "Data Files" %}</div>
            <div style="margin: 0 5px"></div>
            <div class="file-buttons" data-bind="click:() => {fileMode('other'); selectedFiles([])}, css: {active: fileMode() != 'data'}" role="button">{% trans "Additional Files" %}</div>
        </div>

        <div style="max-height:calc(100% - 143px)">
            <div style="border: 1px solid #ddd; width: 100%; padding: 0px 7px; z-index: 1; height: 100%; overflow-y: scroll; overflow-x: hidden;" data-bind="visible: currentFiles().length > 0" style="overflow-y: scroll;">
                <table class="table table-striped" cellspacing="0" width="100%">
                    <thead>
                        <tr class="afs-table-header">
                            <th class="min-tabletl">{% trans "Name" %}</th>
                            <th class="min-tabletl">{% trans "Configuration" %}</th>
                            
                        </tr>
                    </thead>
                    <tbody data-bind="dataTablesForEach: { data: currentFiles, as: 'file', dataTableOptions: dataFileTable }">
                        <tr data-bind="css: {'active-file': $parent.visibleFile() == file.fileid && $parent.selectedFiles().length <= 1}">
                            <td>
                                <div style="display: flex; align-items:center;">
                                    <div style="display: flex; align-items: center;">
                                        <div style="margin: 0 5px;cursor:pointer" data-bind="click: function() { $parent.displayFile(file); $parent.selectedFile(file); }"></div>
                                        <input style="margin: 0px 5px 0px 0px;" type="checkbox" data-bind="visible: $parent.fileMode() == 'data', value: file.fileid, checked: $parent.selectedFiles">
                                    </div>
                                    <div style="padding:1px 5px;min-height: 39px;align-items:center;display:flex;cursor:pointer; flex: 1" data-bind="click: function() { $parent.displayFile(file); $parent.selectedFile(file); }, text: file.details.name"></div>
                                </div>
                            </td>
                            <td style="padding:8px;cursor:pointer" data-bind="click: function() { $parent.displayFile(file); $parent.selectedFile(file); }">
                                <div data-bind="visible: (typeof file.details?.rendererConfig == 'function')">
                                    <select style="display:inline-block; flex: 1"
                                        data-bind="
                                        options: $parent.rendererConfigs,
                                        optionsText: 'name', 
                                        optionsValue: 'configid',
                                        select2Query: {
                                            select2Config: $parent.getSelect2Config(file.details)
                                        }">
                                    </select>
                                </div>
                            </td>
                            
                        </tr>
                    </tbody>
                </table>
            </div>
            
        </div>
        <div style="position: relative; top: -35px; left: 6px; max-width: 266px;" class="table-tools-container">
            <div class="import-tool"><span data-bind="text:currentFiles().length"></span> <span data-bind="visible: currentFiles().length != 1">{% trans "files" %}</span><span data-bind="visible: currentFiles().length == 1">{% trans "file" %}</span> <span data-bind="visible: selectedFiles().length">(<span data-bind="text: selectedFiles().length"></span> {% trans "selected" %})</span></div>
            <button class="import-tool" data-bind="click:() =>{toggleSelect()}"><span data-bind="visible: !selectedFiles().length">{% trans "Select All" %}</span><span data-bind="visible: selectedFiles().length">{% trans "Deselect All" %}</span></button>
            <!-- <div class="import-tool">Remove Importer</div> -->
        </div>
    </div>
    <div style="cursor:col-resize; min-width:12px; background: #fcfcfc; border-right: 1px solid #eee; border-left: 1px solid #ddd;" class="resizer"></div>
    <div class="active-files" style="width: calc(33.3% - 4px);flex:1; display: flex; flex-direction: column; padding: 10px 10px 20px 20px; z-index: 10;">
        <div style="margin-bottom: 10px;" data-bind="visible: !(selectedFiles().length > 1) && fileMode() == 'data'">
            <h4 data-bind="text: selectedFile()?.details?.name"></h4>
            <div class="cm" style="border: 1px solid #ddd" >
                <div data-bind="codemirror: {
                    value: codeMirrorText,
                    mode: { name: 'javascript', json: true, readOnly: true },
                    lineNumbers: true,
                    lineWrapping: true
                }"></div>
            </div>
        </div>
        <div data-bind="visible: parsedData() && selectedConfiguration() && (selectedFiles().length == 1) && fileMode() == 'data'">
            <h4>{% trans "Import Preview" %}</h4>
            <div style="display: flex;flex-direction: column; flex: 1" class="parsing-preview">
                <div class="cm" style="border: 1px solid #ddd" >
                    <div data-bind="codemirror: {
                        value: parsedData,
                        mode: { name: 'text', json: true, readOnly: true },
                        lineNumbers: true,
                        lineWrapping: true
                    }"></div>
                </div>
            </div>
        </div>
        <div data-bind="visible: (selectedFiles().length > 1) && fileMode() == 'data'">
            <h4>{% trans "Selected Files" %}</h4>
            <div class="selected-files" data-bind="foreach: {data: selectedFiles(), as: 'file'}">
                <div data-bind="text: $parent.fileMap()[file]?.details?.name"></div>
            </div>
            <span style="margin-top: 10px; font-weight: bold;" data-bind="visible: !applyConfigurationVisible()">{% trans "Select an importer configuration on the right to apply to all files" %}</span>
            <button class="btn btn-primary" data-bind="visible: applyConfigurationVisible(), click:()=>{applyImporterToSelection()}">{% trans "Apply Importer to Selected Files" %}</button>
        </div>        
        <div data-bind="visible: (fileMode() != 'data')">
            <h4>{% trans "File Preview" %}</h4>
            <div>
                <div style="border: 1px solid #ddd; padding: 10px; background-color #fdfdfd;" data-bind="visible: selectedFile()?.details && !(fileRenderers?.[selectedFile()?.details?.renderer]?.name)">{% trans "This file type cannot be previewed." %}</div>
                <!-- ko if: selectedFile && fileMode() != 'data' && fileRenderers?.[selectedFile()?.details?.renderer]?.name -->
                <!-- ko component: {
                        name: fileRenderers[selectedFile()?.details?.renderer].name,
                        params: {
                            // fileViewer: $data,
                            //card: $parent.card,
                            selected: selected,
                            state: {},
                            displayContent: displayContent,
                            context: 'render',
                            params: $data,
                            loading: loadingFile
                        }
                    } -->
                <!-- /ko -->
                <!-- /ko -->
            </div>
        </div>
    </div>
    <div style="width: calc(27.3% - 4px); max-width: 470px; margin: 10px 20px;" data-bind="visible: fileMode() == 'data'">
        {% block importerConfiguration %}
        <!-- ko component: {
            name: 'importer-configuration',
            params: {
                selectedConfiguration: selectedConfiguration,
                rendererConfigs: rendererConfigs,
                alert: alert, 
            }
        } --> 
        <!-- /ko -->
        {% endblock importerConfiguration %}
    </div>
</div>