<h1>Product Import</h1>

<div>
<div class="upload-container">
    <div class="input-group">
        <label for="product-name">Product Name:</label>
        <input type="text" id="product-name" name="product-name">
    </div>
    <div class="input-group">
        <label for="product-sku">SKU:</label>
        <input type="text" id="product-sku" name="product-sku">
    </div>
</div>
</div>

<div class="upload-container">
    <div class="section-container">
        <div class="upload-section" id="modelUpload">
            <h2>Upload 3D Models</h2>
            <div class="drop-zone" id="modelDropZone">
                <span class="drop-zone__prompt">Drop model files here or click to upload</span>
                <input type="file" name="modelFile" class="drop-zone__input" accept=".glb">
            </div>

        </div>
        <div class="model-preview">
            <div id="container" class="window3d">
                {{>preview3d}}
            </div>
            <div class="info-container" id="modelInfo"></div>
            <div class="info-container" id="modelList"></div>
            <div class="info-container" id="modelMessage"></div>
        </div>
    </div>

    <div class="section-container">
        <div class="upload-section" id="dxfUpload">
            <h2>Upload DXF File</h2>
            <div class="drop-zone" id="dxfDropZone">
                <span class="drop-zone__prompt">Drop DXF file here or click to upload</span>
                <input type="file" name="dxfFile" class="drop-zone__input" accept=".dxf">
            </div>

        </div>
        <div class="model-preview">
            <div id="dxfContainer">

            </div>
            <div class="info-container" id="dxfInfo"></div>
        </div>
    </div>

    <div class="section-container">
        <div class="upload-section" id="clo3dUpload">
            <h2>Upload CLO3D File</h2>
            <div class="drop-zone" id="clo3dDropZone">
                <span class="drop-zone__prompt">Drop CLO3D file here or click to upload</span>
                <input type="file" name="clo3dFile" class="drop-zone__input" accept=".zprj">
            </div>
        </div>
        <div class="model-preview">
            <div class="info-container" id="clo3dContainer"></div>
        </div>
    </div>
</div>
<div class="section-container" id="uploadButtonContainer" style="display: none;">
    <div class="upload-section">
        <button id="uploadButton" class="upload-button" onclick="getNewProductId()">Upload Files</button>
    </div>
</div>

<script src="/js/testsuite.js"></script>