# All files / js/components PdfTemplateEditor.vue

0% Statements 0/320
0% Branches 0/231
0% Functions 0/55
0% Lines 0/307

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    256
    257
    258
    259
    260
    261
    262
    263
    264
    265
    266
    267
    268
    269
    270
    271
    272
    273
    274
    275
    276
    277
    278
    279
    280
    281
    282
    283
    284
    285
    286
    287
    288
    289
    290
    291
    292
    293
    294
    295
    296
    297
    298
    299
    300
    301
    302
    303
    304
    305
    306
    307
    308
    309
    310
    311
    312
    313
    314
    315
    316
    317
    318
    319
    320
    321
    322
    323
    324
    325
    326
    327
    328
    329
    330
    331
    332
    333
    334
    335
    336
    337
    338
    339
    340
    341
    342
    343
    344
    345
    346
    347
    348
    349
    350
    351
    352
    353
    354
    355
    356
    357
    358
    359
    360
    361
    362
    363
    364
    365
    366
    367
    368
    369
    370
    371
    372
    373
    374
    375
    376
    377
    378
    379
    380
    381
    382
    383
    384
    385
    386
    387
    388
    389
    390
    391
    392
    393
    394
    395
    396
    397
    398
    399
    400
    401
    402
    403
    404
    405
    406
    407
    408
    409
    410
    411
    412
    413
    414
    415
    416
    417
    418
    419
    420
    421
    422
    423
    424
    425
    426
    427
    428
    429
    430
    431
    432
    433
    434
    435
    436
    437
    438
    439
    440
    441
    442
    443
    444
    445
    446
    447
    448
    449
    450
    451
    452
    453
    454
    455
    456
    457
    458
    459
    460
    461
    462
    463
    464
    465
    466
    467
    468
    469
    470
    471
    472
    473
    474
    475
    476
    477
    478
    479
    480
    481
    482
    483
    484
    485
    486
    487
    488
    489
    490
    491
    492
    493
    494
    495
    496
    497
    498
    499
    500
    501
    502
    503
    504
    505
    506
    507
    508
    509
    510
    511
    512
    513
    514
    515
    516
    517
    518
    519
    520
    521
    522
    523
    524
    525
    526
    527
    528
    529
    530
    531
    532
    533
    534
    535
    536
    537
    538
    539
    540
    541
    542
    543
    544
    545
    546
    547
    548
    549
    550
    551
    552
    553
    554
    555
    556
    557
    558
    559
    560
    561
    562
    563
    564
    565
    566
    567
    568
    569
    570
    571
    572
    573
    574
    575
    576
    577
    578
    579
    580
    581
    582
    583
    584
    585
    586
    587
    588
    589
    590
    591
    592
    593
    594
    595
    596
    597
    598
    599
    600
    601
    602
    603
    604
    605
    606
    607
    608
    609
    610
    611
    612
    613
    614
    615
    616
    617
    618
    619
    620
    621
    622
    623
    624
    625
    626
    627
    628
    629
    630
    631
    632
    633
    634
    635
    636
    637
    638
    639
    640
    641
    642
    643
    644
    645
    646
    647
    648
    649
    650
    651
    652
    653
    654
    655
    656
    657
    658
    659
    660
    661
    662
    663
    664
    665
    666
    667
    668
    669
    670
    671
    672
    673
    674
    675
    676
    677
    678
    679
    680
    681
    682
    683
    684
    685
    686
    687
    688
    689
    690
    691
    692
    693
    694
    695
    696
    697
    698
    699
    700
    701
    702
    703
    704
    705
    706
    707
    708
    709
    710
    711
    712
    713
    714
    715
    716
    717
    718
    719
    720
    721
    722
    723
    724
    725
    726
    727
    728
    729
    730
    731
    732
    733
    734
    735
    736
    737
    738
    739
    740
    741
    742
    743
    744
    745
    746
    747
    748
    749
    750
    751
    752
    753
    754
    755
    756
    757
    758
    759
    760
    761
    762
    763
    764
    765
    766
    767
    768
    769
    770
    771
    772
    773
    774
    775
    776
    777
    778
    779
    780
    781
    782
    783
    784
    785
    786
    787
    788
    789
    790
    791
    792
    793
    794
    795
    796
    797
    798
    799
    800
    801
    802
    803
    804
    805
    806
    807
    808
    809
    810
    811
    812
    813
    814
    815
    816
    817
    818
    819
    820
    821
    822
    823
    824
    825
    826
    827
    828
    829
    830
    831
    832
    833
    834
    835
    836
    837
    838
    839
    840
    841
    842
    843
    844
    845
    846
    847
    848
    849
    850
    851
    852
    853
    854
    855
    856
    857
    858
    859
    860
    861
    862
    863
    864
    865
    866
    867
    868
    869
    870
    871
    872
    873
    874
    875
    876
    877
    878
    879
    880
    881
    882
    883
    884
    885
    886
    887
    888
    889
    890
    891
    892
    893
    894
    895
    896
    897
    898
    899
    900
    901
    902
    903
    904
    905
    906
    907
    908
    909
    910
    911
    912
    913
    914
    915
    916
    917
    918
    919
    920
    921
    922
    923
    924
    925
    926
    927
    928
    929
    930
    931
    932
    933
    934
    935
    936
    937
    938
    939
    940
    941
    942
    943
    944
    945
    946
    947
    948
    949
    950
    951
    952
    953
    954
    955
    956
    957
    958
    959
    960
    961
    962
    963
    964
    965
    966
    967
    968
    969
    970
    971
    972
    973
    974
    975
    976
    977
    978
    979
    980
    981
    982
    983
    984
    985
    986
    987
    988
    989
    990
    991
    992
    993
    994
    995
    996
    997
    998
    999
    1000
    1001
    1002
    1003
    1004
    1005
    1006
    1007
    1008
    1009
    1010
    1011
    1012
    1013
    1014
    1015
    1016
    1017
    1018
    1019
    1020
    1021
    1022
    1023
    1024
    1025
    1026
    1027
    1028
    1029
    1030
    1031
    1032
    1033
    1034
    1035
    1036
    1037
    1038
    1039
    1040
    1041
    1042
    1043
    1044
    1045
    1046
    1047
    1048
    1049
    1050
    1051
    1052
    1053
    1054
    1055
    1056
    1057
    1058
    1059
    1060
    1061
    1062
    1063
    1064
    1065
    1066
    1067
    1068
    1069
    1070
    1071
    1072
    1073
    1074
    1075
    1076
    1077
    1078
    1079
    1080
    1081
    1082
    1083
    1084
    1085
    1086
    1087
    1088
    1089
    1090
    1091
    1092
    1093
    1094
    1095
    1096
    1097
    1098
    1099
    1100
    1101
    1102
    1103
    1104
    1105
    1106
    1107
    1108
    1109
    1110
    1111
    1112
    1113
    1114
    1115
    1116
    1117
    1118
    1119
    1120
    1121
    1122
    1123
    1124
    1125
    1126
    1127
    1128
    1129
    1130
    1131
    1132
    1133
    1134
    1135
    1136
    1137
    1138
    1139
    1140
    1141
    1142
    1143
    1144
    1145
    1146
    1147
    1148
    1149
    1150
    1151
    1152
    1153
    1154
    1155
    1156
    1157
    1158
    1159
    1160
    1161
    1162
    1163
    1164
    1165
    1166
    1167
    1168
    1169
    1170
    1171
    1172
    1173
    1174
    1175
    1176
    1177
    1178
    1179
    1180
    1181
    1182
    1183
    1184
    1185
    1186
    1187
    1188
    1189
    1190
    1191
    1192
    1193
    1194
    1195
    1196
    1197
    1198
    1199
    1200
    1201
    1202
    1203
    1204
    1205
    1206
    1207
    1208
    1209
    1210
    1211
    1212
    1213
    1214
    1215
    1216
    1217
    1218
    1219
    1220
    1221
    1222
    1223
    1224
    1225
    1226
    1227
    1228
    1229
    1230
    1231
    1232
    1233
    1234
    1235
    1236
    1237
    1238
    1239
    1240
    1241
    1242
    1243
    1244
    1245
    1246
    1247
    1248
    1249
    1250
    1251
    1252
    1253
    1254
    1255
    1256
    1257
    1258
    1259
    1260
    1261
    1262
    1263
    1264
    1265
    1266
    1267
    1268
    1269
    1270
    1271
    1272
    1273
    1274
    1275
    1276
    1277
    1278
    1279
    1280
    1281
    1282
    1283
    1284
    1285
    1286
    1287
    1288
    1289
    1290
    1291
    1292
    1293
    1294
    1295
    1296
    1297
    1298
    1299
    1300
    1301
    1302
    1303
    1304
    1305
    1306
    1307
    1308
    1309
    1310
    1311
    1312
    1313
    1314
    1315
    1316
    1317
    1318
    1319
    1320
    1321
    1322
    1323
    1324
    1325
    1326
    1327
    1328
    1329
    1330
    1331
    1332
    1333
    1334
    1335
    1336
    1337
    1338
    1339
    1340
    1341
    1342
    1343
    1344
    1345
    1346
    1347
    1348
    1349
    1350
    1351
    1352
    1353
    1354
    1355
    1356
    1357
    1358
    1359
    1360
    1361
    1362
    1363
    1364
    1365
    1366
    1367
    1368
    1369
    1370
    1371
    1372
    1373
    1374
    1375
    1376
    1377
    1378
    1379
    1380
    1381
    1382
    1383
    1384
    1385
    1386
    1387
    1388
    1389
    1390
    1391
    1392
    1393
    1394
    1395
    1396
    1397
    1398
    1399
    1400
    1401
    1402
    1403
    1404
    1405
    1406
    1407
    1408
    1409
    1410
    1411
    1412
    1413
    1414
    1415
    1416
    1417
    1418
    1419
    1420
    1421
    1422
    1423
    1424
    1425
    1426
    1427
    1428
    1429
    1430
    1431
    1432
    1433
    1434
    1435
    1436
    1437
    1438
    1439
    1440
    1441
    1442
    1443
    1444
    1445
    1446
    1447
    1448
    1449
    1450
    1451
    1452
    1453
    1454
    1455
    1456
    1457
    1458
    1459
    1460
    1461
    1462
    1463
    1464
    1465
    1466
    1467
    1468
    1469
    1470
    1471
    1472
    1473
    1474
    1475
    1476
    1477
    1478
    1479
    1480
    1481
    1482
    1483
    1484
    1485
    1486
    1487
    1488
    1489
    1490
    1491
    1492
    1493
    1494
    1495
    1496
    1497
    1498
    1499
    1500
    1501
    1502
    1503
    1504
    1505
    1506
    1507
    1508
    1509
    1510
    1511
    1512
    1513
    1514
    1515
    1516
    1517
    1518
    1519
    1520
    1521
    1522
    1523
    1524
    1525
    1526
    1527
    1528
    1529
    1530
    1531
    1532
    1533
    1534
    1535
    1536
    1537
    1538
    1539
    1540
    1541
    1542
    1543
    1544
    1545
    1546
    1547
    1548
    1549
    1550
    1551
    1552
    1553
    1554
    1555
    1556
    1557
    1558
    1559
    1560
    1561
    1562
    1563
    1564
    1565
    1566
    1567
    1568
    1569
    1570
    1571
    1572
    1573
    1574
    1575
    1576
    1577
    1578
    1579
    1580
    1581
    1582
    1583
    1584
    1585
    1586
    1587
    1588
    1589
    1590
    1591
    1592
    1593
    1594
    1595
    1596
    1597
    1598
    1599
    1600
    1601
    1602
    1603
    1604
    1605
    1606
    1607
    1608
    1609
    1610
    1611
    1612
    1613
    1614
    1615
    1616
    1617
    1618
    1619
    1620
    1621
    1622
    1623
    1624
    1625
    1626
    1627
    1628
    1629
    1630
    1631
    1632
    1633
    1634
    1635
    1636
    1637
    1638
    1639
    1640
    1641
    1642
    1643
    1644
    1645
    1646
    1647
    1648
    1649
    1650
    1651
    1652
    1653
    1654
    1655
    1656
    1657
    1658
    1659
    1660
    1661
    1662
    1663
    1664
    1665
    1666
    1667
    1668
    1669
    1670
    1671
    1672
    1673
    1674
    1675
    1676
    1677
    1678
    1679
    1680
    1681
    1682
    1683
    1684
    1685
    1686
    1687
    1688
    1689
    1690
    1691
    1692
    1693
    1694
    1695
    1696
    1697
    1698
    1699
    1700
    1701
    1702
    1703
    1704
    1705
    1706
    1707
    1708
    1709
    1710
    1711
    1712
    1713
    1714
    1715
    1716
    1717
    1718
    1719
    1720
    1721
    1722
    1723
    1724
    1725
    1726
    1727
    1728
    1729
    1730
    1731
    1732
    1733
    1734
    1735
    1736
    1737
    1738
    1739
    1740
    1741
    1742
    1743
    1744
    1745
    1746
    1747
    1748
    1749
    1750
    1751
    1752
    1753
    1754
    1755
    1756
    1757
    1758
    1759
    1760
    1761
    1762
    1763
    1764
    1765
    1766
    1767
    1768
    1769
    1770
    1771
    1772
    1773
    1774
    1775
    1776
    1777
    1778
    1779
    1780
    1781
    1782
    1783
    1784
    1785
    1786
    1787
    1788
    1789
    1790
    1791
    1792
    1793
    1794
    1795
    1796
    1797
    1798
    1799
    1800
    1801
    1802
    1803
    1804
    1805
    1806
    1807
    1808
    1809
    1810
    1811
    1812
    1813
    1814
    1815
    1816
    1817
    1818
    1819
    1820
    1821
    1822
    1823
    1824
    1825
    1826
    1827
    1828
    1829
    1830
    1831
    1832
    1833
    1834
    1835
    1836
    1837
    1838
    1839
    1840
    1841
    1842
    1843
    1844
    1845
    1846
    1847
    1848
    1849
    1850
    1851
    1852
    1853
    1854
    1855
    1856
    1857
    1858
    1859
    1860
    1861
    1862
    1863
    1864
    1865
    1866
    1867
    1868
    1869
    1870
    1871
    1872
    1873
    1874
    1875
    1876
    1877
    1878
    1879
    1880
    1881
    1882
    1883
    1884
    1885
    1886
    1887
    1888
    1889
    1890
    1891
    1892
    1893
    1894
    1895
    1896
    1897
    1898
    1899
    1900
    1901
    1902
    1903
    1904
    1905
    1906
    1907
    1908
    1909
    1910
    1911
    1912
    1913
    1914
    1915
    1916
    1917
    1918
    1919
    1920
    1921
    1922
    1923
    1924
    1925
    1926
    1927
    1928
    1929
    1930
    1931
    1932
    1933
    1934
    1935
    1936
    1937
    1938
    1939
    1940
    1941
    1942
    1943
    1944
    1945
    1946
    1947
    1948
    1949
    1950
    1951
    1952
    1953
    1954
    1955
    1956
    1957
    1958
    1959
    1960
    1961
    1962
    1963
    1964
    1965
    1966
    1967
    1968
    1969
    1970
    1971
    1972
    1973
    1974
    1975
    1976
    1977
    1978
    1979
    1980
    1981
    1982
    1983
    1984
    1985
    1986
    1987
    1988
    1989
    1990
    1991
    1992
    1993
    1994
    1995
    1996
    1997
    1998
    1999
    2000
    2001
    2002
    2003
    2004
    2005
    2006
    2007
    2008
    2009
    2010
    2011
    2012
    2013
    2014
    2015
    2016
    2017
    2018
    2019
    2020
    2021
    2022
    2023
    2024
    2025
    2026
    2027
    2028
    2029
    2030
    2031
    2032
    2033
    2034
    2035
    2036
    2037
    2038
    2039
    2040
    2041
    2042
    2043
    2044
    2045
    2046
    2047
    2048
    2049
    2050
    2051
    2052
    2053
    2054
    2055
    2056
    2057
    2058
    2059
    2060
    2061
    2062
    2063
    2064
    2065
    2066
    2067
    2068
    2069
    2070
    2071
    2072
    2073
    2074
    2075
    2076
    2077
    2078
    2079
    2080
    2081
    2082
    2083
    2084
    2085
    2086
    2087
    2088
    2089
    2090
    2091
    2092
    2093
    2094
    2095
    2096
    2097
    2098
    2099
    2100
    2101
    2102
    2103
    2104
    2105
    2106
    2107
    2108
    2109
    2110
    2111
    2112
    2113
    2114
    2115
    2116
    2117
    2118
    2119
    2120
    2121
    2122
    2123
    2124
    2125
    2126
    2127
    2128
    2129
    2130
    2131
    2132
    2133
    2134
    2135
    2136
    2137
    2138
    2139
    2140
    2141
    2142
    2143
    2144
    2145
    2146
    2147
    2148
    2149
    2150
    2151
    2152
    2153
    2154
    2155
    2156
    2157
    2158
    2159
    2160
    2161
    2162
    2163
    2164
    2165
    2166
    2167
    2168
    2169
    2170
    2171
    2172
    2173
    2174
    2175
    2176
    2177
    2178
    2179
    2180
    2181
    2182
    2183
    2184
    2185
    2186
    2187
    2188
    2189
    2190
    2191
    2192
    2193
    2194
    2195
    2196
    2197
    2198
    2199
    2200
    2201
    2202
    2203
    2204
    2205
    2206
    2207
    2208
    2209
    2210
    2211
    2212
    2213
    2214
    2215
    2216
    2217
    2218
    2219
    2220
    2221
    2222
    2223
    2224
    2225
    2226
    2227
    2228
    2229
    2230
    2231
    2232
    2233
    2234
    2235
    2236
    2237
    2238
    2239
    2240
    2241
    2242
    2243
    2244
    2245
    2246
    2247
    2248
    2249
    2250
    2251
    2252
    2253
    2254
    2255
    2256
    2257
    2258
    2259
    2260
    2261
    2262
    2263
    2264
    2265
    2266
    2267
    2268
    2269
    2270
    2271
    2272
    2273
    2274
    2275
    2276
    2277
    2278
    2279
    2280
    2281
    2282
    2283
    2284
    2285
    2286
    2287
    2288
    2289
    2290
    2291
    2292
    2293
    2294
    2295
    2296
    2297
    2298
    2299
    2300
    2301
    2302
    2303
    2304
    2305
    2306
    2307
    2308
    2309
    2310
    2311
    2312
    2313
    2314
    2315
    2316
    2317
    2318
    2319
    2320
    2321
    2322
    2323
    2324
    2325
    2326
    2327
    2328
    2329
    2330
    2331
    2332
    2333
    2334
    2335
    2336
    2337
    2338
    2339
    2340
    2341
    2342
    2343
    2344
    2345
    2346
    2347
    2348
    2349
    2350
    2351
    2352
    2353
    2354
    2355
    2356
    2357
    2358
    2359
    2360
    2361
    2362
    2363
    2364
    2365
    2366
    2367
    2368
    2369
    2370
    2371
    2372
    2373
    2374
    2375
    2376
    2377
    2378
    2379
    2380
    2381
    2382
    2383
    2384
    2385
    2386
    2387
    2388
    2389
    2390
    2391
    2392
    2393
    2394
    2395
    2396
    2397
    2398
    2399
    2400
    2401
    2402
    2403
    2404
    2405
    2406
    2407
    2408
    2409
    2410
    2411
    2412
    2413
    2414
    2415
    2416
    2417
    2418
    2419
    2420
    2421
    2422
    2423
    2424
    2425
    2426
    2427
    2428
    2429
    2430
    2431
    2432
    2433
    2434
    2435
    2436
    2437
    2438
    2439
    2440
    2441
    2442
    2443
    2444
    2445
    2446
    2447
    2448
    2449
    2450
    2451
    2452
    2453
    2454
    2455
    2456
    2457
    2458
    2459
    2460
    2461
    2462
    2463
    2464
    2465
    2466
    2467
    2468
    2469
    2470
    2471
    2472
    2473
    2474
    2475
    2476
    2477
    2478
    2479
    2480
    2481
    2482
    2483
    2484
    2485
    2486
    2487
    2488
    2489
    2490
    2491
    2492
    2493
    2494
    2495
    2496
    2497
    2498
    2499
    2500
    2501
    2502
    2503
    2504
    2505
    2506
    2507
    2508
    2509
    2510
    2511
    2512
    2513
    2514
    2515
    2516
    2517
    2518
    2519
    2520
    2521
    2522
    2523
    2524
    2525
    2526
    2527
    2528
    2529
    2530
    2531
    2532
    2533
    2534
    2535
    2536
    2537
    2538
    2539
    2540
    2541
    2542
    2543
    2544
    2545
    2546
    2547
    2548
    2549
    2550
    2551
    2552
    2553
    2554
    2555
    2556
    2557
    2558
    2559
    2560
    2561
    2562
    2563
    2564
    2565
    2566
    2567
    2568
    2569
    2570
    2571
    2572
    2573
    2574
    2575
    2576
    2577
    2578
    2579
    2580
    2581
    2582
    2583
    2584
    2585
    2586
    2587
    2588
    2589
    2590
    2591
    2592
    2593
    2594
    2595
    2596
    2597
    2598
    2599
    2600
    2601
    2602
    2603
    2604
    2605
    2606
    2607
    2608
    2609
    2610
    2611
    2612
    2613
    2614
    2615
    2616
    2617
    2618
    2619
    2620
    2621
    2622
    2623
    2624
    2625
    2626
    2627
    2628
    2629
    2630
    2631
    2632
    2633
    2634
    2635
    2636
    2637
    2638
    2639
    2640
    2641
    2642
    2643
    2644
    2645
    2646
    2647
    2648
    2649
    2650
    2651
    2652
    2653
    2654
    2655
    2656
    2657
    2658
    2659
    2660
    2661
    2662
    2663
    2664
    2665
    2666
    2667
    2668
    2669
    2670
    2671
    2672
    2673
    2674
    2675
    2676
    2677
    2678
    2679
    2680
    2681
    2682
    2683
    2684
    2685
    2686
    2687
    2688
    2689
    2690
    2691
    2692
    2693
    2694
    2695
    2696
    2697
    2698
    2699
    2700
    2701
    2702
    2703
    2704
    2705
    2706
    2707
    2708
    2709
    2710
    2711
    2712
    2713
    2714
    2715
    2716
    2717
    2718
    2719
    2720
    2721
    2722
    2723
    2724
    2725
    2726
    2727
    2728
    2729
    2730
    2731
    2732
    2733
    2734
    2735
    2736
    2737
    2738
    2739
    2740
    2741
    2742
    2743
    2744
    2745
    2746
    2747
    2748
    2749
    2750
    2751
    2752
    2753
    2754
    2755
    2756
    2757
    2758
    2759
    2760
    2761
    2762
    2763
    2764
    2765
    2766
    2767
    2768
    2769
    2770
    2771
    2772
    2773
    2774
    2775
    2776
    2777
    2778
    2779
    2780
    2781
    2782
    2783
    2784
    2785
    2786
    2787
    2788
    2789
    2790
    2791
    2792
    2793
    2794
    2795
    2796
    2797
    2798
    2799
    2800
    2801
    2802
    2803
    2804
    2805
    2806
    2807
    2808
    2809
    2810
    2811
    2812
    2813
    2814
    2815
    2816
    2817
    2818
    2819
    2820
    2821
    2822
    2823
    2824
    2825
    2826
    2827
    2828
    2829
    2830
    2831
    2832
    2833
    2834
    2835
    2836
    2837
    2838
    2839
    2840
    2841
    2842
    2843
    2844
    2845
    2846
    2847
    2848
    2849
    2850
    2851
    2852
    2853
    2854
    2855
    2856
    2857
    2858
    2859
    2860
    2861
    2862
    2863
    2864
    2865
    2866
    2867
    2868
    2869
    2870
    2871
    2872
    2873
    2874
    2875
    2876
    2877
    2878
    2879
    2880
    2881
    2882
    2883
    2884
    2885
    2886
    2887
    2888
    2889
    2890
    2891
    2892
    2893
    2894
    2895
    2896
    2897
    2898
    2899
    2900
    2901
    2902
    2903
    2904
    2905
    2906
    2907
    2908
    2909
    2910
    2911
    2912
    2913
    2914
    2915
    2916
    2917
    2918
    2919
    2920
    2921
    2922
    2923
    2924
    2925
    2926
    2927
    2928
    2929
    2930
    2931
    2932
    2933
    2934
    2935
    2936
    2937
    2938
    2939
    2940
    2941
    2942
    2943
    2944
    2945
    2946
    2947
    2948
    2949
    2950
    2951
    2952
    2953
    2954
    2955
    2956
    2957
    2958
    2959
    2960
    2961
    2962
    2963
    2964
    2965
    2966
    2967
    2968
    2969
    2970
    2971
    2972
    2973
    2974
    2975
    2976
    2977
    2978
    2979
    2980
    2981
    2982
    2983
    2984
    2985
    2986
    2987
    2988
    2989
    2990
    2991
    2992
    2993
    2994
    2995
    2996
    2997
    2998
    2999
    3000
    3001
    3002
    3003
    3004
    3005
    3006
    3007
    3008
    3009
    3010
    3011
    3012
    3013
    3014
    3015
    3016
    3017
    3018
    3019
    3020
    3021
    3022
    3023
    3024
    3025
    3026
    3027
    3028
    3029
    3030
    3031
    3032
    3033
    3034
    3035
    3036
    3037
    3038
    3039
    3040
    3041
    3042
    3043
    3044
    3045
    3046
    3047
    3048
    3049
    3050
    3051
    3052
    3053
    3054
    3055
    3056
    3057
    3058
    3059
    3060
    3061
    3062
    3063
    3064
    3065
    3066
    3067
    3068
    3069
    3070
    3071
    3072
    3073
    3074
    3075
    3076
    3077
    3078
    3079
    3080
    3081
    3082
    3083
    3084
    3085
    3086
    3087
    3088
    3089
    3090
    3091
    3092
    3093
    3094
    3095
    3096
    3097
    3098
    3099
    3100
    3101
    3102
    3103
    3104
    3105
    3106
    3107
    3108
    3109
    3110
    3111
    3112
    3113
    3114
    3115
    3116
    3117
    3118
    3119
    3120
    3121
    3122
    3123
    3124
    3125
    3126
    3127
    3128
    3129
    3130
    3131
    3132
    3133
    3134
    3135
    3136
    3137
    3138
    3139
    3140
    3141
    3142
    3143
    3144
    3145
    3146
    3147
    3148
    3149
    3150
    3151
    3152
    3153
    3154
    3155
    3156
    3157
    3158
    3159
    3160
    3161
    3162
    3163
    3164
    3165
    3166
    3167
    3168
    3169
    3170
    3171
    3172
    3173
    3174
    3175
    3176
    3177
    3178
    3179
    3180
    3181
    3182
    3183
    3184
    3185
    3186
    3187
    3188
    3189
    3190
    3191
    3192
    3193
    3194
    3195
    3196
    3197
    3198
    3199
    3200
    3201
    3202
    3203
    3204
    3205
    3206
    3207
    3208
    3209
    3210
    3211
    3212
    3213
    3214
    3215
    3216
    3217
    3218
    3219
    3220
    3221
    3222
    3223
    3224
    3225
    3226
    3227
    3228
    3229
    3230
    3231
    3232
    3233
    3234
    3235
    3236
    3237
    3238
    3239
    3240
    3241
    3242
    3243
    3244
    3245
    3246
    3247
    3248
    3249
    3250
    3251
    3252
    3253
    3254
    3255
    3256
    3257
    3258
    3259
    3260
    3261
    3262
    3263
    3264
    3265
    3266
    3267
    3268
    3269
    3270
    3271
    3272
    3273
    3274
    3275
    3276
    3277
    3278
    3279
    3280
    3281
    3282
    3283
    3284
    3285
    3286
    3287
    3288
    3289
    3290
    3291
    3292
    3293
    3294
    3295
    3296
    3297
    3298
    3299
    3300
    3301
    3302
    3303
    3304
    3305
    3306
    3307
    3308
    3309
    3310
    3311
    3312
    3313
    3314
    3315
    3316
    3317
    3318
    3319
    3320
    3321
    3322
    3323
    3324
    3325
    3326
    3327
    3328
    3329
    3330
    3331
    3332
    3333
    3334
    3335
    3336
    3337
    3338
    3339
    3340
    3341
    3342
    3343
    3344
    3345
    3346
    3347
    3348
    3349
    3350
    3351
    3352
    3353
    3354
    3355
    3356
    3357
    3358
    3359
    3360
    3361
    3362

     <script setup lang="ts">
    import { getCsrfToken } from '@/lib/csrf';
    import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue';
    import grapesjs from 'grapesjs';
    import 'grapesjs/dist/css/grapes.min.css';
    import gjsPresetWebpage from 'grapesjs-preset-webpage';

    interface Props {
        modelValue: string;
        module: string;
        disabled?: boolean;
        cssStyles?: string;
        imageUploadUrl?: string;
    }

    const props = withDefaults(defineProps<Props>(), {
        disabled: false,
        cssStyles: '',
        imageUploadUrl: '/administration/pdf-templates/upload-image',
    });

    const emit = defineEmits<{
        'update:modelValue': [value: string];
        'update:cssStyles': [value: string];
    }>();

    const editorContainer = ref<HTMLElement | null>(null);
    let editor: any = null;
    const isClassesPanelCollapsed = ref(false);
    const CUSTOM_STYLE_ID = 'gjs-custom-style';
    const STYLES_PANEL_ID = 'styles-panel';
    const CLASSES_PANEL_SELECTOR = '.gjs-clm-tags';
    const TOGGLE_ICON_SELECTOR = '.toggle-icon';
    const FALLBACK_EDITOR_IMAGE_SELECTOR = 'img[data-gjs-type="image"]';

    function getEditorFrameDocument(): Document | null {
        const frame = editor?.Canvas?.getFrameEl?.();
        if (!frame) {
            return null;
        }

        return frame.contentDocument || (frame as any).contentWindow?.document || null;
    }

    function replaceFrameCustomStyle(css: string): void {
        const frameDoc = getEditorFrameDocument();
        if (!frameDoc) {
            return;
        }

        frameDoc.getElementById(CUSTOM_STYLE_ID)?.remove();

        const style = frameDoc.createElement('style');
        style.id = CUSTOM_STYLE_ID;
        style.textContent = css;
        frameDoc.head.appendChild(style);
    }

    function findFrameImageElement(src: string): Element | null {
        const frameDoc = getEditorFrameDocument();
        if (!frameDoc) {
            return null;
        }

        return (src ? frameDoc.querySelector(`img[src="${src}"]`) : null)
            || frameDoc.querySelector(FALLBACK_EDITOR_IMAGE_SELECTOR);
    }

    function markFrameImageAsUploaded(src: string): void {
        const imgEl = findFrameImageElement(src);
        if (!imgEl) {
            return;
        }

        imgEl.setAttribute('data-uploaded-image', 'true');
        if (src) {
            imgEl.setAttribute('src', src);
        }
    }

    function getStylesPanelElement(): HTMLElement | null {
        return document.getElementById(STYLES_PANEL_ID);
    }

    // Define available variables per module
    const moduleVariables: Record<string, Array<{ label: string; value: string; category: string }>> = {
        invoice: [
            // Company variables
            { label: 'Company Name', value: '{{company.name}}', category: 'Company' },
            { label: 'Company Legal Name', value: '{{company.legal_name}}', category: 'Company' },
            { label: 'Company Tagline', value: '{{company.tagline}}', category: 'Company' },
            { label: 'Company Address', value: '{{company.address}}', category: 'Company' },
            { label: 'Company City', value: '{{company.city}}', category: 'Company' },
            { label: 'Company State', value: '{{company.state}}', category: 'Company' },
            { label: 'Company Postal Code', value: '{{company.postal_code}}', category: 'Company' },
            { label: 'Company Country', value: '{{company.country}}', category: 'Company' },
            { label: 'Company Phone', value: '{{company.phone}}', category: 'Company' },
            { label: 'Company Email', value: '{{company.email}}', category: 'Company' },
            { label: 'Company Website', value: '{{company.website}}', category: 'Company' },
            { label: 'Company VAT Number', value: '{{company.vat_number}}', category: 'Company' },
            { label: 'Company Description', value: '{{company.description}}', category: 'Company' },
            { label: 'Company Logo', value: '{{company.getLogoPathForPdf()}}', category: 'Company' },
            { label: 'Invoice Footer', value: '{{company.invoice_footer}}', category: 'Company' },
            { label: 'Jobcard Footer', value: '{{company.jobcard_footer}}', category: 'Company' },
            { label: 'Quote Footer', value: '{{company.quote_footer}}', category: 'Company' },
            { label: 'Default Invoice Terms', value: '{{company.default_invoice_terms}}', category: 'Company' },
            { label: 'Default Quote Terms', value: '{{company.default_quote_terms}}', category: 'Company' },
            { label: 'Default Jobcard Terms', value: '{{company.default_jobcard_terms}}', category: 'Company' },
            // Invoice variables
            { label: 'Invoice Number', value: '{{invoice.invoice_number}}', category: 'Invoice' },
            { label: 'Invoice Title', value: '{{invoice.title}}', category: 'Invoice' },
            { label: 'Invoice Description', value: '{{invoice.description}}', category: 'Invoice' },
            { label: 'Invoice Date', value: '{{invoice.invoice_date}}', category: 'Invoice' },
            { label: 'Due Date', value: '{{invoice.due_date}}', category: 'Invoice' },
            { label: 'Invoice Status', value: '{{invoice.status}}', category: 'Invoice' },
            { label: 'Subtotal', value: '{{invoice.subtotal}}', category: 'Invoice' },
            { label: 'Tax Amount', value: '{{invoice.tax_amount}}', category: 'Invoice' },
            { label: 'Document title (Tax Invoice / Invoice)', value: '{{invoice.document_title}}', category: 'Invoice' },
            { label: 'Total', value: '{{invoice.total}}', category: 'Invoice' },
            { label: 'Notes', value: '{{invoice.notes}}', category: 'Invoice' },
            { label: 'Payment terms (COD, Net 30, etc.)', value: '{{invoice.terms}}', category: 'Invoice' },
            { label: 'Terms & Conditions (body text)', value: '{{invoice.terms_conditions}}', category: 'Invoice' },
            // Customer variables
            { label: 'Customer Name', value: '{{invoice.customer.name}}', category: 'Customer' },
            { label: 'Customer Account Code', value: '{{invoice.customer.account_code}}', category: 'Customer' },
            { label: 'Customer Address', value: '{{invoice.customer.address}}', category: 'Customer' },
            { label: 'Customer City', value: '{{invoice.customer.city}}', category: 'Customer' },
            { label: 'Customer Email', value: '{{invoice.customer.email}}', category: 'Customer' },
            { label: 'Customer Phone', value: '{{invoice.customer.phone}}', category: 'Customer' },
            { label: 'Customer VAT Number', value: '{{invoice.customer.vat_number}}', category: 'Customer' },
            // Line Items
            { label: 'Line Items Loop', value: '{{#each invoice.lineItems}}{{this.description_with_code}}{{/each}}', category: 'Line Items' },
        ],
        quote: [
            // Company variables (same as invoice)
            { label: 'Company Name', value: '{{company.name}}', category: 'Company' },
            { label: 'Company Legal Name', value: '{{company.legal_name}}', category: 'Company' },
            { label: 'Company Tagline', value: '{{company.tagline}}', category: 'Company' },
            { label: 'Company Address', value: '{{company.address}}', category: 'Company' },
            { label: 'Company City', value: '{{company.city}}', category: 'Company' },
            { label: 'Company Phone', value: '{{company.phone}}', category: 'Company' },
            { label: 'Company Email', value: '{{company.email}}', category: 'Company' },
            { label: 'Company VAT Number', value: '{{company.vat_number}}', category: 'Company' },
            { label: 'Company Logo', value: '{{company.getLogoPathForPdf()}}', category: 'Company' },
            // Quote variables
            { label: 'Quote Number', value: '{{quote.quote_number}}', category: 'Quote' },
            { label: 'Quote Title', value: '{{quote.title}}', category: 'Quote' },
            { label: 'Quote Description', value: '{{quote.description}}', category: 'Quote' },
            { label: 'Quote Date', value: '{{quote.quote_date}}', category: 'Quote' },
            { label: 'Expiry Date', value: '{{quote.expiry_date}}', category: 'Quote' },
            { label: 'Quote Status', value: '{{quote.status}}', category: 'Quote' },
            { label: 'Subtotal', value: '{{quote.subtotal}}', category: 'Quote' },
            { label: 'Tax Amount', value: '{{quote.tax_amount}}', category: 'Quote' },
            { label: 'Total', value: '{{quote.total}}', category: 'Quote' },
            { label: 'Notes', value: '{{quote.notes}}', category: 'Quote' },
            { label: 'Terms', value: '{{quote.terms_conditions}}', category: 'Quote' },
            // Customer variables
            { label: 'Customer Name', value: '{{quote.customer.name}}', category: 'Customer' },
            { label: 'Customer Account Code', value: '{{quote.customer.account_code}}', category: 'Customer' },
            { label: 'Customer Address', value: '{{quote.customer.address}}', category: 'Customer' },
            { label: 'Customer City', value: '{{quote.customer.city}}', category: 'Customer' },
            { label: 'Customer Email', value: '{{quote.customer.email}}', category: 'Customer' },
            { label: 'Customer Phone', value: '{{quote.customer.phone}}', category: 'Customer' },
            { label: 'Customer VAT Number', value: '{{quote.customer.vat_number}}', category: 'Customer' },
            // Line Items
            { label: 'Line Items Loop', value: '{{#each quote.lineItems}}{{this.description_with_code}}{{/each}}', category: 'Line Items' },
        ],
        jobcard: [
            // Company variables
            { label: 'Company Name', value: '{{company.name}}', category: 'Company' },
            { label: 'Company Legal Name', value: '{{company.legal_name}}', category: 'Company' },
            { label: 'Company Tagline', value: '{{company.tagline}}', category: 'Company' },
            { label: 'Company Address', value: '{{company.address}}', category: 'Company' },
            { label: 'Company City', value: '{{company.city}}', category: 'Company' },
            { label: 'Company State', value: '{{company.state}}', category: 'Company' },
            { label: 'Company Postal Code', value: '{{company.postal_code}}', category: 'Company' },
            { label: 'Company Country', value: '{{company.country}}', category: 'Company' },
            { label: 'Company Phone', value: '{{company.phone}}', category: 'Company' },
            { label: 'Company Email', value: '{{company.email}}', category: 'Company' },
            { label: 'Company Website', value: '{{company.website}}', category: 'Company' },
            { label: 'Company VAT Number', value: '{{company.vat_number}}', category: 'Company' },
            { label: 'Company Description', value: '{{company.description}}', category: 'Company' },
            { label: 'Company Logo', value: '{{company.getLogoPathForPdf()}}', category: 'Company' },
            { label: 'Invoice Footer', value: '{{company.invoice_footer}}', category: 'Company' },
            { label: 'Jobcard Footer', value: '{{company.jobcard_footer}}', category: 'Company' },
            { label: 'Quote Footer', value: '{{company.quote_footer}}', category: 'Company' },
            { label: 'Default Invoice Terms', value: '{{company.default_invoice_terms}}', category: 'Company' },
            { label: 'Default Quote Terms', value: '{{company.default_quote_terms}}', category: 'Company' },
            { label: 'Default Jobcard Terms', value: '{{company.default_jobcard_terms}}', category: 'Company' },
            // Jobcard variables
            { label: 'Job Number', value: '{{jobcard.job_number}}', category: 'Jobcard' },
            { label: 'Jobcard Title', value: '{{jobcard.title}}', category: 'Jobcard' },
            { label: 'Jobcard Description', value: '{{jobcard.description}}', category: 'Jobcard' },
            { label: 'Start Date', value: '{{jobcard.start_date}}', category: 'Jobcard' },
            { label: 'Due Date', value: '{{jobcard.due_date}}', category: 'Jobcard' },
            { label: 'Status', value: '{{jobcard.status}}', category: 'Jobcard' },
            { label: 'Subtotal', value: '{{jobcard.subtotal}}', category: 'Jobcard' },
            { label: 'Tax Amount', value: '{{jobcard.tax_amount}}', category: 'Jobcard' },
            { label: 'Total', value: '{{jobcard.total}}', category: 'Jobcard' },
            { label: 'Jobcard Notes', value: '{{jobcard.notes}}', category: 'Jobcard' },
            { label: 'Jobcard Terms', value: '{{jobcard.terms_conditions}}', category: 'Jobcard' },
            // Customer variables
            { label: 'Customer Name', value: '{{jobcard.customer.name}}', category: 'Customer' },
            { label: 'Customer Account Code', value: '{{jobcard.customer.account_code}}', category: 'Customer' },
            { label: 'Customer Address', value: '{{jobcard.customer.address}}', category: 'Customer' },
            { label: 'Customer City', value: '{{jobcard.customer.city}}', category: 'Customer' },
            { label: 'Customer Email', value: '{{jobcard.customer.email}}', category: 'Customer' },
            { label: 'Customer Phone', value: '{{jobcard.customer.phone}}', category: 'Customer' },
            { label: 'Customer VAT Number', value: '{{jobcard.customer.vat_number}}', category: 'Customer' },
            // Line Items
            { label: 'Line Items Loop', value: '{{#each jobcard.lineItems}}{{this.description_with_code}}{{/each}}', category: 'Line Items' },
        ],
        'proforma-invoice': [
            // Same as quote
            { label: 'Company Name', value: '{{company.name}}', category: 'Company' },
            { label: 'Company Legal Name', value: '{{company.legal_name}}', category: 'Company' },
            { label: 'Company Tagline', value: '{{company.tagline}}', category: 'Company' },
            { label: 'Company Address', value: '{{company.address}}', category: 'Company' },
            { label: 'Company City', value: '{{company.city}}', category: 'Company' },
            { label: 'Company Phone', value: '{{company.phone}}', category: 'Company' },
            { label: 'Company Email', value: '{{company.email}}', category: 'Company' },
            { label: 'Company VAT Number', value: '{{company.vat_number}}', category: 'Company' },
            { label: 'Company Logo', value: '{{company.getLogoPathForPdf()}}', category: 'Company' },
            // Quote variables (proforma uses quote data)
            { label: 'Quote Number', value: '{{quote.quote_number}}', category: 'Quote' },
            { label: 'Quote Title', value: '{{quote.title}}', category: 'Quote' },
            { label: 'Quote Description', value: '{{quote.description}}', category: 'Quote' },
            { label: 'Quote Date', value: '{{quote.quote_date}}', category: 'Quote' },
            { label: 'Expiry Date', value: '{{quote.expiry_date}}', category: 'Quote' },
            { label: 'Quote Status', value: '{{quote.status}}', category: 'Quote' },
            { label: 'Subtotal', value: '{{quote.subtotal}}', category: 'Quote' },
            { label: 'Tax Amount', value: '{{quote.tax_amount}}', category: 'Quote' },
            { label: 'Total', value: '{{quote.total}}', category: 'Quote' },
            { label: 'Notes', value: '{{quote.notes}}', category: 'Quote' },
            { label: 'Terms', value: '{{quote.terms_conditions}}', category: 'Quote' },
            // Customer variables
            { label: 'Customer Name', value: '{{quote.customer.name}}', category: 'Customer' },
            { label: 'Customer Account Code', value: '{{quote.customer.account_code}}', category: 'Customer' },
            { label: 'Customer Address', value: '{{quote.customer.address}}', category: 'Customer' },
            { label: 'Customer City', value: '{{quote.customer.city}}', category: 'Customer' },
            { label: 'Customer Email', value: '{{quote.customer.email}}', category: 'Customer' },
            { label: 'Customer Phone', value: '{{quote.customer.phone}}', category: 'Customer' },
            { label: 'Customer VAT Number', value: '{{quote.customer.vat_number}}', category: 'Customer' },
            // Line Items
            { label: 'Line Items Loop', value: '{{#each quote.lineItems}}{{this.description_with_code}}{{/each}}', category: 'Line Items' },
        ],
        'purchase-order': [
            // Company variables
            { label: 'Company Name', value: '{{company.name}}', category: 'Company' },
            { label: 'Company Legal Name', value: '{{company.legal_name}}', category: 'Company' },
            { label: 'Company Tagline', value: '{{company.tagline}}', category: 'Company' },
            { label: 'Company Address', value: '{{company.address}}', category: 'Company' },
            { label: 'Company City', value: '{{company.city}}', category: 'Company' },
            { label: 'Company State', value: '{{company.state}}', category: 'Company' },
            { label: 'Company Postal Code', value: '{{company.postal_code}}', category: 'Company' },
            { label: 'Company Country', value: '{{company.country}}', category: 'Company' },
            { label: 'Company Phone', value: '{{company.phone}}', category: 'Company' },
            { label: 'Company Email', value: '{{company.email}}', category: 'Company' },
            { label: 'Company Website', value: '{{company.website}}', category: 'Company' },
            { label: 'Company VAT Number', value: '{{company.vat_number}}', category: 'Company' },
            { label: 'Company Description', value: '{{company.description}}', category: 'Company' },
            { label: 'Company Logo', value: '{{company.logo_path_for_pdf}}', category: 'Company' },
            // Purchase Order variables
            { label: 'PO Number', value: '{{purchaseOrder.po_number}}', category: 'Purchase Order' },
            { label: 'Order Date', value: '{{purchaseOrder.order_date}}', category: 'Purchase Order' },
            { label: 'Expected Delivery Date', value: '{{purchaseOrder.expected_delivery_date}}', category: 'Purchase Order' },
            { label: 'Received Date', value: '{{purchaseOrder.received_date}}', category: 'Purchase Order' },
            { label: 'Status', value: '{{purchaseOrder.status}}', category: 'Purchase Order' },
            { label: 'Subtotal', value: '{{purchaseOrder.subtotal}}', category: 'Purchase Order' },
            { label: 'Tax Amount', value: '{{purchaseOrder.tax_amount}}', category: 'Purchase Order' },
            { label: 'Total', value: '{{purchaseOrder.total}}', category: 'Purchase Order' },
            { label: 'Notes', value: '{{purchaseOrder.notes}}', category: 'Purchase Order' },
            { label: 'Terms', value: '{{purchaseOrder.terms}}', category: 'Purchase Order' },
            // Supplier variables
            { label: 'Supplier Name', value: '{{purchaseOrder.supplier.name}}', category: 'Supplier' },
            { label: 'Supplier Address', value: '{{purchaseOrder.supplier.address}}', category: 'Supplier' },
            { label: 'Supplier City', value: '{{purchaseOrder.supplier.city}}', category: 'Supplier' },
            { label: 'Supplier Postal Code', value: '{{purchaseOrder.supplier.postal_code}}', category: 'Supplier' },
            { label: 'Supplier Phone', value: '{{purchaseOrder.supplier.phone}}', category: 'Supplier' },
            { label: 'Supplier Email', value: '{{purchaseOrder.supplier.email}}', category: 'Supplier' },
            // Line Items
            { label: 'Line Items Loop', value: '{{#each purchaseOrder.items}}{{this.description_with_code}}{{/each}}', category: 'Line Items' },
        ],
        'customer-contact': [
            { label: 'Company Name', value: '{{company.name}}', category: 'Company' },
            { label: 'Company Email', value: '{{company.email}}', category: 'Company' },
            { label: 'Company Phone', value: '{{company.phone}}', category: 'Company' },
            { label: 'Company Website', value: '{{company.website}}', category: 'Company' },
            { label: 'Customer Name', value: '{{customer.name}}', category: 'Customer' },
            { label: 'Customer Email', value: '{{customer.email}}', category: 'Customer' },
            { label: 'Customer Phone', value: '{{customer.phone}}', category: 'Customer' },
            { label: 'Customer Account Code', value: '{{customer.account_code}}', category: 'Customer' },
            { label: 'Contact Name', value: '{{contact.name}}', category: 'Contact' },
            { label: 'Contact Email', value: '{{contact.email}}', category: 'Contact' },
            { label: 'Contact Phone', value: '{{contact.phone}}', category: 'Contact' },
            { label: 'Contact Position', value: '{{contact.position}}', category: 'Contact' },
            { label: 'Current User Name', value: '{{user.name}}', category: 'User' },
            { label: 'Current User Email', value: '{{user.email}}', category: 'User' },
            { label: 'Today Date', value: '{{date.today}}', category: 'Dates' },
            { label: 'Current Date Time', value: '{{date.now}}', category: 'Dates' },
        ],
    };

    const availableVariables = ref(moduleVariables[props.module] || []);

    // Group variables by category
    const groupedVariables = computed(() => {
        const groups: Record<string, typeof availableVariables.value> = {};
        availableVariables.value.forEach((variable) => {
            if (!groups[variable.category]) {
                groups[variable.category] = [];
            }
            groups[variable.category].push(variable);
        });
        return groups;
    });

    // Default templates for each module (converted from Blade to Handlebars)
    const defaultTemplates: Record<string, { html: string; css: string }> = {
        invoice: {
            css: `body {
        font-family: Arial, sans-serif;
        line-height: 1.4;
        color: #000;
        margin: 0;
        padding: 20px;
        font-size: 12px;
        background: white;
    }
    .page-header {
        text-align: right;
        font-size: 10px;
        color: #666;
        margin-bottom: 10px;
    }
    .document-title {
        text-align: center;
        font-size: 24px;
        font-weight: bold;
        color: #000;
        margin: 20px 0;
        text-transform: uppercase;
    }
    .company-section {
        display: table;
        width: 100%;
        margin-bottom: 20px;
        border: 1px solid #000;
        padding: 15px;
    }
    .company-left {
        display: table-cell;
        width: 60%;
        vertical-align: top;
    }
    .company-right {
        display: table-cell;
        width: 40%;
        vertical-align: top;
        text-align: left;
    }
    .company-logo {
        max-width: 240px;
        max-height: 120px;
        margin-bottom: 10px;
    }
    .company-name {
        font-size: 16px;
        font-weight: bold;
        color: #000;
        margin-bottom: 5px;
    }
    .company-tagline {
        font-size: 11px;
        color: #666;
        margin-bottom: 15px;
    }
    .company-details {
        font-size: 11px;
        line-height: 1.3;
    }
    .company-details p {
        margin: 2px 0;
    }
    .banking-details {
        text-align: left;
        font-size: 11px;
    }
    .banking-details h4 {
        margin: 0 0 8px 0;
        font-size: 12px;
        font-weight: bold;
        color: #000;
    }
    .banking-details p {
        margin: 2px 0;
    }
    .customer-section {
        display: table;
        width: 100%;
        margin-bottom: 20px;
    }
    .customer-left {
        display: table-cell;
        width: 60%;
        vertical-align: top;
    }
    .customer-right {
        display: table-cell;
        width: 40%;
        vertical-align: top;
        text-align: right;
    }
    .customer-info h4 {
        margin: 0 0 8px 0;
        font-size: 12px;
        font-weight: bold;
        color: #000;
    }
    .customer-info p {
        margin: 2px 0;
        font-size: 11px;
    }
    .vat-number {
        font-size: 11px;
    }
    .vat-number label {
        font-weight: bold;
    }
    .separator-line {
        border-top: 1px solid #000;
        margin: 15px 0;
    }
    .invoice-details {
        display: table;
        width: 100%;
        margin-bottom: 20px;
    }
    .invoice-detail {
        display: table-cell;
        width: 20%;
        border: 1px solid #000;
        padding: 8px;
        text-align: center;
        font-size: 11px;
    }
    .invoice-detail-label {
        font-weight: bold;
        display: block;
        margin-bottom: 4px;
    }
    .invoice-detail-value {
        color: #000;
    }
    .line-items-table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 20px;
    }
    .line-items-table th,
    .line-items-table td {
        border-bottom: 1px solid #000;
        padding: 8px;
        font-size: 11px;
    }
    .line-items-table th {
        font-weight: bold;
        text-align: left;
        border-bottom: 2px solid #000;
    }
    .line-items-table td {
        text-align: left;
    }
    .line-items-table .text-right {
        text-align: right;
    }
    .totals-section {
        float: right;
        width: 300px;
        margin-top: 20px;
    }
    .total-row {
        display: table;
        width: 100%;
        margin-bottom: 5px;
    }
    .total-row span {
        display: table-cell;
        font-size: 11px;
        padding: 2px 0;
    }
    .total-row span:first-child {
        text-align: left;
    }
    .total-row span:last-child {
        text-align: right;
    }
    .total-row.final {
        font-weight: bold;
        font-size: 12px;
        border-top: 1px solid #000;
        padding-top: 8px;
        margin-top: 8px;
    }
    .terms-section {
        clear: both;
        margin-top: 40px;
        padding-top: 20px;
        border-top: 1px solid #000;
        font-size: 11px;
        text-align: left;
    }
    .terms-section h4 {
        margin: 0 0 10px 0;
        font-size: 12px;
        font-weight: bold;
        color: #000;
    }
    .terms-section p {
        margin: 0 0 8px 0;
        font-size: 11px;
        line-height: 1.4;
    }
    .signature-section {
        clear: both;
        margin-top: 40px;
        padding-top: 20px;
        border-top: 1px solid #000;
    }
    .signature-row {
        display: table;
        width: 100%;
        margin-bottom: 15px;
    }
    .signature-item {
        display: table-cell;
        width: 33.33%;
        text-align: left;
        font-size: 11px;
    }
    .signature-line {
        border-bottom: 1px dashed #000;
        height: 20px;
        margin-top: 5px;
    }
    .payment-clause {
        margin-top: 20px;
        padding-top: 15px;
        border-top: 1px solid #000;
        font-size: 11px;
        text-align: center;
    }
    .footer {
        position: fixed;
        bottom: 20px;
        left: 20px;
        right: 20px;
        font-size: 9px;
        color: #666;
        display: table;
        width: 100%;
    }
    .footer-left {
        display: table-cell;
        text-align: left;
    }
    .footer-right {
        display: table-cell;
        text-align: right;
    }`,
            html: `<div class="page-header">Page 1 of 1</div>
    <div class="document-title">{{invoice.document_title}}</div>
    <div class="company-section">
        <div class="company-left">
            <img src="{{company.getLogoPathForPdf()}}" alt="Company Logo" class="company-logo">
            <div class="company-name">{{company.name}}</div>
            <div class="company-tagline">{{company.tagline}}</div>
            <div class="company-details">
                <p><strong>{{company.legal_name}}</strong></p>
                <p>{{company.address}}</p>
                <p>{{company.city}}</p>
                <p>VAT Number {{company.vat_number}}</p>
                <p>Telephone {{company.phone}}</p>
                <p>Fax {{company.fax}}</p>
            </div>
        </div>
        <div class="company-right">
            <div class="banking-details">
                <h4>Banking Details</h4>
                <p><strong>{{company.bank_account_name}}</strong></p>
                <p>Bank Name: {{company.bank_name}}</p>
                <p>Acc No: {{company.bank_account_number}}</p>
                <p>Sort Code: {{company.bank_sort_code}}</p>
            </div>
        </div>
    </div>
    <div class="customer-section">
        <div class="customer-left">
            <div class="customer-info">
                <h4>To:</h4>
                <p><strong>{{invoice.customer.account_code}}</strong></p>
                <p><strong>{{invoice.customer.name}}</strong></p>
                <p>{{invoice.customer.address}}</p>
                <p>{{invoice.customer.city}}</p>
                <p>{{invoice.customer.postal_code}}</p>
            </div>
        </div>
        <div class="customer-right">
            <div class="vat-number">
                <label>Customer Vat Number</label>
                <div style="border: 1px solid #000; min-height: 20px; margin-top: 5px; padding: 2px 4px;">{{invoice.customer.vat_number}}</div>
            </div>
        </div>
    </div>
    <div class="separator-line"></div>
    <div class="invoice-details">
        <div class="invoice-detail">
            <span class="invoice-detail-label">Account</span>
            <span class="invoice-detail-value">{{invoice.customer.account_code}}</span>
        </div>
        <div class="invoice-detail">
            <span class="invoice-detail-label">Date</span>
            <span class="invoice-detail-value">{{invoice.invoice_date}}</span>
        </div>
        <div class="invoice-detail">
            <span class="invoice-detail-label">Order No</span>
            <span class="invoice-detail-value">{{invoice.order_number}}</span>
        </div>
        <div class="invoice-detail">
            <span class="invoice-detail-label">Job No</span>
            <span class="invoice-detail-value">{{invoice.job_number}}</span>
        </div>
        <div class="invoice-detail">
            <span class="invoice-detail-label">Invoice No</span>
            <span class="invoice-detail-value">{{invoice.invoice_number}}</span>
        </div>
    </div>
    <table class="line-items-table">
        <thead>
            <tr>
                <th>Item Code</th>
                <th>Item Description</th>
                <th class="text-right">QTY</th>
                <th class="text-right">Price (Ex)</th>
                <th class="text-right">Disc %</th>
                <th class="text-right">Tax</th>
                <th class="text-right">Total (Incl)</th>
            </tr>
        </thead>
        <tbody><tr data-handlebars-loop-start="{{#each invoice.lineItems}}" data-handlebars-loop-end="{{/each}}">
                <td>{{this.product.sku}}</td>
                <td>{{this.description_with_code}}</td>
                <td class="text-right">{{this.quantity}}</td>
                <td class="text-right">R{{this.unit_price}}</td>
                <td class="text-right">{{this.discount_percentage}}%</td>
                <td class="text-right">R{{this.tax}}</td>
                <td class="text-right">R{{this.total}}</td>
            </tr></tbody>
    </table>
    <div class="totals-section">
        <div class="total-row">
            <span>Total (Excl):</span>
            <span>R{{invoice.subtotal}}</span>
        </div>
        <div class="total-row">
            <span>Tax:</span>
            <span>R{{invoice.tax_amount}}</span>
        </div>
        <div class="total-row">
            <span>Total (Incl):</span>
            <span>R{{invoice.total}}</span>
        </div>
        <div class="total-row">
            <span>Discount:</span>
            <span>R{{invoice.discount_amount}}</span>
        </div>
        <div class="total-row">
            <span>Rounding:</span>
            <span>R0.00</span>
        </div>
        <div class="total-row">
            <span>Less: Excess:</span>
            <span>R0.00</span>
        </div>
        <div class="total-row final">
            <span>Total (Incl):</span>
            <span>R{{invoice.total}}</span>
        </div>
    </div>
    <div class="terms-section">
        <h4>Description</h4>
        <p>{{invoice.description}}</p>
        <h4>Notes</h4>
        <p>{{invoice.notes}}</p>
        <h4>Terms & Conditions</h4>
        <p>{{invoice.terms_conditions}}</p>
    </div>
    <div class="signature-section">
        <div class="signature-row">
            <div class="signature-item">
                <div>Received by</div>
                <div class="signature-line"></div>
            </div>
            <div class="signature-item">
                <div>Date</div>
                <div class="signature-line"></div>
            </div>
            <div class="signature-item">
                <div>Signed</div>
                <div class="signature-line"></div>
            </div>
        </div>
    </div>
    <div class="footer">
        <div class="footer-left">
            JobCard Online (Registered to {{company.name}})
        </div>
        <div class="footer-right">
            {{date}}
        </div>
    </div>`,
        },
        quote: {
            css: `body {
        font-family: Arial, sans-serif;
        line-height: 1.4;
        color: #000;
        margin: 0;
        padding: 20px;
        font-size: 12px;
        background: white;
    }
    .page-header {
        text-align: right;
        font-size: 10px;
        color: #666;
        margin-bottom: 10px;
    }
    .document-title {
        text-align: center;
        font-size: 28px;
        font-weight: bold;
        color: #000;
        margin: 20px 0;
        text-transform: uppercase;
    }
    .company-section {
        display: table;
        width: 100%;
        margin-bottom: 20px;
        border: 1px solid #000;
        padding: 15px;
    }
    .company-left {
        display: table-cell;
        width: 60%;
        vertical-align: top;
    }
    .company-right {
        display: table-cell;
        width: 40%;
        vertical-align: top;
        text-align: left;
    }
    .company-logo {
        max-width: 220px;
        max-height: 110px;
        margin-bottom: 10px;
    }
    .company-name {
        font-size: 16px;
        font-weight: bold;
        color: #000;
        margin-bottom: 5px;
    }
    .company-tagline {
        font-size: 11px;
        color: #666;
        margin-bottom: 15px;
    }
    .company-details {
        font-size: 11px;
        line-height: 1.3;
    }
    .company-details p {
        margin: 2px 0;
    }
    .banking-details {
        text-align: left;
        font-size: 11px;
    }
    .banking-details h4 {
        margin: 0 0 8px 0;
        font-size: 12px;
        font-weight: bold;
        color: #000;
    }
    .banking-details p {
        margin: 2px 0;
    }
    .customer-section {
        display: table;
        width: 100%;
        margin-bottom: 20px;
    }
    .customer-left {
        display: table-cell;
        width: 60%;
        vertical-align: top;
    }
    .customer-right {
        display: table-cell;
        width: 40%;
        vertical-align: top;
        text-align: right;
    }
    .customer-info h4 {
        margin: 0 0 8px 0;
        font-size: 12px;
        font-weight: bold;
        color: #000;
    }
    .customer-info p {
        margin: 2px 0;
        font-size: 11px;
    }
    .validity-period {
        font-size: 11px;
    }
    .validity-period label {
        font-weight: bold;
    }
    .separator-line {
        border-top: 1px solid #000;
        margin: 15px 0;
    }
    .quote-details {
        display: table;
        width: 100%;
        margin-bottom: 20px;
    }
    .quote-detail {
        display: table-cell;
        width: 25%;
        border: 1px solid #000;
        padding: 8px;
        text-align: center;
        font-size: 11px;
    }
    .quote-detail-label {
        font-weight: bold;
        display: block;
        margin-bottom: 4px;
    }
    .quote-detail-value {
        color: #000;
    }
    .line-items-table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 20px;
    }
    .line-items-table th,
    .line-items-table td {
        border-bottom: 1px solid #000;
        padding: 8px;
        font-size: 11px;
    }
    .line-items-table th {
        font-weight: bold;
        text-align: left;
        border-bottom: 2px solid #000;
    }
    .line-items-table td {
        text-align: left;
    }
    .line-items-table .text-right {
        text-align: right;
    }
    .totals-section {
        float: right;
        width: 300px;
        margin-top: 20px;
    }
    .total-row {
        display: table;
        width: 100%;
        margin-bottom: 5px;
    }
    .total-row span {
        display: table-cell;
        font-size: 11px;
        padding: 2px 0;
    }
    .total-row span:first-child {
        text-align: left;
    }
    .total-row span:last-child {
        text-align: right;
    }
    .total-row.final {
        font-weight: bold;
        font-size: 12px;
        border-top: 1px solid #000;
        padding-top: 8px;
        margin-top: 8px;
    }
    .terms-section {
        clear: both;
        margin-top: 40px;
        padding-top: 20px;
        border-top: 1px solid #000;
        font-size: 11px;
        text-align: left;
    }
    .terms-section h4 {
        margin: 0 0 10px 0;
        font-size: 12px;
        font-weight: bold;
        color: #000;
    }
    .terms-section p {
        margin: 0 0 8px 0;
        font-size: 11px;
        line-height: 1.4;
    }
    .signature-section {
        clear: both;
        margin-top: 40px;
        padding-top: 20px;
        border-top: 1px solid #000;
    }
    .signature-row {
        display: table;
        width: 100%;
        margin-bottom: 15px;
    }
    .signature-item {
        display: table-cell;
        width: 33.33%;
        text-align: left;
        font-size: 11px;
    }
    .signature-line {
        border-bottom: 1px dashed #000;
        height: 20px;
        margin-top: 5px;
    }
    .footer {
        position: fixed;
        bottom: 20px;
        left: 20px;
        right: 20px;
        font-size: 9px;
        color: #666;
        display: table;
        width: 100%;
    }
    .footer-left {
        display: table-cell;
        text-align: left;
    }
    .footer-right {
        display: table-cell;
        text-align: right;
    }`,
            html: `<div class="page-header">Page 1 of 1</div>
    <div class="document-title">Quote</div>
    <div class="company-section">
        <div class="company-left">
            <img src="{{company.getLogoPathForPdf()}}" alt="Company Logo" class="company-logo">
            <div class="company-name">{{company.name}}</div>
            <div class="company-tagline">{{company.tagline}}</div>
            <div class="company-details">
                <p><strong>{{company.legal_name}}</strong></p>
                <p>{{company.address}}</p>
                <p>{{company.city}}</p>
                <p>VAT Number {{company.vat_number}}</p>
                <p>Telephone {{company.phone}}</p>
                <p>Fax {{company.fax}}</p>
            </div>
        </div>
        <div class="company-right">
            <div class="banking-details">
                <h4>Banking Details</h4>
                <p><strong>{{company.bank_account_name}}</strong></p>
                <p>Bank Name: {{company.bank_name}}</p>
                <p>Acc No: {{company.bank_account_number}}</p>
                <p>Sort Code: {{company.bank_sort_code}}</p>
            </div>
        </div>
    </div>
    <div class="customer-section">
        <div class="customer-left">
            <div class="customer-info">
                <h4>To:</h4>
                <p><strong>{{quote.customer.account_code}}</strong></p>
                <p><strong>{{quote.customer.name}}</strong></p>
                <p>{{quote.customer.address}}</p>
                <p>{{quote.customer.city}}</p>
                <p>{{quote.customer.postal_code}}</p>
            </div>
        </div>
        <div class="customer-right">
            <div class="validity-period">
                <label>Valid Until</label>
                <div style="border: 1px solid #000; height: 20px; margin-top: 5px; padding: 2px;">{{quote.expiry_date}}</div>
            </div>
        </div>
    </div>
    <div class="separator-line"></div>
    <div class="quote-details">
        <div class="quote-detail">
            <span class="quote-detail-label">Account</span>
            <span class="quote-detail-value">{{quote.customer.account_code}}</span>
        </div>
        <div class="quote-detail">
            <span class="quote-detail-label">Date</span>
            <span class="quote-detail-value">{{quote.created_at}}</span>
        </div>
        <div class="quote-detail">
            <span class="quote-detail-label">Order No</span>
            <span class="quote-detail-value">{{quote.order_number}}</span>
        </div>
        <div class="quote-detail">
            <span class="quote-detail-label">Quote No</span>
            <span class="quote-detail-value">{{quote.quote_number}}</span>
        </div>
    </div>
    <table class="line-items-table">
        <thead>
            <tr>
                <th>Item Description</th>
                <th class="text-right">QTY</th>
                <th class="text-right">Price (Ex)</th>
                <th class="text-right">Disc %</th>
                <th class="text-right">Tax</th>
                <th class="text-right">Total (Incl)</th>
            </tr>
        </thead>
        <tbody><!-- {{#each quote.lineItems}} --><tr>
                <td>{{this.description_with_code}}</td>
                <td class="text-right">{{this.quantity}}</td>
                <td class="text-right">R{{this.unit_price}}</td>
                <td class="text-right">{{this.discount_percentage}}%</td>
                <td class="text-right">R{{this.tax}}</td>
                <td class="text-right">R{{this.total}}</td>
            </tr><!-- {{/each}} --></tbody>
    </table>
    <div class="totals-section">
        <div class="total-row">
            <span>Total (Excl):</span>
            <span>R{{quote.subtotal}}</span>
        </div>
        <div class="total-row">
            <span>Tax:</span>
            <span>R{{quote.tax_amount}}</span>
        </div>
        <div class="total-row">
            <span>Total (Incl):</span>
            <span>R{{quote.total}}</span>
        </div>
        <div class="total-row">
            <span>Discount:</span>
            <span>R{{quote.discount_amount}}</span>
        </div>
        <div class="total-row">
            <span>Rounding:</span>
            <span>R0.00</span>
        </div>
        <div class="total-row">
            <span>Less: Excess:</span>
            <span>R0.00</span>
        </div>
        <div class="total-row final">
            <span>Total (Incl):</span>
            <span>R{{quote.total}}</span>
        </div>
    </div>
    <div class="terms-section">
        <h4>Description</h4>
        <p>{{quote.description}}</p>
        <h4>Notes</h4>
        <p>{{quote.notes}}</p>
        <h4>Terms & Conditions</h4>
        <p>This quote is valid for 30 days from the date of issue.</p>
        <p>Prices are subject to change without notice.</p>
        <p>Payment terms: Net 30 days from invoice date.</p>
        <p>{{quote.terms_conditions}}</p>
    </div>
    <div class="signature-section">
        <div class="signature-row">
            <div class="signature-item">
                <div>Received by</div>
                <div class="signature-line"></div>
            </div>
            <div class="signature-item">
                <div>Date</div>
                <div class="signature-line"></div>
            </div>
            <div class="signature-item">
                <div>Signature</div>
                <div class="signature-line"></div>
            </div>
        </div>
    </div>
    <div class="footer">
        <div class="footer-left">
            JobCard Online (Registered to {{company.name}})
        </div>
        <div class="footer-right">
            {{date}}
        </div>
    </div>`,
        },
        jobcard: {
            css: `body {
        font-family: Arial, sans-serif;
        line-height: 1.4;
        color: #000;
        margin: 0;
        padding: 20px;
        font-size: 12px;
        background: white;
    }
    .page-header {
        text-align: right;
        font-size: 10px;
        color: #666;
        margin-bottom: 10px;
    }
    .document-title {
        text-align: center;
        font-size: 28px;
        font-weight: bold;
        color: #000;
        margin: 20px 0;
        text-transform: uppercase;
    }
    .company-section {
        display: table;
        width: 100%;
        margin-bottom: 20px;
        border: 1px solid #000;
        padding: 15px;
    }
    .company-left {
        display: table-cell;
        width: 60%;
        vertical-align: top;
    }
    .company-right {
        display: table-cell;
        width: 40%;
        vertical-align: top;
        text-align: left;
    }
    .company-logo {
        max-width: 220px;
        max-height: 110px;
        margin-bottom: 10px;
    }
    .company-name {
        font-size: 16px;
        font-weight: bold;
        color: #000;
        margin-bottom: 5px;
    }
    .company-tagline {
        font-size: 11px;
        color: #666;
        margin-bottom: 15px;
    }
    .company-details {
        font-size: 11px;
        line-height: 1.3;
    }
    .company-details p {
        margin: 2px 0;
    }
    .banking-details {
        text-align: left;
        font-size: 11px;
    }
    .banking-details h4 {
        margin: 0 0 8px 0;
        font-size: 12px;
        font-weight: bold;
        color: #000;
    }
    .banking-details p {
        margin: 2px 0;
    }
    .customer-section {
        display: table;
        width: 100%;
        margin-bottom: 20px;
    }
    .customer-left {
        display: table-cell;
        width: 60%;
        vertical-align: top;
    }
    .customer-right {
        display: table-cell;
        width: 40%;
        vertical-align: top;
        text-align: right;
    }
    .customer-info h4 {
        margin: 0 0 8px 0;
        font-size: 12px;
        font-weight: bold;
        color: #000;
    }
    .customer-info p {
        margin: 2px 0;
        font-size: 11px;
    }
    .priority-level {
        font-size: 11px;
    }
    .priority-level label {
        font-weight: bold;
    }
    .separator-line {
        border-top: 1px solid #000;
        margin: 15px 0;
    }
    .jobcard-details {
        display: table;
        width: 100%;
        margin-bottom: 20px;
    }
    .jobcard-detail {
        display: table-cell;
        width: 20%;
        border: 1px solid #000;
        padding: 8px;
        text-align: center;
        font-size: 11px;
    }
    .jobcard-detail-label {
        font-weight: bold;
        display: block;
        margin-bottom: 4px;
    }
    .jobcard-detail-value {
        color: #000;
    }
    .line-items-table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 20px;
    }
    .line-items-table th,
    .line-items-table td {
        border-bottom: 1px solid #000;
        padding: 8px;
        font-size: 11px;
    }
    .line-items-table th {
        font-weight: bold;
        text-align: left;
        border-bottom: 2px solid #000;
    }
    .line-items-table td {
        text-align: left;
    }
    .line-items-table .text-right {
        text-align: right;
    }
    .totals-section {
        float: right;
        width: 300px;
        margin-top: 20px;
    }
    .total-row {
        display: table;
        width: 100%;
        margin-bottom: 5px;
    }
    .total-row span {
        display: table-cell;
        font-size: 11px;
        padding: 2px 0;
    }
    .total-row span:first-child {
        text-align: left;
    }
    .total-row span:last-child {
        text-align: right;
    }
    .total-row.final {
        font-weight: bold;
        font-size: 12px;
        border-top: 1px solid #000;
        padding-top: 8px;
        margin-top: 8px;
    }
    .work-notes-section {
        clear: both;
        margin-top: 40px;
        padding-top: 20px;
        border-top: 1px solid #000;
        font-size: 11px;
        text-align: left;
    }
    .work-notes-section h4 {
        margin: 0 0 10px 0;
        font-size: 12px;
        font-weight: bold;
        color: #000;
    }
    .work-notes-section p {
        margin: 0 0 8px 0;
        font-size: 11px;
        line-height: 1.4;
    }
    .signature-section {
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px solid #000;
    }
    .signature-row {
        display: table;
        width: 100%;
        margin-bottom: 15px;
    }
    .signature-item {
        display: table-cell;
        width: 33.33%;
        text-align: left;
        font-size: 11px;
    }
    .signature-line {
        border-bottom: 1px dashed #000;
        height: 20px;
        margin-top: 5px;
    }
    .footer {
        position: fixed;
        bottom: 20px;
        left: 20px;
        right: 20px;
        font-size: 9px;
        color: #666;
        display: table;
        width: 100%;
    }
    .footer-left {
        display: table-cell;
        text-align: left;
    }
    .footer-right {
        display: table-cell;
        text-align: right;
    }`,
            html: `<div class="page-header">Page 1 of 1</div>
    <div class="document-title">Job Card</div>
    <div class="company-section">
        <div class="company-left">
            <img src="{{company.getLogoPathForPdf()}}" alt="Company Logo" class="company-logo">
            <div class="company-name">{{company.name}}</div>
            <div class="company-tagline">{{company.tagline}}</div>
            <div class="company-details">
                <p><strong>{{company.legal_name}}</strong></p>
                <p>{{company.address}}</p>
                <p>{{company.city}}</p>
                <p>VAT Number {{company.vat_number}}</p>
                <p>Telephone {{company.phone}}</p>
                <p>Fax {{company.fax}}</p>
            </div>
        </div>
        <div class="company-right">
            <div class="banking-details">
                <h4>Banking Details</h4>
                <p><strong>{{company.bank_account_name}}</strong></p>
                <p>Bank Name: {{company.bank_name}}</p>
                <p>Acc No: {{company.bank_account_number}}</p>
                <p>Sort Code: {{company.bank_sort_code}}</p>
            </div>
        </div>
    </div>
    <div class="customer-section">
        <div class="customer-left">
            <div class="customer-info">
                <h4>To:</h4>
                <p><strong>{{jobcard.customer.account_code}}</strong></p>
                <p><strong>{{jobcard.customer.name}}</strong></p>
                <p>{{jobcard.customer.address}}</p>
                <p>{{jobcard.customer.city}}</p>
                <p>{{jobcard.customer.postal_code}}</p>
            </div>
        </div>
        <div class="customer-right">
            <div class="priority-level">
                <label>Priority Level</label>
                <div style="border: 1px solid #000; height: 20px; margin-top: 5px; padding: 2px;">{{jobcard.priority}}</div>
            </div>
        </div>
    </div>
    <div class="separator-line"></div>
    <div class="jobcard-details">
        <div class="jobcard-detail">
            <span class="jobcard-detail-label">Account</span>
            <span class="jobcard-detail-value">{{jobcard.customer.account_code}}</span>
        </div>
        <div class="jobcard-detail">
            <span class="jobcard-detail-label">Date</span>
            <span class="jobcard-detail-value">{{jobcard.created_at}}</span>
        </div>
        <div class="jobcard-detail">
            <span class="jobcard-detail-label">Order No</span>
            <span class="jobcard-detail-value">{{jobcard.order_number}}</span>
        </div>
        <div class="jobcard-detail">
            <span class="jobcard-detail-label">Job No</span>
            <span class="jobcard-detail-value">{{jobcard.job_number}}</span>
        </div>
        <div class="jobcard-detail">
            <span class="jobcard-detail-label">Due Date</span>
            <span class="jobcard-detail-value">{{jobcard.due_date}}</span>
        </div>
    </div>
    <table class="line-items-table">
        <thead>
            <tr>
                <th>Item Code</th>
                <th>Work Description</th>
                <th class="text-right">QTY</th>
                <th class="text-right">Rate</th>
                <th class="text-right">Hours</th>
                <th class="text-right">Total (Incl)</th>
            </tr>
        </thead>
        <tbody>
            <tr data-handlebars-loop-start="{{#each jobcard.lineItems}}" data-handlebars-loop-end="{{/each}}">
                <td>{{this.product.sku}}</td>
                <td>{{this.description_with_code}}</td>
                <td class="text-right">{{this.quantity}}</td>
                <td class="text-right">R{{this.unit_price}}</td>
                <td class="text-right">{{this.hours}}</td>
                <td class="text-right">R{{this.total}}</td>
            </tr>
        </tbody>
    </table>
    <div class="totals-section">
        <div class="total-row">
            <span>Total (Excl):</span>
            <span>R{{jobcard.subtotal}}</span>
        </div>
        <div class="total-row">
            <span>Tax:</span>
            <span>R{{jobcard.tax_amount}}</span>
        </div>
        <div class="total-row">
            <span>Total (Incl):</span>
            <span>R{{jobcard.total}}</span>
        </div>
        <div class="total-row">
            <span>Discount:</span>
            <span>R{{jobcard.discount_amount}}</span>
        </div>
        <div class="total-row">
            <span>Rounding:</span>
            <span>R0.00</span>
        </div>
        <div class="total-row">
            <span>Less: Excess:</span>
            <span>R0.00</span>
        </div>
        <div class="total-row final">
            <span>Total (Incl):</span>
            <span>R{{jobcard.total}}</span>
        </div>
    </div>
    <div class="work-notes-section">
        <h4>Work Notes & Instructions</h4>
        <p><strong>Job Description:</strong> {{jobcard.description}}</p>
        <p><strong>Additional Notes:</strong> {{jobcard.notes}}</p>
        <p><strong>Terms & Conditions:</strong> {{jobcard.terms_conditions}}</p>
    </div>
    <div class="signature-section">
        <div class="signature-row">
            <div class="signature-item">
                <div>Technician</div>
                <div class="signature-line"></div>
            </div>
            <div class="signature-item">
                <div>Date Completed</div>
                <div class="signature-line"></div>
            </div>
            <div class="signature-item">
                <div>Customer Signature</div>
                <div class="signature-line"></div>
            </div>
        </div>
    </div>
    <div class="footer">
        <div class="footer-left">
            JobCard Online (Registered to {{company.name}})
        </div>
        <div class="footer-right">
            {{date}}
        </div>
    </div>`,
        },
        'proforma-invoice': {
            css: `body {
        font-family: Arial, sans-serif;
        line-height: 1.4;
        color: #000;
        margin: 0;
        padding: 20px;
        font-size: 12px;
        background: white;
    }
    .page-header {
        text-align: right;
        font-size: 10px;
        color: #666;
        margin-bottom: 10px;
    }
    .document-title {
        text-align: center;
        font-size: 28px;
        font-weight: bold;
        color: #000;
        margin: 20px 0;
        text-transform: uppercase;
    }
    .company-section {
        display: table;
        width: 100%;
        margin-bottom: 20px;
        border: 1px solid #000;
        padding: 15px;
    }
    .company-left {
        display: table-cell;
        width: 60%;
        vertical-align: top;
    }
    .company-right {
        display: table-cell;
        width: 40%;
        vertical-align: top;
        text-align: left;
    }
    .company-logo {
        max-width: 220px;
        max-height: 110px;
        margin-bottom: 10px;
    }
    .company-name {
        font-size: 16px;
        font-weight: bold;
        color: #000;
        margin-bottom: 5px;
    }
    .company-tagline {
        font-size: 11px;
        color: #666;
        margin-bottom: 15px;
    }
    .company-details {
        font-size: 11px;
        line-height: 1.3;
    }
    .company-details p {
        margin: 2px 0;
    }
    .banking-details {
        text-align: left;
        font-size: 11px;
    }
    .banking-details h4 {
        margin: 0 0 8px 0;
        font-size: 12px;
        font-weight: bold;
        color: #000;
    }
    .banking-details p {
        margin: 2px 0;
    }
    .customer-section {
        display: table;
        width: 100%;
        margin-bottom: 20px;
    }
    .customer-left {
        display: table-cell;
        width: 60%;
        vertical-align: top;
    }
    .customer-right {
        display: table-cell;
        width: 40%;
        vertical-align: top;
        text-align: right;
    }
    .customer-info h4 {
        margin: 0 0 8px 0;
        font-size: 12px;
        font-weight: bold;
        color: #000;
    }
    .customer-info p {
        margin: 2px 0;
        font-size: 11px;
    }
    .validity-period {
        font-size: 11px;
    }
    .validity-period label {
        font-weight: bold;
    }
    .separator-line {
        border-top: 1px solid #000;
        margin: 15px 0;
    }
    .quote-details {
        display: table;
        width: 100%;
        margin-bottom: 20px;
    }
    .quote-detail {
        display: table-cell;
        width: 25%;
        border: 1px solid #000;
        padding: 8px;
        text-align: center;
        font-size: 11px;
    }
    .quote-detail-label {
        font-weight: bold;
        display: block;
        margin-bottom: 4px;
    }
    .quote-detail-value {
        color: #000;
    }
    .line-items-table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 20px;
    }
    .line-items-table th,
    .line-items-table td {
        border-bottom: 1px solid #000;
        padding: 8px;
        font-size: 11px;
    }
    .line-items-table th {
        font-weight: bold;
        text-align: left;
        border-bottom: 2px solid #000;
    }
    .line-items-table td {
        text-align: left;
    }
    .line-items-table .text-right {
        text-align: right;
    }
    .totals-section {
        float: right;
        width: 300px;
        margin-top: 20px;
    }
    .total-row {
        display: table;
        width: 100%;
        margin-bottom: 5px;
    }
    .total-row span {
        display: table-cell;
        font-size: 11px;
        padding: 2px 0;
    }
    .total-row span:first-child {
        text-align: left;
    }
    .total-row span:last-child {
        text-align: right;
    }
    .total-row.final {
        font-weight: bold;
        font-size: 12px;
        border-top: 1px solid #000;
        padding-top: 8px;
        margin-top: 8px;
    }
    .terms-section {
        clear: both;
        margin-top: 40px;
        padding-top: 20px;
        border-top: 1px solid #000;
        font-size: 11px;
        text-align: left;
    }
    .terms-section h4 {
        margin: 0 0 10px 0;
        font-size: 12px;
        font-weight: bold;
        color: #000;
    }
    .terms-section p {
        margin: 0 0 8px 0;
        font-size: 11px;
        line-height: 1.4;
    }
    .signature-section {
        clear: both;
        margin-top: 40px;
        padding-top: 20px;
        border-top: 1px solid #000;
    }
    .signature-row {
        display: table;
        width: 100%;
        margin-bottom: 15px;
    }
    .signature-item {
        display: table-cell;
        width: 33.33%;
        text-align: left;
        font-size: 11px;
    }
    .signature-line {
        border-bottom: 1px dashed #000;
        height: 20px;
        margin-top: 5px;
    }
    .footer {
        position: fixed;
        bottom: 20px;
        left: 20px;
        right: 20px;
        font-size: 9px;
        color: #666;
        display: table;
        width: 100%;
    }
    .footer-left {
        display: table-cell;
        text-align: left;
    }
    .footer-right {
        display: table-cell;
        text-align: right;
    }`,
            html: `<div class="page-header">Page 1 of 1</div>
    <div class="document-title">Proforma Invoice</div>
    <div class="company-section">
        <div class="company-left">
            <img src="{{company.getLogoPathForPdf()}}" alt="Company Logo" class="company-logo">
            <div class="company-name">{{company.name}}</div>
            <div class="company-tagline">{{company.tagline}}</div>
            <div class="company-details">
                <p><strong>{{company.legal_name}}</strong></p>
                <p>{{company.address}}</p>
                <p>{{company.city}}</p>
                <p>VAT Number {{company.vat_number}}</p>
                <p>Telephone {{company.phone}}</p>
                <p>Fax {{company.fax}}</p>
            </div>
        </div>
        <div class="company-right">
            <div class="banking-details">
                <h4>Banking Details</h4>
                <p><strong>{{company.bank_account_name}}</strong></p>
                <p>Bank Name: {{company.bank_name}}</p>
                <p>Acc No: {{company.bank_account_number}}</p>
                <p>Sort Code: {{company.bank_sort_code}}</p>
            </div>
        </div>
    </div>
    <div class="customer-section">
        <div class="customer-left">
            <div class="customer-info">
                <h4>To:</h4>
                <p><strong>{{quote.customer.account_code}}</strong></p>
                <p><strong>{{quote.customer.name}}</strong></p>
                <p>{{quote.customer.address}}</p>
                <p>{{quote.customer.city}}</p>
                <p>{{quote.customer.postal_code}}</p>
            </div>
        </div>
        <div class="customer-right">
            <div class="validity-period">
                <label>Valid Until</label>
                <div style="border: 1px solid #000; height: 20px; margin-top: 5px; padding: 2px;">{{quote.expiry_date}}</div>
            </div>
        </div>
    </div>
    <div class="separator-line"></div>
    <div class="quote-details">
        <div class="quote-detail">
            <span class="quote-detail-label">Account</span>
            <span class="quote-detail-value">{{quote.customer.account_code}}</span>
        </div>
        <div class="quote-detail">
            <span class="quote-detail-label">Date</span>
            <span class="quote-detail-value">{{quote.created_at}}</span>
        </div>
        <div class="quote-detail">
            <span class="quote-detail-label">Order No</span>
            <span class="quote-detail-value">{{quote.order_number}}</span>
        </div>
        <div class="quote-detail">
            <span class="quote-detail-label">Proforma Invoice No</span>
            <span class="quote-detail-value">{{quote.quote_number}}</span>
        </div>
    </div>
    <table class="line-items-table">
        <thead>
            <tr>
                <th>Item Description</th>
                <th class="text-right">QTY</th>
                <th class="text-right">Price (Ex)</th>
                <th class="text-right">Disc %</th>
                <th class="text-right">Tax</th>
                <th class="text-right">Total (Incl)</th>
            </tr>
        </thead>
        <tbody><!-- {{#each quote.lineItems}} --><tr>
                <td>{{this.description_with_code}}</td>
                <td class="text-right">{{this.quantity}}</td>
                <td class="text-right">R{{this.unit_price}}</td>
                <td class="text-right">{{this.discount_percentage}}%</td>
                <td class="text-right">R{{this.tax}}</td>
                <td class="text-right">R{{this.total}}</td>
            </tr><!-- {{/each}} --></tbody>
    </table>
    <div class="totals-section">
        <div class="total-row">
            <span>Total (Excl):</span>
            <span>R{{quote.subtotal}}</span>
        </div>
        <div class="total-row">
            <span>Tax:</span>
            <span>R{{quote.tax_amount}}</span>
        </div>
        <div class="total-row">
            <span>Total (Incl):</span>
            <span>R{{quote.total}}</span>
        </div>
        <div class="total-row">
            <span>Discount:</span>
            <span>R{{quote.discount_amount}}</span>
        </div>
        <div class="total-row">
            <span>Rounding:</span>
            <span>R0.00</span>
        </div>
        <div class="total-row">
            <span>Less: Excess:</span>
            <span>R0.00</span>
        </div>
        <div class="total-row final">
            <span>Total (Incl):</span>
            <span>R{{quote.total}}</span>
        </div>
    </div>
    <div class="terms-section">
        <h4>Description</h4>
        <p>{{quote.description}}</p>
        <h4>Notes</h4>
        <p>{{quote.notes}}</p>
        <h4>Terms & Conditions</h4>
        <p>This is a proforma invoice and does not constitute a request for payment.</p>
        <p>Prices are subject to change without notice.</p>
        <p>{{quote.terms_conditions}}</p>
    </div>
    <div class="signature-section">
        <div class="signature-row">
            <div class="signature-item">
                <div>Received by</div>
                <div class="signature-line"></div>
            </div>
            <div class="signature-item">
                <div>Date</div>
                <div class="signature-line"></div>
            </div>
            <div class="signature-item">
                <div>Signature</div>
                <div class="signature-line"></div>
            </div>
        </div>
    </div>
    <div class="footer">
        <div class="footer-left">
            JobCard Online (Registered to {{company.name}})
        </div>
        <div class="footer-right">
            {{date}}
        </div>
    </div>`,
        },
        'purchase-order': {
            css: `body {
        font-family: Arial, sans-serif;
        line-height: 1.4;
        color: #000;
        margin: 0;
        padding: 20px;
        font-size: 12px;
        background: white;
    }
    .page-header {
        text-align: right;
        font-size: 10px;
        color: #666;
        margin-bottom: 10px;
    }
    .document-title {
        text-align: center;
        font-size: 28px;
        font-weight: bold;
        color: #000;
        margin: 20px 0;
        text-transform: uppercase;
    }
    .company-section {
        display: table;
        width: 100%;
        margin-bottom: 20px;
        border: 1px solid #000;
        padding: 15px;
    }
    .company-left {
        display: table-cell;
        width: 60%;
        vertical-align: top;
    }
    .company-right {
        display: table-cell;
        width: 40%;
        vertical-align: top;
        text-align: left;
    }
    .company-logo {
        max-width: 220px;
        max-height: 110px;
        margin-bottom: 10px;
    }
    .company-name {
        font-size: 16px;
        font-weight: bold;
        color: #000;
        margin-bottom: 5px;
    }
    .company-tagline {
        font-size: 11px;
        color: #666;
        margin-bottom: 15px;
    }
    .company-details {
        font-size: 11px;
        line-height: 1.3;
    }
    .company-details p {
        margin: 2px 0;
    }
    .supplier-section {
        display: table;
        width: 100%;
        margin-bottom: 20px;
        border: 1px solid #000;
        padding: 15px;
    }
    .supplier-left {
        display: table-cell;
        width: 60%;
        vertical-align: top;
    }
    .supplier-right {
        display: table-cell;
        width: 40%;
        vertical-align: top;
        text-align: left;
    }
    .supplier-info h4 {
        margin: 0 0 8px 0;
        font-size: 12px;
        font-weight: bold;
        color: #000;
    }
    .supplier-info p {
        margin: 2px 0;
        font-size: 11px;
    }
    .po-info {
        text-align: left;
        font-size: 11px;
    }
    .po-info h4 {
        margin: 0 0 8px 0;
        font-size: 12px;
        font-weight: bold;
        color: #000;
    }
    .po-info p {
        margin: 2px 0;
    }
    .line-items-table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 20px;
    }
    .line-items-table th,
    .line-items-table td {
        border-bottom: 1px solid #000;
        padding: 6px;
        font-size: 11px;
    }
    .line-items-table th {
        font-weight: bold;
        text-align: left;
        border-bottom: 2px solid #000;
    }
    .line-items-table td {
        text-align: left;
    }
    .line-items-table .text-right {
        text-align: right;
    }
    .totals-section {
        float: right;
        width: 300px;
        margin-top: 20px;
    }
    .total-row {
        display: table;
        width: 100%;
        margin-bottom: 5px;
    }
    .total-row span {
        display: table-cell;
        font-size: 11px;
        padding: 2px 0;
    }
    .total-row span:first-child {
        text-align: left;
    }
    .total-row span:last-child {
        text-align: right;
    }
    .total-row.final {
        font-weight: bold;
        font-size: 12px;
        border-top: 1px solid #000;
        padding-top: 8px;
        margin-top: 8px;
    }
    .terms-section {
        clear: both;
        margin-top: 40px;
        padding-top: 20px;
        border-top: 1px solid #000;
        font-size: 11px;
        text-align: left;
    }
    .terms-section h4 {
        margin: 0 0 10px 0;
        font-size: 12px;
        font-weight: bold;
        color: #000;
    }
    .terms-section p {
        margin: 0 0 8px 0;
        font-size: 11px;
        line-height: 1.4;
    }
    .footer {
        position: fixed;
        bottom: 20px;
        left: 20px;
        right: 20px;
        font-size: 9px;
        color: #666;
        display: table;
        width: 100%;
    }
    .footer-left {
        display: table-cell;
        text-align: left;
    }
    .footer-right {
        display: table-cell;
        text-align: right;
    }`,
            html: `<div class="page-header">Page 1 of 1</div>
    <div class="document-title">Purchase Order</div>
    <div class="company-section">
        <div class="company-left">
            <img src="{{company.logo_path_for_pdf}}" alt="Company Logo" class="company-logo">
            <div class="company-name">{{company.name}}</div>
            <div class="company-tagline">{{company.description}}</div>
            <div class="company-details">
                <p><strong>{{company.name}}</strong></p>
                <p>{{company.address}}</p>
                <p>{{company.city}}</p>
                <p>VAT Number {{company.vat_number}}</p>
                <p>Telephone {{company.phone}}</p>
                <p>Email {{company.email}}</p>
            </div>
        </div>
        <div class="company-right">
            <div class="po-info">
                <h4>Purchase Order Details</h4>
                <p><strong>PO Number:</strong> {{purchaseOrder.po_number}}</p>
                <p><strong>Order Date:</strong> {{purchaseOrder.order_date}}</p>
                <p><strong>Expected Delivery:</strong> {{purchaseOrder.expected_delivery_date}}</p>
                <p><strong>Status:</strong> {{purchaseOrder.status}}</p>
            </div>
        </div>
    </div>
    <div class="supplier-section">
        <div class="supplier-left">
            <div class="supplier-info">
                <h4>Supplier:</h4>
                <p><strong>{{purchaseOrder.supplier.name}}</strong></p>
                <p>{{purchaseOrder.supplier.address}}</p>
                <p>{{purchaseOrder.supplier.city}}</p>
                <p>{{purchaseOrder.supplier.postal_code}}</p>
                <p>Phone: {{purchaseOrder.supplier.phone}}</p>
                <p>Email: {{purchaseOrder.supplier.email}}</p>
            </div>
        </div>
        <div class="supplier-right">
            <div class="po-info">
                <h4>Delivery Information</h4>
                <p><strong>Expected:</strong> {{purchaseOrder.expected_delivery_date}}</p>
                <p><strong>Received:</strong> {{purchaseOrder.received_date}}</p>
            </div>
        </div>
    </div>
    <table class="line-items-table">
        <thead>
            <tr>
                <th>Item Code</th>
                <th>Item Description</th>
                <th class="text-right">QTY</th>
                <th class="text-right">Price (Ex)</th>
                <th class="text-right">Tax</th>
                <th class="text-right">Total (Incl)</th>
            </tr>
        </thead>
        <tbody><!-- {{#each purchaseOrder.items}} --><tr>
                <td>{{this.product.sku}}</td>
                <td>{{this.description_with_code}}</td>
                <td class="text-right">{{this.quantity}}</td>
                <td class="text-right">R{{this.unit_cost}}</td>
                <td class="text-right">{{#if this.taxRate}}R {{this.tax_amount}}{{else}}—{{/if}}</td>
                <td class="text-right">R{{this.total}}</td>
            </tr><!-- {{/each}} --></tbody>
    </table>
    <div class="totals-section">
        <div class="total-row">
            <span>Subtotal:</span>
            <span>R {{purchaseOrder.subtotal}}</span>
        </div>
        <div class="total-row">
            <span>Tax:</span>
            <span>R {{purchaseOrder.tax_amount}}</span>
        </div>
        <div class="total-row final">
            <span>Total:</span>
            <span>R {{purchaseOrder.total}}</span>
        </div>
    </div>
    <div class="terms-section">
        <h4>Notes:</h4>
        <p>{{purchaseOrder.notes}}</p>
    </div>
    <div class="terms-section">
        <h4>Terms & Conditions:</h4>
        <p>{{purchaseOrder.terms}}</p>
    </div>
    <div class="footer">
        <div class="footer-left">
            Generated on {{date}}
        </div>
        <div class="footer-right">
            {{company.name}}
        </div>
    </div>`,
        },
    };

    // Function to restore Handlebars syntax from data attributes and auto-detect loops
    function restoreHandlebarsFromAttributes(html: string, module: string): string {
        // Find tr elements with data-handlebars-loop-start attribute
        // Pattern: <tr ... data-handlebars-loop-start="{{#each ...}}" ...>
        const trPattern = /<tr([^>]*)\s+data-handlebars-loop-start="\{\{#each\s+([^}]+)\}\}"([^>]*)>/g;
        let match;

        while ((match = trPattern.exec(html)) !== null) {
            const fullMatch = match[0];
            const beforeAttrs = match[1] || '';
            const loopPath = match[2];
            const afterAttrs = match[3] || '';

            // Clean attributes - remove the data-handlebars attributes
            const cleanBefore = beforeAttrs.replace(/\s+data-handlebars-loop-start="[^"]*"/g, '').replace(/\s+data-handlebars-loop-end="[^"]*"/g, '');
            const cleanAfter = afterAttrs.replace(/\s+data-handlebars-loop-start="[^"]*"/g, '').replace(/\s+data-handlebars-loop-end="[^"]*"/g, '');

            // Find the corresponding closing </tr> tag
            const trStartIndex = match.index;
            let trEndIndex = html.indexOf('</tr>', trStartIndex);
            if (trEndIndex === -1) continue;

            // Find the actual end of the tr tag (including any nested content)
            let depth = 1;
            let searchIndex = trStartIndex + fullMatch.length;
            while (depth > 0 && searchIndex < html.length) {
                const nextOpen = html.indexOf('<tr', searchIndex);
                const nextClose = html.indexOf('</tr>', searchIndex);

                if (nextClose === -1) break;
                if (nextOpen !== -1 && nextOpen < nextClose) {
                    depth++;
                    searchIndex = nextOpen + 3;
                } else {
                    depth--;
                    if (depth === 0) {
                        trEndIndex = nextClose + 5;
                        break;
                    }
                    searchIndex = nextClose + 5;
                }
            }

            // Replace the tr with wrapped version
            const trContent = html.substring(trStartIndex + fullMatch.length, trEndIndex);
            const newTr = `{{#each ${loopPath}}}<tr${cleanBefore}${cleanAfter}>${trContent}</tr>{{/each}}`;
            html = html.substring(0, trStartIndex) + newTr + html.substring(trEndIndex);

            // Reset regex lastIndex since we modified the string
            trPattern.lastIndex = 0;
        }

        // Also handle HTML comments as fallback
        html = html.replace(/<!--\s*\{\{#each\s+([^}]+)\}\}\s*-->/g, '{{#each $1}}');
        html = html.replace(/<!--\s*\{\{\/each\}\}\s*-->/g, '{{/each}}');

        // Clean up any standalone loop markers that got separated
        html = html.replace(/\{\{#each\s+([^}]+)\}\}\{\{\/each\}\}/g, '');

        // Auto-detect tr elements with {{this.}} that aren't wrapped in a loop
        // Determine loop path based on module
        const loopPaths: Record<string, string> = {
            invoice: 'invoice.lineItems',
            quote: 'quote.lineItems',
            jobcard: 'jobcard.lineItems',
            'proforma-invoice': 'quote.lineItems',
            'purchase-order': 'purchaseOrder.items'
        };
        const loopPath = loopPaths[module];

        if (loopPath) {
            // Find <tbody> elements that contain tr with {{this.}} but no {{#each}}
            html = html.replace(/<tbody([^>]*)>([\s\S]*?)<\/tbody>/g, (tbodyMatch, tbodyAttrs, tbodyContent) => {
                // Check if tbody contains tr with {{this.}} but no {{#each wrapping it
                if (tbodyContent.includes('{{this.') && !tbodyContent.match(/\{\{#each[^}]*\}\}[\s\S]*?\{\{\/each\}\}/)) {
                    // Find all <tr> elements with {{this.}} that aren't wrapped
                    return tbodyMatch.replace(/<tr([^>]*)>([\s\S]*?)<\/tr>/g, (trMatch: string, trAttrs: string, trContent: string) => {
                        if (trContent.includes('{{this.') && !trMatch.includes('{{#each')) {
                            // Wrap this tr with loop
                            return `{{#each ${loopPath}}}<tr${trAttrs}>${trContent}</tr>{{/each}}`;
                        }
                        return trMatch;
                    });
                }
                return tbodyMatch;
            });
        }

        return html;
    }

    function importDefaultTemplate() {
        if (!editor) return;

        const template = defaultTemplates[props.module];
        if (!template) {
            alert(`No default template available for module: ${props.module}`);
            return;
        }

        if (confirm('This will replace your current template. Are you sure?')) {
            // Set HTML content first
            editor.setComponents(template.html);

            // Wait a bit for the frame to be ready, then inject CSS
            setTimeout(() => {
                replaceFrameCustomStyle(template.css);
                editor.refresh();
            }, 100);

            // Emit updates (restore Handlebars from data attributes)
            let html = editor.getHtml();
            html = restoreHandlebarsFromAttributes(html, props.module);
            emit('update:modelValue', html);
            emit('update:cssStyles', template.css);
        }
    }

    watch(() => props.module, (newModule) => {
        availableVariables.value = moduleVariables[newModule] || [];
        if (editor) {
            // Update variable blocks in editor
            updateVariableBlocks();
        }
    });

    // Initialize GrapeJS editor
    onMounted(async () => {
        await nextTick();

        if (!editorContainer.value) return;

        editor = grapesjs.init({
            container: editorContainer.value,
            height: '100%',
            width: '100%',
            plugins: [gjsPresetWebpage],
            pluginsOpts: {
                [gjsPresetWebpage]: {
                    modalImportTitle: 'Import Template',
                    modalImportLabel: '<div style="margin-bottom: 10px; font-size: 13px;">Paste here your HTML/CSS and click Import</div>',
                    modalImportContent: (editor: any) => {
                        return editor.getHtml() + '<style>' + editor.getCss() + '</style>';
                    },
                },
            } as any,
            storageManager: {
                type: 'local',
                autosave: false,
            },
            deviceManager: {
                devices: [
                    {
                        name: 'Desktop',
                        width: '',
                    },
                ],
            },
            blockManager: {
                appendTo: '#blocks-panel',
            },
            layerManager: {
                appendTo: '#layers-panel',
            },
            styleManager: {
                appendTo: `#${STYLES_PANEL_ID}`,
                sectors: [
                    {
                        name: 'Typography',
                        open: true,
                        buildProps: ['font-family', 'font-size', 'font-weight', 'letter-spacing', 'color', 'line-height', 'text-align', 'text-decoration', 'text-shadow'],
                        properties: [
                            {
                                name: 'Text Align',
                                property: 'text-align',
                                type: 'radio',
                                defaults: 'left',
                                options: [
                                    { value: 'left', name: 'Left' },
                                    { value: 'center', name: 'Center' },
                                    { value: 'right', name: 'Right' },
                                    { value: 'justify', name: 'Justify' },
                                ],
                            },
                        ],
                    },
                    {
                        name: 'Dimension',
                        open: false,
                        buildProps: ['width', 'min-height', 'padding'],
                        properties: [
                            {
                                type: 'integer',
                                name: 'The width',
                                property: 'width',
                                units: ['px', '%'],
                                defaults: 'auto',
                                min: 0,
                            },
                        ],
                    },
                    {
                        name: 'Extra',
                        open: false,
                        buildProps: ['background-color', 'box-shadow', 'custom-prop'],
                        properties: [
                            {
                                id: 'custom-prop',
                                name: 'Custom Label',
                                property: 'font-size',
                                type: 'select',
                                defaults: '32px',
                                options: [
                                    { value: '12px', name: 'Tiny' },
                                    { value: '18px', name: 'Medium' },
                                    { value: '32px', name: 'Big' },
                                ],
                            },
                        ],
                    },
                    {
                        name: 'Border',
                        open: false,
                        buildProps: ['border', 'border-radius'],
                        properties: [
                            {
                                name: 'Border Width',
                                property: 'border-width',
                                type: 'integer',
                                units: ['px'],
                                defaults: 0,
                                min: 0,
                            },
                            {
                                name: 'Border Style',
                                property: 'border-style',
                                type: 'select',
                                defaults: 'solid',
                                options: [
                                    { value: 'none', name: 'None' },
                                    { value: 'solid', name: 'Solid' },
                                    { value: 'dashed', name: 'Dashed' },
                                    { value: 'dotted', name: 'Dotted' },
                                    { value: 'double', name: 'Double' },
                                ],
                            },
                            {
                                name: 'Border Color',
                                property: 'border-color',
                                type: 'color',
                            },
                            {
                                name: 'Border Radius',
                                property: 'border-radius',
                                type: 'integer',
                                units: ['px', '%'],
                                defaults: 0,
                                min: 0,
                            },
                        ],
                    },
                ],
            },
            panels: {
                defaults: [
                    {
                        id: 'layers',
                        el: '#layers-panel',
                        resizable: false, // Disable resizing to prevent overlap
                    },
                    {
                        id: 'styles',
                        el: `#${STYLES_PANEL_ID}`,
                        resizable: false, // Disable resizing to prevent overlap
                    },
                    {
                        id: 'traits',
                        el: '#traits-panel',
                        resizable: false,
                    },
                ],
            },
            traitManager: {
                appendTo: '#traits-panel',
            },
            assetManager: {
                upload: props.imageUploadUrl,
                uploadName: 'image',
                multiUpload: false,
                headers: {
                    'X-CSRF-TOKEN': getCsrfToken(),
                },
            } as any,
        });

        // Configure image component traits after editor initialization
        // Wait for preset to fully initialize, then override
        editor.on('load', () => {
            setTimeout(() => {
                const domComponents = editor.DomComponents;
                const traitManager = editor.TraitManager;

                // Register custom button trait type if not exists
                const buttonTraitType = traitManager.getType('button');
                if (!buttonTraitType) {
                    traitManager.addType('button', {
                        createInput({ trait }: any) {
                            const el = document.createElement('button');
                            el.type = 'button';
                            el.textContent = trait.get('text') || trait.get('label') || 'Click';
                            el.className = 'gjs-trt-btn';
                            el.onclick = () => {
                                const command = trait.get('command');
                                if (command) {
                                    command(editor, trait);
                                }
                            };
                            return el;
                        },
                    });
                }

                // Extend image component with custom traits - override defaults
                domComponents.addType('image', {
                    extend: 'image',
                    model: {
                        defaults: {
                            // Remove default traits and add our custom ones
                            traits: [
                                {
                                    type: 'button',
                                    name: 'asset-manager',
                                    label: 'Upload Image',
                                    text: 'Select Image',
                                    command: (editor: any) => {
                                        editor.AssetManager.open({
                                            select: (asset: any) => {
                                                const selected = editor.getSelected();
                                                if (selected && selected.get('type') === 'image') {
                                                    const assetSrc = asset.getSrc();

                                                    // Update the src trait directly
                                                    const srcTrait = selected.getTrait('src');
                                                    if (srcTrait) {
                                                        srcTrait.set('value', assetSrc);
                                                    }

                                                    // Set attributes using setAttributes (not addAttributes)
                                                    selected.setAttributes({
                                                        src: assetSrc,
                                                        'data-uploaded-image': 'true'
                                                    });

                                                    editor.AssetManager.close();

                                                    // Also update the DOM element in the frame immediately
                                                    setTimeout(() => {
                                                        markFrameImageAsUploaded(assetSrc);
                                                    }, 100);
                                                }
                                            },
                                        });
                                    },
                                },
                                {
                                    type: 'text',
                                    name: 'src',
                                    label: 'Image Source',
                                    placeholder: 'Enter URL or {{company.getLogoPathForPdf()}}',
                                    changeProp: 1,
                                },
                                {
                                    type: 'text',
                                    name: 'alt',
                                    label: 'Alt Text',
                                    placeholder: 'Image description',
                                },
                            ],
                        },
                    },
                } as any);
            }, 300);
        });

        // Listen for trait changes on image components
        editor.on('trait:update', (trait: any, component: any) => {
            if (component && component.get('type') === 'image' && trait.get('name') === 'src') {
                const srcValue = trait.get('value') || '';
                // If src is a regular URL (not Handlebars), mark as uploaded image
                if (srcValue &&
                    !srcValue.includes('{{') &&
                    (srcValue.startsWith('http://') ||
                     srcValue.startsWith('https://') ||
                     srcValue.startsWith('/storage/') ||
                     srcValue.startsWith('/'))) {
                    component.setAttributes({ 'data-uploaded-image': 'true' });

                    // Also update DOM element
                    setTimeout(() => {
                        markFrameImageAsUploaded(srcValue);
                    }, 50);
                }
            }
        });

        // Also add traits dynamically when image is selected (as fallback)
        editor.on('component:selected', (component: any) => {
            if (component && component.get('type') === 'image') {
                // Force update traits
                setTimeout(() => {
                    const traits = component.get('traits');
                    const srcTrait = component.getTrait('src');

                    // Check if we have the right traits
                    const hasSrcTrait = srcTrait && (srcTrait.get('label') === 'Image Source' || srcTrait.get('name') === 'src');

                    // If src trait doesn't exist or is wrong, replace all traits
                    if (!hasSrcTrait || !traits || traits.length < 2) {
                        // Remove all existing traits first
                        const existingTraits = component.get('traits') || [];
                        existingTraits.forEach((trait: any) => {
                            try {
                                component.removeTrait(trait.id || trait.name || trait.get('name'));
                            } catch {
                                // Ignore errors
                            }
                        });

                        // Add our custom traits
                        component.addTrait({
                            type: 'button',
                            name: 'asset-manager',
                            label: 'Upload Image',
                            text: 'Select Image',
                            command: (editor: any) => {
                                editor.AssetManager.open({
                                    select: (asset: any) => {
                                        const selected = editor.getSelected();
                                        if (selected && selected.get('type') === 'image') {
                                            const assetSrc = asset.getSrc();

                                            // Update the src trait directly
                                            const srcTrait = selected.getTrait('src');
                                            if (srcTrait) {
                                                srcTrait.set('value', assetSrc);
                                            }

                                            // Set attributes using setAttributes (not addAttributes)
                                            selected.setAttributes({
                                                src: assetSrc,
                                                'data-uploaded-image': 'true'
                                            });

                                            editor.AssetManager.close();

                                            // Also update the DOM element in the frame immediately
                                            setTimeout(() => {
                                                markFrameImageAsUploaded(assetSrc);
                                            }, 100);
                                        }
                                    },
                                });
                            },
                        });

                        component.addTrait({
                            type: 'text',
                            name: 'src',
                            label: 'Image Source',
                            placeholder: 'Enter URL or {{company.getLogoPathForPdf()}}',
                            changeProp: 1,
                        });

                        component.addTrait({
                            type: 'text',
                            name: 'alt',
                            label: 'Alt Text',
                            placeholder: 'Image description',
                        });

                        // Force trait manager to update by triggering component update
                        editor.trigger('component:update', component);
                        editor.select(component);
                    }
                }, 150);
            }
        });

        // Add variable blocks
        updateVariableBlocks();

        // Handle images with Handlebars syntax - prevent 404 errors
        setTimeout(() => {
            const canvas = editor.Canvas;
            const frame = canvas.getFrameEl();

            if (frame) {
                const frameDoc = frame.contentDocument || (frame as any).contentWindow?.document;
                if (frameDoc) {
                    // Function to replace Handlebars image src with placeholder
                    // Only replace images that have Handlebars syntax, preserve regular URLs
                    const replaceHandlebarsImages = () => {
                        const images = frameDoc.querySelectorAll('img');
                        images.forEach((img: HTMLImageElement) => {
                            // Skip uploaded images (marked with data-uploaded-image)
                            if (img.hasAttribute('data-uploaded-image')) {
                                return;
                            }

                            const src = img.getAttribute('src') || img.src;

                            // Skip if src is a regular URL (http/https/data URI that's not our placeholder)
                            // Regular URLs should not be replaced
                            if (src &&
                                !src.includes('{{') &&
                                (src.startsWith('http://') ||
                                 src.startsWith('https://') ||
                                 src.startsWith('/storage/') ||
                                 src.startsWith('/') ||
                                 (src.startsWith('data:image') && !src.includes('PHN2ZyB3aWR0aD0iMTAw')))) {
                                // This is a regular uploaded image, mark it and skip
                                img.setAttribute('data-uploaded-image', 'true');
                                return;
                            }

                            // Only process if src contains Handlebars syntax and hasn't been processed yet
                            if (src && src.includes('{{') && !img.hasAttribute('data-handlebars-src')) {
                                // Replace with a data URI placeholder
                                img.src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0iI2U1ZTdlYiIvPjx0ZXh0IHg9IjUwJSIgeT0iNTAlIiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMTIiIGZpbGw9IiM5Y2EzYWYiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGR5PSIuM2VtIj5Mb2dvPC90ZXh0Pjwvc3ZnPg==';
                                // Store original src in data attribute
                                img.setAttribute('data-handlebars-src', src);
                            }
                        });
                    };

                    // Run immediately and on content changes
                    replaceHandlebarsImages();

                    // Watch for new images being added
                    const observer = new MutationObserver(() => {
                        replaceHandlebarsImages();
                    });

                    observer.observe(frameDoc.body, {
                        childList: true,
                        subtree: true,
                        attributes: true,
                        attributeFilter: ['src'],
                    });

                    // Also listen to editor component updates
                    editor.on('component:update', () => {
                        setTimeout(replaceHandlebarsImages, 100);
                    });
                }
            }
        }, 500);

        // Load initial content
        if (props.modelValue) {
            try {
                // Set components first
                editor.setComponents(props.modelValue);

                // After loading, ensure uploaded images are preserved BEFORE replaceHandlebarsImages runs
                setTimeout(() => {
                    const canvas = editor.Canvas;
                    const frame = canvas.getFrameEl();
                    if (frame) {
                        const frameDoc = frame.contentDocument || (frame as any).contentWindow?.document;
                        if (frameDoc) {
                            const images = frameDoc.querySelectorAll('img');
                            images.forEach((img: HTMLImageElement) => {
                                const src = img.getAttribute('src') || '';
                                // If image has a regular URL (not placeholder, not Handlebars), mark it as uploaded
                                if (src &&
                                    !src.includes('{{') &&
                                    !src.startsWith('data:image/svg+xml') &&
                                    !img.hasAttribute('data-handlebars-src') &&
                                    !img.hasAttribute('data-uploaded-image')) {
                                    // This is a regular uploaded image, mark it immediately
                                    img.setAttribute('data-uploaded-image', 'true');

                                    // Also update the component attributes
                                    const component = editor.getSelected();
                                    if (component && component.get('type') === 'image') {
                                        component.addAttributes({ 'data-uploaded-image': 'true' });
                                    }
                                }
                            });
                        }
                    }
                }, 100);
            } catch (e) {
                console.error('Error loading template:', e);
            }
        }

        // Listen for changes
        editor.on('update', () => {
            let html = editor.getHtml();
            let css = editor.getCss();

            // Restore Handlebars syntax from data attributes and comments
            html = restoreHandlebarsFromAttributes(html, props.module);

            // Restore Handlebars image src from data attributes
            html = html.replace(/<img([^>]*)\s+data-handlebars-src="([^"]+)"([^>]*)>/g, (match: string, before: string, handlebarsSrc: string, after: string) => {
                // Remove data-handlebars-src attribute and restore original src
                const cleanAttrs = (before + ' ' + after).replace(/\s+data-handlebars-src="[^"]*"/g, '').trim();
                return `<img${cleanAttrs ? ' ' + cleanAttrs : ''} src="${handlebarsSrc}">`;
            });

            // Ensure uploaded images are marked in the saved HTML
            // Check if images have regular URLs (not Handlebars) and mark them
            html = html.replace(/<img([^>]*)\s+src="([^"]+)"([^>]*)>/g, (match: string, before: string, src: string, after: string) => {
                // If src is a regular URL (not Handlebars, not placeholder), ensure data-uploaded-image is present
                if (src &&
                    !src.includes('{{') &&
                    !src.startsWith('data:image/svg+xml') &&
                    (src.startsWith('http://') ||
                     src.startsWith('https://') ||
                     src.startsWith('/storage/') ||
                     src.startsWith('/'))) {
                    // Check if data-uploaded-image is already present
                    if (!before.includes('data-uploaded-image') && !after.includes('data-uploaded-image')) {
                        // Add data-uploaded-image attribute
                        return `<img${before} data-uploaded-image="true" src="${src}"${after}>`;
                    }
                }
                return match;
            });

            // Also get CSS from the iframe if it exists
            try {
                const customStyle = getEditorFrameDocument()?.getElementById(CUSTOM_STYLE_ID);
                if (customStyle && customStyle.textContent) {
                    // Merge GrapeJS CSS with custom injected CSS
                    const customCss = customStyle.textContent.trim();
                    if (customCss && !css.includes(customCss)) {
                        css = css ? `${css}\n\n${customCss}` : customCss;
                    }
                }
            } catch (e) {
                console.warn('Could not extract CSS from iframe:', e);
            }

            emit('update:modelValue', html);
            emit('update:cssStyles', css);
        });

        // Load CSS if provided - inject into frame
        if (props.cssStyles) {
            setTimeout(() => {
                replaceFrameCustomStyle(props.cssStyles);
            }, 100);
        }

        // Add custom section block
        editor.BlockManager.add('section', {
            label: 'Section',
            category: 'Layout',
            content: {
                type: 'section',
                classes: ['section-container'],
                style: {
                    padding: '20px',
                    margin: '10px 0',
                    border: '1px solid #ddd',
                    'border-radius': '4px',
                },
            },
        });

        // Add image block to Basic category
        editor.BlockManager.add('image', {
            label: 'Image',
            category: 'Basic',
            media: '<svg viewBox="0 0 24 24"><path fill="currentColor" d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/></svg>',
            content: {
                type: 'image',
                src: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0iI2U1ZTdlYiIvPjx0ZXh0IHg9IjUwJSIgeT0iNTAlIiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMTIiIGZpbGw9IiM5Y2EzYWYiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGR5PSIuM2VtIj5JbWFnZTwvdGV4dD48L3N2Zz4=',
                style: {
                    width: '100%',
                    height: 'auto',
                },
            },
        });

        // Add heading blocks to Basic category
        editor.BlockManager.add('heading1', {
            label: 'Heading 1',
            category: 'Basic',
            content: '<h1 style="font-size: 2em; font-weight: bold; margin: 0.5em 0;">Insert heading here</h1>',
        });

        editor.BlockManager.add('heading2', {
            label: 'Heading 2',
            category: 'Basic',
            content: '<h2 style="font-size: 1.5em; font-weight: bold; margin: 0.5em 0;">Insert heading here</h2>',
        });

        editor.BlockManager.add('heading3', {
            label: 'Heading 3',
            category: 'Basic',
            content: '<h3 style="font-size: 1.25em; font-weight: bold; margin: 0.5em 0;">Insert heading here</h3>',
        });

        // Add text block to Basic category
        editor.BlockManager.add('text-block', {
            label: 'Text Block',
            category: 'Basic',
            content: '<p style="margin: 0.5em 0;">Insert text here</p>',
        });

        // Add divider/separator to Basic category
        editor.BlockManager.add('divider', {
            label: 'Divider',
            category: 'Basic',
            content: '<hr style="border: none; border-top: 1px solid #ddd; margin: 1em 0;">',
        });

        // Add link to Basic category
        editor.BlockManager.add('link', {
            label: 'Link',
            category: 'Basic',
            content: '<a href="#" style="color: #3b82f6; text-decoration: underline;">Insert link text here</a>',
        });

        // Add div block to Basic category
        editor.BlockManager.add('div-container', {
            label: 'Div Container',
            category: 'Basic',
            activate: true,
            content: {
                tagName: 'div',
                type: 'default',
                droppable: true,
                editable: true,
                style: {
                    padding: '10px',
                    margin: '5px 0',
                    'min-height': '50px',
                    display: 'block',
                },
            },
        } as any);

        // Add table block to Basic category
        editor.BlockManager.add('table', {
            label: 'Table',
            category: 'Basic',
            content: `<table style="width: 100%; border-collapse: collapse; margin: 10px 0;">
                <thead>
                    <tr>
                        <th style="border: 1px solid #ddd; padding: 8px; text-align: left; background-color: #f3f4f6;">Header 1</th>
                        <th style="border: 1px solid #ddd; padding: 8px; text-align: left; background-color: #f3f4f6;">Header 2</th>
                        <th style="border: 1px solid #ddd; padding: 8px; text-align: left; background-color: #f3f4f6;">Header 3</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td style="border: 1px solid #ddd; padding: 8px;">Cell 1</td>
                        <td style="border: 1px solid #ddd; padding: 8px;">Cell 2</td>
                        <td style="border: 1px solid #ddd; padding: 8px;">Cell 3</td>
                    </tr>
                    <tr>
                        <td style="border: 1px solid #ddd; padding: 8px;">Cell 4</td>
                        <td style="border: 1px solid #ddd; padding: 8px;">Cell 5</td>
                        <td style="border: 1px solid #ddd; padding: 8px;">Cell 6</td>
                    </tr>
                </tbody>
            </table>`,
        });

        // Add variable insertion functionality
        setupVariableInsertion();

        // Setup collapsible classes panel
        setupCollapsibleClassesPanel();
    });

    function setupCollapsibleClassesPanel() {
        if (!editor) return;

        // Wait for the style manager to be rendered
        setTimeout(() => {
            const stylesPanel = getStylesPanelElement();
            if (!stylesPanel) return;

            // Find the classes panel container
            const classesPanel = stylesPanel.querySelector(CLASSES_PANEL_SELECTOR) as HTMLElement;
            if (!classesPanel) return;

            // Create toggle button
            const toggleButton = document.createElement('button');
            toggleButton.className = 'classes-panel-toggle';
            toggleButton.innerHTML = `
                <span class="toggle-icon">▼</span>
                <span class="toggle-label">Classes & Selected</span>
            `;
            toggleButton.setAttribute('type', 'button');

            // Insert toggle button before the classes panel
            const classesContainer = classesPanel.parentElement;
            if (classesContainer) {
                classesContainer.insertBefore(toggleButton, classesPanel);

                // Toggle function
                toggleButton.addEventListener('click', () => {
                    isClassesPanelCollapsed.value = !isClassesPanelCollapsed.value;
                    const isCollapsed = isClassesPanelCollapsed.value;

                    if (isCollapsed) {
                        classesPanel.style.display = 'none';
                        const icon = toggleButton.querySelector(TOGGLE_ICON_SELECTOR);
                        if (icon) icon.textContent = '▶';
                        toggleButton.classList.add('collapsed');
                    } else {
                        classesPanel.style.display = '';
                        const icon = toggleButton.querySelector(TOGGLE_ICON_SELECTOR);
                        if (icon) icon.textContent = '▼';
                        toggleButton.classList.remove('collapsed');
                    }
                });
            }
        }, 500);
    }

    function updateVariableBlocks() {
        if (!editor) return;

        // Clear existing variable blocks
        const blocks = editor.BlockManager.getAll();
        blocks.forEach((block: any) => {
            if (block.get('category') === 'Variables') {
                editor.BlockManager.remove(block.id);
            }
        });

        // Add variable blocks grouped by category
        Object.entries(groupedVariables.value).forEach(([category, variables]) => {
            variables.forEach((variable) => {
                editor.BlockManager.add(`var-${category}-${variable.value}`, {
                    label: variable.label,
                    category: 'Variables',
                    content: `<div class="template-variable-wrapper" style="display: block; width: 100%;"><span class="template-variable" data-variable="${variable.value}">${variable.value}</span></div>`,
                    attributes: {
                        class: 'gjs-block-variable',
                    },
                });
            });
        });
    }

    function setupVariableInsertion() {
        // Variable insertion is handled by GrapeJS block manager
        // Variables are added as blocks that can be dragged into the canvas
    }

    onUnmounted(() => {
        if (editor) {
            editor.destroy();
        }
    });

    watch(() => props.modelValue, (newValue) => {
        if (editor && newValue !== editor.getHtml()) {
            try {
                editor.setComponents(newValue);

                // After loading, mark uploaded images immediately
                setTimeout(() => {
                    const canvas = editor.Canvas;
                    const frame = canvas.getFrameEl();
                    if (frame) {
                        const frameDoc = frame.contentDocument || (frame as any).contentWindow?.document;
                        if (frameDoc) {
                            const images = frameDoc.querySelectorAll('img');
                            images.forEach((img: HTMLImageElement) => {
                                const src = img.getAttribute('src') || '';
                                // If image has a regular URL and data-uploaded-image attribute, preserve it
                                if (src &&
                                    !src.includes('{{') &&
                                    !src.startsWith('data:image/svg+xml') &&
                                    (img.hasAttribute('data-uploaded-image') ||
                                     src.startsWith('http://') ||
                                     src.startsWith('https://') ||
                                     src.startsWith('/storage/') ||
                                     src.startsWith('/'))) {
                                    img.setAttribute('data-uploaded-image', 'true');
                                }
                            });
                        }
                    }
                }, 100);
            } catch (e) {
                console.error('Error updating template:', e);
            }
        }
    });
    </script>

    <template>
        <div class="pdf-template-editor">
            <div class="editor-layout">
                <!-- Left Sidebar: Blocks -->
                <div class="editor-sidebar editor-sidebar-left">
                    <div class="panel-section panel-section-button">
                        <button
                            @click="importDefaultTemplate"
                            class="w-full rounded-md bg-blue-600 px-3 py-2 text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 mb-3"
                            :disabled="disabled"
                            type="button"
                        >
                            Import Default Template
                        </button>
                        <p v-pre class="text-xs text-gray-600 leading-snug mb-3">
                            Placeholders: use <code class="bg-gray-200 px-0.5 rounded">{{ customer.name }}</code> for plain text (HTML is escaped).
                            Use <code class="bg-gray-200 px-0.5 rounded">{{{ invoice.notes }}}</code> only when a field must render stored HTML (e.g. terms).
                        </p>
                    </div>
                    <div id="blocks-panel" class="panel-section panel-section-scrollable">
                        <h3 class="panel-title">Blocks</h3>
                    </div>
                </div>

                <!-- Center: Canvas -->
                <div class="editor-canvas-container">
                    <div id="editor-container" ref="editorContainer"></div>
                </div>

                <!-- Right Sidebar: Layers and Styles -->
                <div class="editor-sidebar editor-sidebar-right">
                    <div id="layers-panel" class="panel-section panel-section-scrollable">
                        <h3 class="panel-title">Layers</h3>
                    </div>
                    <div id="traits-panel" class="panel-section panel-section-scrollable">
                        <div class="panel-header">Settings</div>
                    </div>
                    <div id="styles-panel" class="panel-section panel-section-scrollable">
                        <h3 class="panel-title">Styles</h3>
                    </div>
                </div>
            </div>
        </div>
    </template>

    <style scoped>

    .pdf-template-editor {
        border: 1px solid #d1d5db;
        border-radius: 0.375rem;
        overflow: hidden;
        background: #fff;
        width: 100%;
    }

    .editor-layout {
        display: flex;
        height: 800px;
        width: 100%;
        overflow: hidden; /* Prevent overflow */
    }

    .editor-sidebar {
        width: 250px;
        min-width: 250px;
        max-width: 250px;
        background: #f9fafb;
        border-right: 1px solid #e5e7eb;
        overflow-y: auto;
        overflow-x: hidden;
        display: flex;
        flex-direction: column;
        flex-shrink: 0; /* Prevent sidebar from shrinking */
        position: relative;
        z-index: 1;
    }

    .editor-sidebar-right {
        border-right: none;
        border-left: 1px solid #e5e7eb;
    }

    .panel-section {
        padding: 12px;
        border-bottom: 1px solid #e5e7eb;
        position: relative;
    }

    .panel-section-button {
        flex-shrink: 0;
    }

    .panel-section-scrollable {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .panel-section:last-child {
        border-bottom: none;
    }

    .panel-title {
        font-size: 14px;
        font-weight: 600;
        color: #374151;
        margin: 0 0 12px 0;
    }

    /* Ensure GrapeJS panels are contained within sidebar - only constrain position, preserve styling */
    .panel-section :deep(.gjs-pn-panel) {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .panel-section :deep(.gjs-pn-views-container) {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        max-height: 100% !important;
        height: auto;
    }

    .editor-canvas-container {
        flex: 1;
        overflow: auto;
        background: #e5e7eb;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding: 40px 20px;
        min-width: 0; /* Allow flex item to shrink */
        position: relative;
        z-index: 0;
    }

    #editor-container {
        width: 100%;
        min-height: 1123px; /* A4 height at 96 DPI */
        background: #fff;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        margin: 0 auto;
        position: relative;
    }

    /* A4 page styling */
    :deep(.gjs-cv-canvas) {
        background: #e5e7eb !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
    }

    :deep(.gjs-frame) {
        width: 794px !important;
        max-width: 794px !important;
        min-height: fit-content;
        background: #fff !important;
        margin: 0 auto;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    }

    /* Ensure GrapeJS panels are properly contained - minimal overrides to preserve default styling */
    :deep(.gjs-pn-panels) {
        visibility: visible !important;
    }

    /* Ensure GrapeJS toolbar and commands are visible - only override visibility, not layout */
    :deep(.gjs-pn-commands) {
        visibility: visible !important;
    }

    :deep(.gjs-toolbar) {
        visibility: visible !important;
    }

    :deep(.gjs-toolbar-item) {
        visibility: visible !important;
    }

    :deep(.gjs-cm) {
        visibility: visible !important;
    }

    /* Ensure GrapeJS default panels container is visible */
    :deep(.gjs-pn-panels) {
        visibility: visible !important;
    }

    :deep(.gjs-cv-canvas__frames) {
        background: #e5e7eb !important;
    }

    :deep(.gjs-cv-canvas__frames__frame) {
        background: #fff !important;
    }

    /* GrapeJS Custom Styles */
    :deep(.gjs-block-variable) {
        background: #dbeafe;
        border-color: #3b82f6;
    }

    :deep(.template-variable-wrapper) {
        display: block;
        width: 100%;
    }

    :deep(.template-variable) {
        background: #dbeafe;
        padding: 2px 6px;
        border-radius: 3px;
        font-family: monospace;
        font-size: 0.9em;
        color: #1e40af;
        border: 1px dashed #3b82f6;
        display: inline-block;
    }

    /* Classes panel toggle button */
    .classes-panel-toggle {
        width: 100%;
        padding: 8px 12px;
        background: #f3f4f6;
        border: 1px solid #e5e7eb;
        border-bottom: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
        font-weight: 600;
        color: #374151;
        transition: background-color 0.2s;
    }

    .classes-panel-toggle:hover {
        background: #e5e7eb;
    }

    .classes-panel-toggle.collapsed {
        border-bottom: 1px solid #e5e7eb;
    }

    .toggle-icon {
        font-size: 10px;
        transition: transform 0.2s;
        display: inline-block;
        width: 12px;
        text-align: center;
    }

    .toggle-label {
        flex: 1;
        text-align: left;
    }
    </style>