const fs = require('fs');
let html = fs.readFileSync('index.html', 'utf8');

// The broken structure looks like:
//        <li data-view="item-card" id="nav-item-card">...</li>
//      </div>
//
//        <li data-view="projects" id="nav-projects">...</li>

// We need to fix the premature closing of the sidebar and ul.

html = html.replace(/<li data-view="item-card" id="nav-item-card">([^<]*)<\/li>\s*<\/div>\s*<li data-view="projects" id="nav-projects">/g, 
  '<li data-view="item-card" id="nav-item-card">$1</li>\n        <li data-view="projects" id="nav-projects">');

// Then, later down, we have an extra `</ul></div>` before `<div class="main-content">`
// Actually, restore_html_2.js inserted:
// `      </ul>\n    </div>\n\n    <div class="main-content">`
// Wait, the original `index.html` ALREADY had `</ul>\n    </div>\n\n    <div class="main-content">` !
// So my script basically just put the `<li>` items INSTEAD of `<!-- Accounting View -->` which was located INSIDE `main-content`?!
// Let's replace the whole block to be 100% sure.

let fixedSidebar = `        <li data-view="projects" id="nav-projects">المشاريع</li>
        <li data-view="project-reports" id="nav-project-reports">تقارير المشاريع</li>
        <li data-view="project-costs" id="nav-project-costs">تكاليف المشاريع</li>
        <li data-view="subcontracts" id="nav-subcontracts">عقود مقاولي الباطن</li>
        <li data-view="subcontract-abstracts" id="nav-subcontract-abstracts">مستخلصات مقاولي الباطن</li>
        <li data-view="client-abstracts" id="nav-client-abstracts">مستخلصات عملاء</li>
        <li data-view="balances" id="nav-balances">أرصدة المخزون</li>
        <li data-view="transactions" id="nav-transactions">مستندات المخزون (فواتير)</li>
        <li id="btn-logout" class="text-danger">تسجيل الخروج</li>
      </ul>
    </div>`;

// Wait, I will just read the file and fix it logically.
