<div class="modal-background" role="dialog" aria-labelledby="modal-heading" aria-describedby="modal-description">
    <div class="modal-container _48">
        <div class="wizard-steps-container">
            <div class="wizard-steps" role="navigation" aria-label="Import Process Steps">
                <div class="wizard-step completed">
                    <div class="wizard-step-content-wrapper">
                        <div class="wizard-progress-icon current-step" aria-hidden="true"><svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewbox="0 0 32 32">
                            <path d="M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2ZM14,21.5908l-5-5L10.5906,15,14,18.4092,21.41,11l1.5957,1.5859Z"></path>
                            <polygon id="step1-checkmark" fill="#ffffff" points="14 21.591 9 16.591 10.591 15 14 18.409 21.41 11 23.005 12.585 14 21.591">
                            </polygon></svg></div>
                        <div>
                            <div class="wizard-step-heading" id="step1-label">Step 1</div>
                            <div id="step1-description">Upload CSV File</div>
                        </div>
                    </div>
                    <div class="wizard-divider-arrow" aria-hidden="true"><svg width="12" height="24" viewbox="0 0 12 24" xmlns="http://www.w3.org/2000/svg">
                        <polygon id="caretPolygon1" points="0,0 0,24 12,12" fill="none">
                            <line x1="0" y1="0" x2="12" y2="12" stroke="currentColor" stroke-width="1"></line>
                            <line x1="0" y1="24" x2="12" y2="12" stroke="currentColor" stroke-width="1"></line>
                        </polygon></svg></div>
                    <div class="wizard-bottom-border current-step"></div>
                </div>
                <div class="wizard-step" aria-current="step">
                    <div class="wizard-step-content-wrapper">
                        <div class="wizard-progress-icon current-step" aria-hidden="true"><svg fill="currentColor" height="32" width="32" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 32 32">
                            <path d="M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,26A12,12,0,1,1,28,16,12,12,0,0,1,16,28Z"></path>
                            </svg></div>
                        <div>
                            <div class="wizard-step-heading" id="step2-label">Step 2</div>
                            <div id="step2-description">Map Fields</div>
                        </div>
                    </div>
                    <div class="wizard-divider-arrow" aria-hidden="true"><svg width="12" height="24" viewbox="0 0 12 24" xmlns="http://www.w3.org/2000/svg">
                        <polygon id="caretPolygon2" points="0,0 0,24 12,12" fill="none">
                            <line x1="0" y1="0" x2="12" y2="12" stroke="currentColor" stroke-width="1"></line>
                            <line x1="0" y1="24" x2="12" y2="12" stroke="currentColor" stroke-width="1"></line>
                        </polygon></svg></div>
                    <div class="wizard-bottom-border current-step"></div>
                </div>
                <div class="wizard-step future-step">
                    <div class="wizard-step-content-wrapper">
                        <div class="wizard-progress-icon" aria-hidden="true">
                            <svg fill="currentColor" width="32" height="32" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 32 32">
                            <defs>
                                <style>.cls-1{fill:currentColor;}.cls-2{fill:none;}</style>
                            </defs>
                            <path class="cls-1" d="M7.7,4.7a14.7,14.7,0,0,0-3,3.1L6.3,9A13.26,13.26,0,0,1,8.9,6.3Z"></path>
                            <path class="cls-1" d="M4.6,12.3l-1.9-.6A12.51,12.51,0,0,0,2,16H4A11.48,11.48,0,0,1,4.6,12.3Z"></path>
                            <path class="cls-1" d="M2.7,20.4a14.4,14.4,0,0,0,2,3.9l1.6-1.2a12.89,12.89,0,0,1-1.7-3.3Z"></path>
                            <path class="cls-1" d="M7.8,27.3a14.4,14.4,0,0,0,3.9,2l.6-1.9A12.89,12.89,0,0,1,9,25.7Z"></path>
                            <path class="cls-1" d="M11.7,2.7l.6,1.9A11.48,11.48,0,0,1,16,4V2A12.51,12.51,0,0,0,11.7,2.7Z"></path>
                            <path class="cls-1" d="M24.2,27.3a15.18,15.18,0,0,0,3.1-3.1L25.7,23A11.53,11.53,0,0,1,23,25.7Z"></path>
                            <path class="cls-1" d="M27.4,19.7l1.9.6A15.47,15.47,0,0,0,30,16H28A11.48,11.48,0,0,1,27.4,19.7Z"></path>
                            <path class="cls-1" d="M29.2,11.6a14.4,14.4,0,0,0-2-3.9L25.6,8.9a12.89,12.89,0,0,1,1.7,3.3Z"></path>
                            <path class="cls-1" d="M24.1,4.6a14.4,14.4,0,0,0-3.9-2l-.6,1.9a12.89,12.89,0,0,1,3.3,1.7Z"></path>
                            <path class="cls-1" d="M20.3,29.3l-.6-1.9A11.48,11.48,0,0,1,16,28v2A21.42,21.42,0,0,0,20.3,29.3Z"></path>
                            </svg></div>
                        <div>
                            <div class="wizard-step-heading" id="step3-label">Step 3</div>
                            <div id="step3-description">Import Data</div>
                        </div>
                    </div>
                    <div class="wizard-bottom-border"></div>
                </div>
            </div>
        </div>
        <div class="modal-heading-container">
            <h1 class="modal-h1" id="modal-heading">Map Columns to Contact Fields &amp; Tags</h1>
            <div id="modal-description">Match columns from your CSV file to existing fields and tags, or create new tags.<br></div>
        </div>
        <form id="map-fields-form" name="map-fields-form" data-name="Field Mapping" method="post" class="form">
            <div class="form-list">
                <div class="form-field-container">
                    <div class="field-label-container">
                        <label for="csv-preview" id="preview-label" class="field-label">Imported File Preview</label>
                        <div class="required-star" aria-hidden="true">*</div>
                        <div data-tippy-content="Preview the first few rows of your CSV to help you accurately match columns to contact fields and tags." class="help-tooltip" role="tooltip" aria-labelledby="preview-label"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <circle cx="12" cy="12" r="10"></circle>
                            <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                            <line x1="12" y1="17" x2="12.01" y2="17"></line>
                            </svg></div>
                    </div>
                    <div class="table-outline" id="csv-preview" aria-labelledby="preview-label">
                        <div class="table-scroll-container">
                            <table class="table" aria-label="CSV file preview">
                                <thead class="table-head">
                                    <!-- START First Row in CSV -->
                                    <tr class="table-header-row">

                                        <!-- START Columns - Repeat for each column in CSV -->
                                        <th scope="col">
                                            <div class="table-cell-content">
                                                <div class="table-heading">{row 1 col {i} value}</div>
                                            </div>
                                        </th>

                                        <!-- END Column -->

                                    </tr>
                                    <!-- END First Row in CSV -->

                                </thead>
                                <tbody class="table-body">

                                    <!-- START ROW 2&3 in CSV -->

                                    <tr class="table-row">

                                        <!-- START Columns - Repeat for each column in CSV -->
                                        <td class="table-cell">
                                            <div class="table-cell-content">
                                                <div class="table-data overflow">row 2 col {i} value</div>
                                            </div>
                                        </td>
                                        <!-- END Column -->

                                    </tr>
                                    <tr class="table-row last-row">

                                        <!-- START Columns - Repeat for each column in CSV -->
                                        <td class="table-cell">
                                            <div class="table-cell-content">
                                                <div class="table-data overflow">row 3 col {i} value</div>
                                            </div>
                                        </td>

                                        <!-- END Column -->

                                    </tr>

                                    <!-- END ROW 2&3 in CSV -->

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="form-field-container">
                    <div class="field-label-container">
                        <label for="field-mapping-table" id="mapping-label" class="field-label">Map Columns to Fields &amp; Tags<br></label>
                        <div class="required-star" aria-hidden="true">*</div>
                        <div data-tippy-content="Map each CSV column to an existing field or tag, create a new tag, or select 'Do not map' to skip importing." class="help-tooltip" role="tooltip" aria-labelledby="mapping-label">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
                        </div>
                    </div>
                    <div class="table-outline" id="field-mapping-table" aria-labelledby="mapping-label">
                        <div class="table-scroll-container">
                            <table class="table" aria-label="Column mapping table">
                                <thead class="table-head">
                                    <tr class="table-header-row">
                                        <th scope="col">
                                            <div class="table-cell-content">
                                                <div class="table-heading">Column</div>
                                            </div>
                                        </th>
                                        <th scope="col">
                                            <div class="table-cell-content">
                                                <div class="table-heading">Map to Field</div>
                                            </div>
                                        </th>
                                    </tr>
                                </thead>
                                <tbody class="table-body">

                                    <!-- START Mapping Rows - Repeat for each column in CSV -->
                                    <tr class="table-row">
                                        <td class="table-cell">
                                            <div class="table-cell-content">
                                                <div data-tippy-content="This is a tooltip." class="table-cell-left">
                                                    <div class="field-label-container">
                                                        <div class="table-data overflow" id="column1-name">row 1 col {i} value</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="table-cell">
                                            <div class="table-cell-content">
                                                <div data-delay="0" data-hover="false" class="dropdown w-dropdown" id="dropdown-column1" aria-haspopup="listbox" aria-expanded="false">
                                                    <div class="dropdown-closed table-filter w-dropdown-toggle" id="dropdown-toggle-column1" aria-controls="dropdown-list-column1" role="combobox">
                                                        <div class="dropdown-arrow w-icon-dropdown-toggle" aria-hidden="true"></div>
                                                        <div class="dropdown-text">Email Address (required)</div>
                                                    </div>
                                                    <div class="dropdown-open max-100 w-dropdown-list" id="dropdown-list-column1" role="listbox" aria-labelledby="dropdown-toggle-column1">
                                                        <div class="dropdown-options">

                                                            <!-- START Fields - Repeat for each contact field -->
                                                            <a href="#" class="dropdown-option no-selected w-inline-block" id="field-email" role="option" aria-selected="true">
                                                                <div class="icon _16 success-text" aria-hidden="true">
                                                                    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="32" height="32" viewbox="0 0 32 32"><polygon points="11.41 26.59 7.83 23 28 23 28 21 7.83 21 11.41 17.41 10 16 4 22 10 28 11.41 26.59"><polygon points="28 10 22 4 20.59 5.41 24.17 9 4 9 4 11 24.17 11 20.59 14.59 22 16 28 10"></polygon></polygon></svg>
                                                                </div>
                                                                <div class="dropdown-option-text">Email Address (required)</div>
                                                            </a>
                                                            <!-- END Fields -->

                                                            <!-- START Tags - Repeat for each tag -->
                                                            <a href="#" class="dropdown-option no-selected w-inline-block" id="tag-department" role="option">
                                                                <div class="icon _16 brand-color" aria-hidden="true">
                                                                    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="32" height="32" viewbox="0 0 32 32"><path d="M10,14a4,4,0,1,1,4-4A4.0045,4.0045,0,0,1,10,14Zm0-6a2,2,0,1,0,1.998,2.0044A2.002,2.002,0,0,0,10,8Z" transform="translate(0 0)"></path><path d="M16.6436,29.4145,2.5858,15.3555A2,2,0,0,1,2,13.9414V4A2,2,0,0,1,4,2h9.9413a2,2,0,0,1,1.4142.5858L29.4144,16.6436a2.0005,2.0005,0,0,1,0,2.8285l-9.9424,9.9425a2.0008,2.0008,0,0,1-2.8285,0ZM4,4v9.9417L18.0578,28,28,18.0579,13.9416,4Z" transform="translate(0 0)"></path></svg>
                                                                </div>
                                                                <div class="dropdown-option-text">Department</div>
                                                            </a>
                                                            <!-- END Tags -->


                                                            <!-- START Create Tag Options -->   

                                                            <!-- START Create Text Tag -->
                                                            <a href="#" class="dropdown-option no-selected w-inline-block" id="create-text-tag" role="option">
                                                                <div class="icon _16 brand-color" aria-hidden="true">
                                                                    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="32" height="32" viewbox="0 0 32 32"><path d="m17.98,17.4922c0-2.8734,1.4971-4.68,4.1466-4.68,1.8067,0,2.9939.8603,3.5272,2.2712l-1.8067.8087c-.2065-.7571-.7743-1.3076-1.7206-1.3076-1.2215,0-1.841.8602-1.841,2.1162v1.6345c0,1.2561.6194,2.0992,1.841,2.0992,1.0496,0,1.5657-.6023,1.8927-1.411l1.686.8087c-.5849,1.5829-1.841,2.3744-3.5788,2.3744-2.6496,0-4.1466-1.8238-4.1466-4.7144Z"></path><path d="m14.623,22.0001l-.9635-3.0626h-4.267l-.9465,3.0626h-2.3055l4.026-12.0096h2.8217l3.9917,12.0096h-2.357Zm-3.0627-9.9449h-.0861l-1.5311,4.9381h3.1659l-1.5486-4.9381Z"></path><path d="m28,30H4c-1.1046,0-2-.8954-2-2V4c0-1.1046.8954-2,2-2h24c1.1046,0,2,.8954,2,2v24c0,1.1046-.8954,2-2,2Zm-24-2h24V4H4v24Z"></path></svg>
                                                                </div>
                                                                <div class="dropdown-option-text">Create Tag (Text)</div>
                                                            </a>
                                                            <!-- END Create Text Tag -->

                                                            <!-- START Create Dropdown Tag -->
                                                            <a href="#" class="dropdown-option no-selected w-inline-block" id="create-dropdown-tag" role="option">
                                                                <div class="icon _16 brand-color" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="32" height="32" viewbox="0 0 32 32">
                                                                    <path d="M26,6V2H2V12h9V30H30V6ZM4,10V4H24V6H11v4ZM28,28H13V8H28Z"></path>
                                                                    <rect x="15" y="11" width="2" height="2"></rect>
                                                                    <rect x="19" y="11" width="7" height="2"></rect>
                                                                    <rect x="15" y="17" width="2" height="2"></rect>
                                                                    <rect x="19" y="17" width="7" height="2"></rect>
                                                                    <rect x="15" y="23" width="2" height="2"></rect>
                                                                    <rect x="19" y="23" width="7" height="2"></rect>
                                                                    </svg></div>
                                                                <div class="dropdown-option-text">Create Tag (Dropdown)</div>
                                                            </a>
                                                            <!-- END Create Dropdown Tag -->

                                                            <!-- START "Do not map" Option -->
                                                            <a href="#" class="dropdown-option no-selected w-inline-block" id="do-not-map" role="option">
                                                                <div class="icon _16 danger-text" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="32" height="32" viewbox="0 0 32 32">
                                                                    <path d="M2,16H2A14,14,0,1,0,16,2,14,14,0,0,0,2,16Zm23.15,7.75L8.25,6.85a12,12,0,0,1,16.9,16.9ZM8.24,25.16A12,12,0,0,1,6.84,8.27L23.73,25.16a12,12,0,0,1-15.49,0Z" transform="translate(0)"></path>
                                                                    </svg></div>
                                                                <div class="dropdown-option-text"><em>Do not map</em></div>
                                                            </a>
                                                            <!-- END "Do not map" Option -->

                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>

                                    <!-- END Mapping Rows - Repeat for each column in CSV -->

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="alert-box" role="alert">
                    <div class="alert-icon" aria-hidden="true">
                        <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"><path d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336c-13.3 0-24 10.7-24 24s10.7 24 24 24l80 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-8 0 0-88c0-13.3-10.7-24-24-24l-48 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l24 0 0 64-24 0zm40-144a32 32 0 1 0 0-64 32 32 0 1 0 0 64z"></path></svg>
                    </div>
                    <div id="dropdown-tag-note"><strong>Note:</strong> Selecting 'Create Tag (Dropdown)' will auto-generate tags from unique column values. You can manage or update these tags later in Tag Settings.</div>
                </div>
            </div>
            <div class="form-button-container">
                <button type="button" id="cancel-button" class="button tertiary full w-button">Cancel</button>
                <button type="button" id="import-button" class="button full disabled w-button" disabled aria-disabled="true">Import Data</button> <!-- remain disabled until all required fields are mapped (only email currently) -->
            </div>
        </form>
    </div>
</div>