templates/website/page/about-us.html.twig line 1

  1. {% extends '@web/base.html.twig' %}
  2. {% block body %}
  4.     <style>
  5.         @import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&display=swap");
  6.         @page {
  7.             size: A4;
  8.             margin: 20mm;
  9.             /* Adjust as needed */ }
  10.         .bordred {
  11.             max-height: 1120px;
  12.             border: solid 1px red; }
  14.         .main-button {
  15.             width: 100%;
  16.             height: 44px;
  17.             background: #00b900;
  18.             color: #fff;
  19.             border: none;
  20.             text-transform: uppercase;
  21.             font-weight: 600;
  22.             font-size: 24px; }
  24.         .wrapper-languages {
  25.             width: 100%;
  26.             margin-bottom: 20px; }
  27.         .wrapper-languages ul {
  28.             display: flex;
  29.             margin: 0;
  30.             padding: 0;
  31.             list-style: none;
  32.             gap: 20px; }
  33.         .wrapper-languages ul li {
  34.             flex: 1; }
  35.         .wrapper-languages ul li a {
  36.             display: block;
  37.             padding: 12px;
  38.             text-align: center;
  39.             background-color: #00b900;
  40.             color: #fff; }
  42.         h5 {
  43.             padding: 6px 2px;
  44.             background-color: #7f7f7f;
  45.             margin: 0 0 2px;
  46.             font-size: 11px; }
  48.         @media print {
  49.             * {
  50.                 -webkit-print-color-adjust: exact !important;
  51.                 print-color-adjust: exact !important; }
  53.             @page {
  54.                 margin: 0; }
  55.             body {
  56.                 margin: 0; }
  58.             .main-button {
  59.                 display: none !important; }
  61.             .wrapper-languages {
  62.                 display: none !important; } }
  64.         .page {
  65.             width: 991px;
  66.             margin: 0 auto;
  67.             height: 100%;
  68.             display: flex;
  69.             flex-direction: column;
  70.             page-break-after: always;
  71.         }
  72.         @media(max-width: 991px) {
  74.             .page {
  75.                 width: calc(100% - 32px);
  76.                 margin: 0 16px;
  77.             }
  79.             .wrapper-content {
  81.                 flex-direction: column;
  82.             }
  84.             .wrapper-content .wrapper-right-data {
  86.                 width: 100% !important;
  87.             }
  88.         }
  91.         .wrapper-title {
  92.             display: flex;
  93.             align-items: center;
  94.             gap: 0;
  95.             padding: 0;
  96.             min-height: 140px; }
  98.         .wrapper-title .wrapper-left {
  99.             width: 115px;
  100.             display: flex;
  101.             justify-content: center;
  102.             flex-direction: column;
  103.             align-items: center; }
  105.         .wrapper-title .wrapper-left img {
  106.             height: 65px; }
  108.         .wrapper-title .wrapper-left p {
  109.             text-align: center; }
  111.         .wrapper-title .wrapper-middle {
  112.             display: flex;
  113.             flex-direction: column;
  114.             justify-content: center;
  115.             align-items: center;
  116.             flex: 1; }
  118.         p {
  119.             font-size: 10px;
  120.             line-height: 11px;
  121.             margin: 0; }
  123.         .wrapper-title .wrapper-middle h1 {
  124.             font-size: 48px;
  125.             line-height: 50px;
  126.             margin: 0; }
  128.         .wrapper-title .wrapper-middle h3 {
  129.             font-size: 40px;
  130.             line-height: 32px;
  131.             margin: 0;
  132.             font-weight: bold; }
  134.         .wrapper-title .wrapper-middle h2 {
  135.             font-size: 22px;
  136.             line-height: 25px;
  137.             margin: 0;
  138.             font-style: italic; }
  140.         .wrapper-title .wrapper-right {
  141.             width: 150px;
  142.             display: flex;
  143.             flex-direction: column;
  144.             justify-content: center;
  145.             align-items: center; }
  147.         .wrapper-title .wrapper-right h6 {
  148.             margin: 0;
  149.             text-align: center;
  150.             font-size: 15px; }
  152.         .wrapper-title .wrapper-right p {
  153.             font-size: 15px;
  154.             line-height: 18px; }
  156.         .wrapper-title .wrapper-right h4 {
  157.             font-size: 16px;
  158.             line-height: 20px;
  159.             margin: 0; }
  161.         .wrapper-content {
  162.             display: flex;
  163.             gap: 5px;
  164.         margin-top: 30px;
  165.         }
  167.         .wrapper-content .wrapper-data {
  168.             display: flex;
  169.             flex-direction: column;
  170.             flex: 1; }
  172.         .wrapper-content .wrapper-data .wrapper-image {
  173.             width: 100%;
  174.             height: 350px;
  175.             min-height: 350px; }
  177.         .wrapper-content .wrapper-data .wrapper-items {
  178.             display: flex;
  179.             gap: 2px;
  180.             padding: 0; }
  181.         .wrapper-content .wrapper-data .wrapper-items .wrapper-item-box {
  182.             flex: 1; }
  184.         .wrapper-content .wrapper-data .wrapper-items .wrapper-item {
  185.             flex: 1;
  186.             display: flex;
  187.             flex-direction: column;
  188.             gap: 4px;
  189.             padding-right: 5px; }
  191.         .wrapper-content .wrapper-data .wrapper-items .wrapper-item h5 {
  192.             margin: 0; }
  194.         .wrapper-content .wrapper-right-data {
  195.             width: 200px;
  196.             display: flex;
  197.             flex-direction: column;
  198.             align-items: center;
  199.             gap: 5px; }
  201.         .wrapper-content .wrapper-right-data .wrapper-item {
  202.             display: flex;
  203.             flex-direction: column;
  204.             gap: 4px; }
  206.         .wrapper-content .wrapper-right-data .wrapper-item:last-child {
  207.             border-bottom: none; }
  209.         .wrapper-content .wrapper-right-data .wrapper-item h4 {
  210.             font-size: 12px;
  211.             line-height: 14px;
  212.             margin: 0;
  213.             text-decoration: underline; }
  215.         .wrapper-main-title * {
  216.             font-size: 23px;
  217.             font-weight: 900;
  218.             text-decoration: underline;
  219.             line-height: 30px;
  220.             padding: 5px 0 15px;
  221.             margin-top: 0; }
  223.         .editable {
  224.             position: relative;
  225.             min-height: 20px; }
  226.         .editable .edit-icon {
  227.             min-height: 20px;
  228.             position: absolute;
  229.             top: 0;
  230.             right: 0; }
  232.         .wrapper-file-upload {
  233.             position: absolute;
  234.             left: 0;
  235.             right: 0;
  236.             top: 0;
  237.             bottom: 0;
  238.             opacity: 0; }
  240.         .modal {
  241.             display: none;
  242.             /* Hidden by default */
  243.             position: fixed;
  244.             /* Stay in place */
  245.             z-index: 1;
  246.             /* Sit on top */
  247.             padding-top: 100px;
  248.             /* Location of the box */
  249.             left: 0;
  250.             top: 0;
  251.             width: 100%;
  252.             /* Full width */
  253.             height: 100%;
  254.             /* Full height */
  255.             overflow: auto;
  256.             /* Enable scroll if needed */
  257.             background-color: black;
  258.             /* Fallback color */
  259.             background-color: rgba(0, 0, 0, 0.4);
  260.             /* Black w/ opacity */ }
  262.         /* Modal Content */
  263.         .modal-content {
  264.             background-color: #fefefe;
  265.             margin: auto;
  266.             padding: 20px;
  267.             border: 1px solid #888;
  268.             width: 80%; }
  270.         .close:hover,
  271.         .close:focus {
  272.             color: #000;
  273.             text-decoration: none;
  274.             cursor: pointer; }
  276.         /*# sourceMappingURL=custom.css.map */
  278.     </style>
  280.     <div class="page {% if editable == true %}bordred{% endif %}" id="pdfFrame">
  281.         <div class="wrapper-content">
  282.             <div class="wrapper-data">
  283.                 <div class="wrapper-image" style="    border: 4px solid;position: relative;
  284.     width: calc(100% - 20px);
  285.     padding: 4px;overflow:hidden;background:#fff">
  286.                     <input id="fileInput" type="file" class="wrapper-file-upload">
  287.                     <img id="preview" src="{{ asset('uploads/menk.jpg') }}"
  288.                          style="width:100%;height:100%;object-fit:cover">
  289.                 </div>
  290.                 <div class="wrapper-main-title editable">
  291.                     {% if editable %}
  292.                         <div class="edit-icon"><i class="fas fa-edit" data-field="imageText"
  293.                                                   onclick="openEditor(this)"></i></div>
  294.                         <span class="text-editable">{{ page.imageText|raw }}</span>
  295.                     {% else %}
  296.                         {% if page.imageText %}
  297.                             <span class="text-editable">{{ page.imageText|raw }}</span>
  298.                         {% endif %}
  299.                     {% endif %}
  301.                 </div>
  302.                 <div class="wrapper-items">
  303.                     <div class="wrapper-item-box">
  304.                         <div class="wrapper-item">
  305.                             {% if editable %}
  306.                                 <div class="editable">
  307.                                     <div class="edit-icon"><i class="fas fa-edit" data-field="firstColumnTitle"
  308.                                                               onclick="openEditor(this)"></i></div>
  309.                                     <h5 style="font-size: 12px"
  310.                                         class="text-editable">{{ page.firstColumnTitle|striptags }}</h5>
  311.                                 </div>
  312.                             {% else %}
  313.                                 {% if page.firstColumnTitle %}
  314.                                     <div class="editable">
  315.                                         <h5 style="font-size: 12px"
  316.                                             class="text-editable">{{ page.firstColumnTitle|striptags }}</h5>
  317.                                     </div>
  318.                                 {% endif %}
  319.                             {% endif %}
  321.                             {% if editable %}
  322.                                 <div class="editable">
  323.                                     <div class="edit-icon"><i class="fas fa-edit" data-field="firstColumnText"
  324.                                                               onclick="openEditor(this)"></i></div>
  325.                                     <span class="text-editable">
  326.                                     {{ page.firstColumnText|raw }}
  327.                                 </span>
  328.                                 </div>
  329.                             {% else %}
  330.                                 {% if page.firstColumnText %}
  331.                                     <div class="editable">
  332.                                         <span class="text-editable">
  333.                                             {{ page.firstColumnText|raw }}
  334.                                         </span>
  335.                                     </div>
  336.                                 {% endif %}
  337.                             {% endif %}
  338.                             {% if editable %}
  339.                                 <div class="editable">
  340.                                     <div class="edit-icon">
  341.                                         <i class="fas fa-images imgUpload" onclick="fileUpload(this)"
  342.                                            data-field="firstColumnImage"></i>
  343.                                     </div>
  344.                                     <img class="image-editable" src="{{ '/user_uploads/'~page.firstColumnImage }}"
  345.                                          width="100%" alt="">
  346.                                 </div>
  347.                             {% else %}
  348.                                 {% if page.firstColumnImage %}
  349.                                     <div class="editable">
  350.                                         <img class="image-editable" src="{{ '/user_uploads/'~page.firstColumnImage }}"
  351.                                              width="100%" alt="">
  352.                                     </div>
  353.                                 {% endif %}
  354.                             {% endif %}
  355.                         </div>
  356.                         <div class="wrapper-item">
  357.                             {% if editable %}
  358.                                 <div class="editable">
  360.                                     <div class="edit-icon"><i class="fas fa-edit" data-field="firstColumnSecondTitle"
  361.                                                               onclick="openEditor(this)"></i></div>
  362.                                     <h5 class="text-editable">{{ page.firstColumnSecondTitle|striptags }}</h5>
  363.                                 </div>
  364.                             {% else %}
  365.                                 {% if page.firstColumnSecondTitle %}
  366.                                     <div class="editable">
  367.                                         <h5 class="text-editable">{{ page.firstColumnSecondTitle|striptags }}</h5>
  368.                                     </div>
  369.                                 {% endif %}
  370.                             {% endif %}
  371.                             {% if editable %}
  372.                                 <div class="editable">
  373.                                     <div class="edit-icon"><i class="fas fa-edit" data-field="firstColumnSecondText"
  374.                                                               onclick="openEditor(this)"></i></div>
  375.                                     <span class="text-editable">
  376.                                         {{ page.firstColumnSecondText|raw }}
  377.                                     </span>
  378.                                 </div>
  379.                             {% else %}
  380.                                 {% if page.firstColumnSecondText %}
  381.                                     <div class="editable">
  382.                                         <span class="text-editable">
  383.                                             {{ page.firstColumnSecondText|raw }}
  384.                                         </span>
  385.                                     </div>
  386.                                 {% endif %}
  387.                             {% endif %}
  388.                             {% if editable %}
  389.                                 <div class="editable">
  390.                                     <div class="edit-icon">
  391.                                         <i class="fas fa-images imgUpload" onclick="fileUpload(this)"
  392.                                            data-field="firstColumnSecondImage"></i>
  393.                                     </div>
  394.                                     <img class="image-editable" src="{{ '/user_uploads/'~page.firstColumnSecondImage }}"
  395.                                          width="100%" alt="">
  396.                                 </div>
  397.                             {% else %}
  398.                                 {% if page.firstColumnSecondImage %}
  399.                                     <div class="editable">
  400.                                         <img class="image-editable"
  401.                                              src="{{ '/user_uploads/'~page.firstColumnSecondImage }}"
  402.                                              width="100%" alt="">
  403.                                     </div>
  404.                                 {% endif %}
  405.                             {% endif %}
  406.                         </div>
  407.                     </div>
  408.                     <div class="wrapper-item-box">
  409.                         <div class="wrapper-item">
  410.                             {% if editable %}
  411.                                 <div class="editable">
  413.                                     <div class="edit-icon"><i class="fas fa-edit" data-field="secondColumnTitle"
  414.                                                               onclick="openEditor(this)"></i></div>
  415.                                     <h5 class="text-editable">{{ page.secondColumnTitle|striptags }}</h5>
  416.                                 </div>
  417.                             {% else %}
  418.                                 {% if page.secondColumnTitle %}
  419.                                     <div class="editable">
  420.                                         <h5 class="text-editable">{{ page.secondColumnTitle|striptags }}</h5>
  421.                                     </div>
  422.                                 {% endif %}
  423.                             {% endif %}
  424.                             {% if editable %}
  425.                                 <div class="editable">
  426.                                     <div class="edit-icon"><i class="fas fa-edit" data-field="secondColumnText"
  427.                                                               onclick="openEditor(this)"></i></div>
  428.                                     <span class="text-editable">
  429.                                         {{ page.secondColumnText|raw }}
  430.                                     </span>
  431.                                 </div>
  432.                             {% else %}
  433.                                 {% if page.secondColumnText %}
  434.                                     <div class="editable">
  435.                                         <span class="text-editable">
  436.                                             {{ page.secondColumnText|raw }}
  437.                                         </span>
  438.                                     </div>
  439.                                 {% endif %}
  440.                             {% endif %}
  441.                             {% if editable %}
  442.                                 <div class="editable">
  443.                                     <div class="edit-icon">
  444.                                         <i class="fas fa-images imgUpload" onclick="fileUpload(this)"
  445.                                            data-field="secondColumnImage"></i>
  446.                                     </div>
  447.                                     <img class="image-editable" src="{{ '/user_uploads/'~page.secondColumnImage|raw }}"
  448.                                          width="100%" alt="">
  449.                                 </div>
  450.                             {% else %}
  451.                                 {% if page.secondColumnImage %}
  452.                                     <div class="editable">
  453.                                         <img class="image-editable"
  454.                                              src="{{ '/user_uploads/'~page.secondColumnImage|raw }}"
  455.                                              width="100%" alt="">
  456.                                     </div>
  457.                                 {% endif %}
  458.                             {% endif %}
  459.                         </div>
  460.                         <div class="wrapper-item">
  461.                             {% if editable %}
  462.                                 <div class="editable">
  463.                                     <div class="edit-icon"><i class="fas fa-edit" data-field="secondColumSecondTitle"
  464.                                                               onclick="openEditor(this)"></i></div>
  465.                                     <h5 class="text-editable">{{ page.secondColumSecondTitle|striptags }}</h5>
  466.                                 </div>
  467.                             {% else %}
  468.                                 {% if page.secondColumSecondTitle %}
  469.                                     <div class="editable">
  470.                                         <h5 class="text-editable">{{ page.secondColumSecondTitle|striptags }}</h5>
  471.                                     </div>
  472.                                 {% endif %}
  473.                             {% endif %}
  474.                             {% if editable %}
  475.                                 <div class="editable">
  476.                                     <div class="edit-icon"><i class="fas fa-edit" data-field="secondColumnSecondText"
  477.                                                               onclick="openEditor(this)"></i></div>
  478.                                     <span class="text-editable">
  479.                                         {{ page.secondColumnSecondText|raw }}
  480.                                     </span>
  481.                                 </div>
  482.                             {% else %}
  483.                                 {% if page.secondColumnSecondText %}
  484.                                     <div class="editable">
  485.                                         <span class="text-editable">
  486.                                             {{ page.secondColumnSecondText|raw }}
  487.                                         </span>
  488.                                     </div>
  489.                                 {% endif %}
  490.                             {% endif %}
  491.                             {% if editable %}
  492.                                 <div class="editable">
  493.                                     <div class="edit-icon">
  494.                                         <i class="fas fa-images imgUpload" onclick="fileUpload(this)"
  495.                                            data-field="secondColumnSecondImage"></i>
  496.                                     </div>
  497.                                     <img class="image-editable"
  498.                                          src="{{ '/user_uploads/'~page.secondColumnSecondImage }}"
  499.                                          width="100%" alt="">
  500.                                 </div>
  501.                             {% else %}
  502.                                 {% if page.secondColumnSecondImage %}
  503.                                     <div class="editable">
  504.                                         <img class="image-editable"
  505.                                              src="{{ '/user_uploads/'~page.secondColumnSecondImage }}"
  506.                                              width="100%" alt="">
  507.                                     </div>
  508.                                 {% endif %}
  509.                             {% endif %}
  510.                         </div>
  511.                     </div>
  512.                     <div class="wrapper-item-box">
  513.                         <div class="wrapper-item">
  514.                             {% if editable %}
  515.                                 <div class="editable">
  516.                                     <div class="edit-icon"><i class="fas fa-edit" data-field="thirdColumnTitle"
  517.                                                               onclick="openEditor(this)"></i></div>
  518.                                     <h5 class="text-editable">{{ page.thirdColumnTitle|striptags }}</h5>
  519.                                 </div>
  520.                             {% else %}
  521.                                 {% if page.thirdColumnTitle %}
  522.                                     <div class="editable">
  523.                                         <h5 class="text-editable">{{ page.thirdColumnTitle|striptags }}</h5>
  524.                                     </div>
  525.                                 {% endif %}
  526.                             {% endif %}
  527.                             {% if editable %}
  528.                                 <div class="editable">
  529.                                     <div class="edit-icon"><i class="fas fa-edit" data-field="thirdColumnText"
  530.                                                               onclick="openEditor(this)"></i></div>
  531.                                     <span class="text-editable">
  532.                                         {{ page.thirdColumnText|raw }}
  533.                                     </span>
  534.                                 </div>
  535.                             {% else %}
  536.                                 {% if page.thirdColumnText %}
  537.                                     <div class="editable">
  538.                                         <span class="text-editable">
  539.                                             {{ page.thirdColumnText|raw }}
  540.                                         </span>
  541.                                     </div>
  542.                                 {% endif %}
  543.                             {% endif %}
  544.                             {% if editable %}
  545.                                 <div class="editable">
  546.                                     <div class="edit-icon">
  547.                                         <i class="fas fa-images imgUpload" onclick="fileUpload(this)"
  548.                                            data-field="thirdColumnImage"></i>
  549.                                     </div>
  550.                                     <img class="image-editable" src="{{ '/user_uploads/'~page.thirdColumnImage }}"
  551.                                          width="100%" alt="">
  552.                                 </div>
  553.                             {% else %}
  554.                                 {% if page.thirdColumnImage %}
  555.                                     <div class="editable">
  556.                                         <img class="image-editable" src="{{ '/user_uploads/'~page.thirdColumnImage }}"
  557.                                              width="100%" alt="">
  558.                                     </div>
  559.                                 {% endif %}
  560.                             {% endif %}
  561.                         </div>
  562.                         <div class="wrapper-item">
  563.                             {% if editable %}
  564.                                 <div class="editable">
  565.                                     <div class="edit-icon"><i class="fas fa-edit" data-field="thirdColumnSecondTitle"
  566.                                                               onclick="openEditor(this)"></i></div>
  567.                                     <h5 class="text-editable">{{ page.thirdColumnSecondTitle|striptags }}</h5>
  568.                                 </div>
  569.                             {% else %}
  570.                                 {% if page.thirdColumnSecondTitle %}
  571.                                     <div class="editable">
  572.                                         <h5 class="text-editable">{{ page.thirdColumnSecondTitle|striptags }}</h5>
  573.                                     </div>
  574.                                 {% endif %}
  575.                             {% endif %}
  576.                             {% if editable %}
  577.                                 <div class="editable">
  578.                                     <div class="edit-icon"><i class="fas fa-edit" data-field="thirdColumnSecondText"
  579.                                                               onclick="openEditor(this)"></i></div>
  580.                                     <span class="text-editable">
  581.                                         {{ page.thirdColumnSecondText|raw }}
  582.                                     </span>
  583.                                 </div>
  584.                             {% else %}
  585.                                 {% if page.thirdColumnSecondText %}
  586.                                     <div class="editable">
  587.                                         <span class="text-editable">
  588.                                             {{ page.thirdColumnSecondText|raw }}
  589.                                         </span>
  590.                                     </div>
  591.                                 {% endif %}
  592.                             {% endif %}
  593.                             {% if editable %}
  594.                                 <div class="editable">
  595.                                     <div class="edit-icon">
  596.                                         <i class="fas fa-images imgUpload" onclick="fileUpload(this)"
  597.                                            data-field="thirdColumnSecondImage"></i>
  598.                                     </div>
  599.                                     <img class="image-editable" src="{{ '/user_uploads/'~page.thirdColumnSecondImage }}"
  600.                                          width="100%" alt="">
  601.                                 </div>
  602.                             {% else %}
  603.                                 {% if page.thirdColumnSecondImage %}
  604.                                     <div class="editable">
  605.                                         <img class="image-editable"
  606.                                              src="{{ '/user_uploads/'~page.thirdColumnSecondImage }}"
  607.                                              width="100%" alt="">
  608.                                     </div>
  609.                                 {% endif %}
  610.                             {% endif %}
  611.                         </div>
  612.                     </div>
  613.                 </div>
  614.             </div>
  615.             <div class="wrapper-right-data">
  616.                 <div class="wrapper-item">
  617.                     {% if editable %}
  618.                         <div class="editable">
  619.                             <div class="edit-icon"><i class="fas fa-edit" data-field="fourthColumnTitle"
  620.                                                       onclick="openEditor(this)"></i></div>
  621.                             <h5 class="text-editable">{{ page.fourthColumnTitle|striptags }}</h5>
  622.                         </div>
  623.                     {% else %}
  624.                         {% if page.fourthColumnTitle %}
  625.                             <div class="editable">
  626.                                 <h5 class="text-editable">{{ page.fourthColumnTitle|striptags }}</h5>
  627.                             </div>
  628.                         {% endif %}
  629.                     {% endif %}
  630.                     {% if editable %}
  631.                         <div class="editable">
  632.                             <div class="edit-icon"><i class="fas fa-edit" data-field="fourthColumnText"
  633.                                                       onclick="openEditor(this)"></i></div>
  634.                             <span class="text-editable">
  635.                                     {{ page.fourthColumnText|raw }}
  636.                                 </span>
  637.                         </div>
  638.                     {% else %}
  639.                         {% if page.fourthColumnText %}
  640.                             <div class="editable">
  641.                                     <span class="text-editable">
  642.                                         {{ page.fourthColumnText|raw }}
  643.                                     </span>
  644.                             </div>
  645.                         {% endif %}
  646.                     {% endif %}
  647.                     {% if editable %}
  648.                         <div class="editable">
  649.                             <div class="edit-icon">
  650.                                 <i class="fas fa-images imgUpload" onclick="fileUpload(this)"
  651.                                    data-field="fourthColumnImage"></i>
  652.                             </div>
  653.                             <img class="image-editable" src="{{ '/user_uploads/'~page.fourthColumnImage }}"
  654.                                  width="100%"
  655.                                  alt="">
  656.                         </div>
  657.                     {% else %}
  658.                         {% if page.fourthColumnImage %}
  659.                             <div class="editable">
  660.                                 <img class="image-editable" src="{{ '/user_uploads/'~page.fourthColumnImage }}"
  661.                                      width="100%"
  662.                                      alt="">
  663.                             </div>
  664.                         {% endif %}
  665.                     {% endif %}
  666.                 </div>
  667.                 <div class="wrapper-item">
  668.                     {% if editable %}
  669.                         <div class="editable">
  670.                             <div class="edit-icon"><i class="fas fa-edit" data-field="fourthColumnSecondTitle"
  671.                                                       onclick="openEditor(this)"></i></div>
  672.                             <h5 class="text-editable">{{ page.fourthColumnSecondTitle|striptags }}</h5>
  673.                         </div>
  674.                     {% else %}
  675.                         {% if page.fourthColumnSecondTitle %}
  676.                             <div class="editable">
  677.                                 <h5 class="text-editable">{{ page.fourthColumnSecondTitle|striptags }}</h5>
  678.                             </div>
  679.                         {% endif %}
  680.                     {% endif %}
  681.                     {% if editable %}
  682.                         <div class="editable">
  683.                             <div class="edit-icon"><i class="fas fa-edit" data-field="fourthColumnSecondText"
  684.                                                       onclick="openEditor(this)"></i></div>
  685.                             <span class="text-editable">
  686.                                     {{ page.fourthColumnSecondText|raw }}
  687.                                 </span>
  688.                         </div>
  689.                     {% else %}
  690.                         {% if page.fourthColumnSecondText %}
  691.                             <div class="editable">
  692.                                     <span class="text-editable">
  693.                                         {{ page.fourthColumnSecondText|raw }}
  694.                                     </span>
  695.                             </div>
  696.                         {% endif %}
  697.                     {% endif %}
  698.                     {% if editable %}
  699.                         <div class="editable">
  700.                             <div class="edit-icon">
  701.                                 <i class="fas fa-images imgUpload" onclick="fileUpload(this)"
  702.                                    data-field="fourthColumnSecondImage"></i>
  703.                             </div>
  704.                             <img class="image-editable" src="{{ '/user_uploads/'~page.fourthColumnSecondImage }}"
  705.                                  width="100%" alt="">
  706.                         </div>
  707.                     {% else %}
  708.                         {% if page.fourthColumnSecondImage %}
  709.                             <div class="editable">
  710.                                 <img class="image-editable"
  711.                                      src="{{ '/user_uploads/'~page.fourthColumnSecondImage }}"
  712.                                      width="100%" alt="">
  713.                             </div>
  714.                         {% endif %}
  715.                     {% endif %}
  716.                 </div>
  717.             </div>
  718.         </div>
  719.     </div>
  720.     {% if editable %}
  721.         <div id="myModal" class="modal">
  722.             <!-- Modal content -->
  723.             <div class="modal-content">
  725.                 <div class="modal-body">
  726.                     <input type="hidden" id="fieldName" value="">
  727.                     <input type="hidden" id="pageID" name="pageId" value="{{ page.id }}">
  728.                     <textarea name="" class="editorShort" id="editor_value" style="width: 100%; height: 500px"
  729.                               rows="50"></textarea>
  730.                 </div>
  731.                 <div class="modal-footer">
  732.                     <button onclick="discardModal()">discard Changes</button>
  733.                     <button onclick="SaveModalData()">Save Changes</button>
  734.                 </div>
  735.             </div>
  737.         </div>
  738.         <div id="FileUploadModal" class="modal">
  739.             <!-- Modal content -->
  740.             <div class="modal-content">
  742.                 <div class="modal-body">
  743.                     <input type="hidden" id="FileFieldName" value="">
  744.                     <input type="hidden" id="FilePageID" value="{{ page.id }}">
  745.                     <input id="ModalFileInput" type="file" name="fileInput" class="modalFileUpload">
  746.                     <img id="ModalFilePreview" width="300" height="300">
  747.                 </div>
  748.                 <div class="modal-footer">
  749.                     <button onclick="discardModalFileUpload()">discard Changes</button>
  750.                     <button onclick="saveUploadedFile()">Save Changes</button>
  751.                     <button onclick="removeCurrentImage()">Remove Image</button>
  752.                 </div>
  753.             </div>
  755.         </div>
  756.     {% endif %}
  758. {% endblock %}