 <main class="container">
<br>
   <div class="tools-area">
        <label for="pdfUpload" class="tools-btn"> <i class="fa-solid fa-upload"></i> Upload PDF File(s)</label>
        <input type="file" id="pdfUpload" accept="application/pdf" multiple style="display: none;">
        <label for="wordUpload" class="tools-btn"> <i class="fa-solid fa-upload"></i> Upload Word File</label>
        <input type="file" id="wordUpload" accept=".docx" style="display: none;">
        <label for="importTemplate" class="tools-btn"> <i class="fa-solid fa-upload"></i> Import Template</label>
        <input type="file" id="importTemplate" accept=".html" style="display: none;">
        
        <div class="dropdown">
            <button class="tools-btn">
              <i class="fa-solid fa-database"></i> Add Dataset
            </button>
            <div class="dropdown-content">
                <select id="mergeSource"  class="tools-btn">
                    <option value="static">Static JSON</option>
                    <option value="api">API Call</option>
                    <option value="googleSheets">Google Sheets</option>
                </select>
            </div>
        </div>
        <button id="loadMergeData" class="tools-btn"><i class="fa-solid fa-database"></i> Access Dataset</button>
        <button id="saveTemplate" class="tools-btn"><i class="fa-solid fa-save"></i> Save Template</button>
        <button id="loadTemplate" class="tools-btn"><i class="fa-solid fa-file"></i> Restore Template</button>
        <button id="loadInvoice" class="tools-btn"><i class="fa-solid fa-file"></i> Invoice Template</button>
        <button id="downloadTemplate" class="tools-btn"><i class="fa-solid fa-file-download"></i> Export Template</button>
    </div>
    <div class="tools-area">
        <button id="bold" class="tools-btn"><i class="fa-solid fa-bold"></i> Bold</button>
        <button id="italic" class="tools-btn"><i class="fa-solid fa-italic"></i> Italic</button>
        <button id="underline" class="tools-btn"><i class="fa-solid fa-underline"></i> Underline</button>
        <button id="strikethrough" class="tools-btn"><i class="fa-solid fa-strikethrough"></i> Strikethrough</button>
        <button id="fontColor" class="tools-btn"><i class="fa-solid fa-font"></i> Font Color</button>
        <button id="backgroundColor" class="tools-btn"><i class="fa-solid fa-droplet"></i> Background Color</button>
        <button id="alignLeft" class="tools-btn"><i class="fa-solid fa-align-left"></i> Left Align</button>
        <button id="alignRight" class="tools-btn"><i class="fa-solid fa-align-right"></i> Right Align</button>
        <button id="alignJustify" class="tools-btn"><i class="fa-solid fa-align-justify"></i> Justify</button>
        <button id="alignCenter" class="tools-btn"><i class="fa-solid fa-align-center"></i> Align Center</button>
        <button id="unorderedList" class="tools-btn"><i class="fa-solid fa-list-ul"></i> Bullets</button>
        <button id="orderedList" class="tools-btn"><i class="fa-solid fa-list-ol"></i> Numbering</button>
        <button id="increaseFontSize" class="tools-btn"><i class="fa-solid fa-plus"></i> Increase</button>
        <button id="decreaseFontSize" class="tools-btn"><i class="fa-solid fa-minus"></i> Decrease</button>
        <button id="undo" class="tools-btn"><i class="fa-solid fa-rotate-right"></i> Undo</button>
        <button id="redo" class="tools-btn"><i class="fa-solid fa-rotate-left"></i> Redo</button>
        <button id="indent" class="tools-btn"><i class="fa-solid fa-indent"></i> Indent</button>
        <button id="outdent" class="tools-btn"><i class="fa-solid fa-outdent"></i> Outdent</button>
        <button id="copyBtn" class="tools-btn"><i class="fa-regular fa-copy"></i> Copy</button>
        <button id="formatclear" class="tools-btn"><i class="fa-solid fa-text-slash"></i> Clear Formatting</button>
        <button id="resetBtn" class="tools-btn"><i class="fa-solid fa-eraser"></i> Reset</button>
        <button id="table" class="tools-btn"><i class="fa-solid fa-table"></i> Table</button>          
        <button id="insertLink" class="tools-btn"><i class="fa-solid fa-link"></i> Link</button>
        <button id="insertImage" class="tools-btn"><i class="fa-solid fa-image"></i> Image</button>
        <button id="insertVideo" class="tools-btn"><i class="fa-solid fa-video"></i> insertVideo</button>
        <button id="insertLocalImage" class="tools-btn"><i class="fa-solid fa-image"></i> Picture</button>
        <button id="code" class="tools-btn"><i class="fa-solid fa-code"></i> HTML Code</button>
        <button id="writeBtn" class="tools-btn"><i class="fa-solid fa-magic"></i> AI Write</button>
        <button id="summarizeBtn" class="tools-btn"><i class="fa-solid fa-magic"></i> AI Summarize</button>
        <button id="expandBtn" class="tools-btn"><i class="fa-solid fa-magic"></i> AI Rewrite </button>
        <button id="printContent" class="tools-btn"><i class="fa-solid fa-print"></i> Print</button> 
        
        <div class="dropdown">
            <button class="tools-btn">
              <i class="fa-solid fa-file-download"></i> Export
            </button>
            <div class="dropdown-content">
              <button id="ToPDF"><i class="fa-regular fa-file-pdf"></i> Dynamic PDF</button>
              <button id="MStoPDF"><i class="fa-solid fa-file-pdf"></i> Export PDF</button>
              <button id="multiPDF"><i class="fa-regular fa-file-pdf"></i> Multiple PDF's</button>
              <button id="invoiceToPDF"><i class="fa-solid fa-file-download"></i> Export Invoice</button>
              <button id="exportHTML"><i class="fa-solid fa-file-download"></i> Export HTML</button>
            </div>
        </div>
    </div>
    <div class="txt-area">
        <div contentEditable class="text" id="text" placeholder="start typing your text" rows="100">        
   
        </div>
        <!-- Branding message -->
        <div class="branding" style="text-align: right; margin-top: 5px; font-size: 10px; color: gray;">
            Powered by ICD Editor
        </div>
        
        <div id="counts" style="text-align: left; font-size: 12px; color: gray;">
            <p>Characters: <span id="charCount">0</span>, Words: <span id="wordCount">0</span></p>
        </div>
        
       <div id="output">Data Preview</div>
       
       <div id="jsonInputArea" style="margin: 40px 0;">
        <label>JSON Parameters</label>
        <textarea id="staticJsonInput" rows="10" cols="147" placeholder="Enter JSON values here"></textarea>
    </div>

    </div>
</main>