templates/website/page/template.html.twig line 1

  1. {% extends '@web/base-print.html.twig' %}
  2. {% block body %}
  4.     <style>
  6.         @media print {
  7.             @page {
  8.                 margin: 0;
  9.                 size: auto;
  10.             }
  12.             html, body {
  13.                 margin: 0 !important;
  14.                 padding: 0 !important;
  15.                 -webkit-print-color-adjust: exact;
  16.                 print-color-adjust: exact;
  17.             }
  19.             .main-button,
  20.             .wrapper-languages {
  21.                 display: none !important;
  22.             }
  23.         }
  24.         @media print {
  25.             @page {
  26.                 margin: 0;
  27.                 size: auto;
  28.             }
  30.             html, body {
  31.                 margin: 0 !important;
  32.                 padding: 0 !important;
  33.             }
  35.             body * {
  36.                 visibility: hidden;
  37.             }
  39.             #pdfFrame, #pdfFrame * {
  40.                 visibility: visible;
  41.             }
  43.             #pdfFrame {
  44.                 position: absolute;
  45.                 left: 0;
  46.                 top: 0;
  47.                 width: 100%;
  48.             }
  50.             .main-button,
  51.             .wrapper-languages {
  52.                 display: none !important;
  53.             }
  54.         }
  55.     </style>
  56.     <style>
  58.         .disabled-btn {
  60.             background-color: gray;
  61.         }
  63.         .letter-type {
  65.             width: 215.9mm;
  66.             height: 279.4mm;
  67.         }
  69.         .border-letter-preview {
  71.             height: 297mm;
  72.             width: 100%;
  73.             border: 1px solid red;
  74.         }
  76.         .border-preview {
  78.             height: 279.4mm;
  79.             width: 100%;
  80.             border: 1px solid red;
  81.         }
  83.         .wrapper-main-title h2{
  84.             margin-bottom: 3px!important;
  85.         }
  87.         .wrapper-title .wrapper-right p {
  88.             font-size: 13px;
  89.         }
  91.         p{
  93.             word-break: break-word;
  94.         }
  96.         .wrapper-title .wrapper-right strong{
  97.             font-size: 13px;
  98.         }
  100.         .wrapper-title .wrapper-right h6{
  101.             font-size: 13px;
  102.         }
  104.     </style>
  105.     {% if page.id == 34 %}
  107.         <style>
  108.             .wrapper-main-title * {
  110.                 font-size: 21px;
  111.             }
  112.         </style>
  113.     {% endif %}
  115.     {% if editable %}
  116.         <style>
  117.             .wrapper-user-footer {
  119.                 display: none!important;
  120.             }
  121.         </style>
  122.     {% endif %}
  123.     {% if pantum is defined and pantum %}
  124.         <style>
  125.             #preview {
  127.                 filter: contrast(50%);
  128.             }
  130.             h5 {
  131.                 background-color: #7f7f7f99;
  132.             }
  134.             p{
  136.                 color: #696969;
  137.             }
  139.             .wrapper-file-upload {
  141.                 z-index: 9999;
  142.             }
  143.         </style>
  144.     {% endif %}
  146.     {% if ipad is defined and ipad %}
  147.         <style>
  149.             h5 {
  150.                 font-size: 9px;
  151.             }
  153.             .wrapper-right-data p {
  155.                 font-size: 10px;
  156.                 line-height: 11px;
  157.             }
  158.         </style>
  159.     {% endif %}
  160.     {% if page.templateCountry == 'AM' %}
  161.         <div class="wrapper-languages">
  162.             <ul>
  163.                 <li>
  164.                     <a href="{{ path(app.request.get('_route'), app.request.get('_route_params')|merge({'_locale': 'hy'})) }}">
  165.                         <span>ARMENIAN</span>
  166.                     </a>
  167.                 </li>
  168.                 <li>
  169.                     <a href="{{ path(app.request.get('_route'), app.request.get('_route_params')|merge({'_locale': 'ru'})) }}">
  170.                         <span>RUSSIAN</span>
  171.                     </a>
  172.                 </li>
  173.                 <li>
  174.                     <a href="{{ path(app.request.get('_route'), app.request.get('_route_params')|merge({'_locale': 'en'})) }}">
  175.                         <span>ENGLISH</span>
  176.                     </a>
  177.                 </li>
  178.             </ul>
  179.         </div>
  180.     {% else %}
  181.         <div class="wrapper-languages">
  182.             <ul>
  183.                 <li>
  184.                     <a href="{{ path(app.request.get('_route'), app.request.get('_route_params')|merge({'_locale': 'en'})) }}">
  185.                         <span>ENGLISH</span>
  186.                     </a>
  187.                 </li>
  188.                 <li>
  189.                     <a href="{{ path(app.request.get('_route'), app.request.get('_route_params')|merge({'_locale': 'ru'})) }}">
  190.                         <span>RUSSIAN</span>
  191.                     </a>
  192.                 </li>
  193.                 <li>
  194.                     <a href="{{ path(app.request.get('_route'), app.request.get('_route_params')|merge({'_locale': 'ka'})) }}">
  195.                         <span>GEORGIA</span>
  196.                     </a>
  197.                 </li>
  198.                 <li>
  199.                     <a href="{{ path(app.request.get('_route'), app.request.get('_route_params')|merge({'_locale': 'uk'})) }}">
  200.                         <span>UKRAINE</span>
  201.                     </a>
  202.                 </li>
  203.             </ul>
  204.         </div>
  205.     {% endif %}
  206.     <button class="main-button" onclick="printPDF()">print</button>
  208.     <div id="printedData" data-id=""></div>
  210.     <div class="page {% if page.templateCountry == 'US' and preview %}border-letter-preview{% endif %} {% if page.templateCountry == 'AM' and preview %}border-preview{% endif %} {% if editable == true %}bordred{% endif %}" id="pdfFrame">
  211.         <div class="wrapper-title">
  212.             <div class="wrapper-left">
  213.                 {# ✅ keyword stored in data-keyword, date part will be set by JS #}
  214.                 <span
  215.                         style="font-size: 12px;margin-bottom: -3px"
  216.                         id="documentId"
  217.                         data-template="{{ page.id }}"
  218.                         data-keyword="{{ page.keyWord }}"
  219.                         data-value="{{ page.keyWord ~ "now"|date('siHYmd') }}"
  220.                         data-letter="{{ page.id }}"
  221.                 >
  222.                     infinitemoment.life
  223.                 </span>
  224.                 <img style="height: 100px;margin: 5px 0" src="{{ asset('images/life.png') }}" alt="">
  225.                 {# ✅ This span's text will be updated by JS on load and on image change #}
  226.                 <span
  227.                         id="generatedCode"
  228.                         style="font-size: 12px;margin-top: -5px"
  229.                         data-value="{{ page.keyWord ~ "now"|date('siHYmd') }}"
  230.                 >
  231.                     {{ page.keyWord }}{{ "now"|date('siHYmd') }}
  232.                 </span>
  233.             </div>
  234.             <div class="wrapper-middle">
  235.                 <h1>The Infinite Moment </h1>
  236.                 <h3 style="position: relative">Gazette {% if page.templateCountry == 'UK' %} <span style="font-size: 18px;position: absolute;min-width: max-content;top: -6px;font-style: italic;right: -98%">London Edition</span>{% endif %}</h3>
  237.                 <h2>{{ 'Reflection Framed Forever'|trans }}</h2>
  238.                 <p style="    font-size: 11px;'1
  239.     margin-top: 10px;display:flex;align-items:center;gap:10px">
  240.                     {{ 'Cost of each example:'|trans }} <strong style="font-size:32px"> ∞ </strong> {{ 'memory'|trans }}
  241.                 </p>
  242.             </div>
  243.             <div class="wrapper-right">
  244.                 <h6>
  245.                     <p>{{ 'Special News'|trans }}</p>
  246.                     {% if page.id != 207 %}
  247.                         {% if page.id == 43 %}
  248.                             <strong> ԷՐԵԲՈՒՆԻ զարդերի</strong>
  249.                             <br>  հավաքածուն <br>
  250.                         {% elseif page.id == 52 %}
  252.                         {% elseif page.id == 121 %}
  253.                             <strong> Ծնվել է</strong>
  254.                             <br>  Հայտնի աստղ <br>
  255.                             <strong style="font-size:20px">
  256.                                 03.05.2024
  257.                             </strong>
  258.                         {% else %}
  259.                             <strong> {{ 'Famous superstar'|trans }} </strong>
  260.                             {% if app.request.locale != 'en' %}
  261.                                 <br> {{ 'was spotted in'|trans }} <br>
  262.                             {% endif %}
  263.                         {% endif %}
  264.                     {% endif %}
  266.                     {% if editable %}
  267.                         <div class="editable">
  268.                             <div class="edit-icon" style="right: -15px"><i class="fas fa-edit" data-field="location"
  269.                                                                            onclick="openEditor(this)"></i></div>
  270.                             <span class="text-editable">{{ page.location|raw }}</span>
  271.                         </div>
  272.                     {% else %}
  273.                         {% if page.location %}
  274.                             <div class="editable">
  275.                                 <span class="text-editable">{{ page.location|raw }}</span>
  276.                             </div>
  277.                         {% endif %}
  278.                     {% endif %}
  279.                     {% if page.id != 215 %}
  280.                         {% if app.request.locale == 'en' %}
  281.                             {{ 'on'|trans }}
  282.                             <br>
  283.                         {% endif %}
  284.                         {% if page.id != 121 %}
  285.                             <strong style="font-size:20px">
  286.                                 {{ "now"|date('d.m.Y') }}
  287.                             </strong>
  288.                         {% endif %}
  289.                     {% else %}
  290.                         <strong style="font-size:20px">
  291.                             01.09.2026
  292.                         </strong>
  293.                     {% endif %}
  294.                 </h6>
  295.             </div>
  296.         </div>
  297.         <div class="wrapper-content">
  298.             <div class="wrapper-data">
  299.                 <div class="wrapper-image" style="    border: 4px solid;position: relative;
  300.     width: calc(100% - 20px);
  301.     padding: 4px;overflow:hidden;background:#fff">
  302.                     <input id="fileInput" type="file" class="wrapper-file-upload">
  303.                     <img id="preview" src="{{ asset('images/pics.jpg') }}"
  304.                          style="width:100%;height:100%;object-fit:cover">
  305.                 </div>
  306.                 <div style="padding-bottom: 0!important" class="wrapper-main-title editable">
  307.                     {% if editable %}
  308.                         <div class="edit-ic on"><i class="fas fa-edit" data-field="imageText"
  309.                                                    onclick="openEditor(this)"></i></div>
  310.                         <span class="text-editable">{{ page.imageText|raw }}</span>
  311.                     {% else %}
  312.                         {% if page.imageText %}
  313.                             <span class="text-editable">{{ page.imageText|raw }}</span>
  314.                         {% endif %}
  315.                     {% endif %}
  317.                 </div>
  318.                 <div class="wrapper-items">
  319.                     <div class="wrapper-item-box">
  320.                         <div class="wrapper-item">
  321.                             {% if editable %}
  322.                                 <div class="editable">
  323.                                     <div class="edit-icon"><i class="fas fa-edit" data-field="firstColumnTitle"
  324.                                                               onclick="openEditor(this)"></i></div>
  325.                                     <h5 style="font-size: 12px"
  326.                                         class="text-editable">{{ page.firstColumnTitle|raw }}</h5>
  327.                                 </div>
  328.                             {% else %}
  329.                                 {% if page.firstColumnTitle %}
  330.                                     <div class="editable">
  331.                                         <h5 style="font-size: 12px"
  332.                                             class="text-editable">{{ page.firstColumnTitle|raw }}</h5>
  333.                                     </div>
  334.                                 {% endif %}
  335.                             {% endif %}
  337.                             {% if editable %}
  338.                                 <div class="editable">
  339.                                     <div class="edit-icon"><i class="fas fa-edit" data-field="firstColumnText"
  340.                                                               onclick="openEditor(this)"></i></div>
  341.                                     <span class="text-editable">
  342.                                     {{ page.firstColumnText|raw }}
  343.                                 </span>
  344.                                 </div>
  345.                             {% else %}
  346.                                 {% if page.firstColumnText %}
  347.                                     <div class="editable">
  348.                                         <span class="text-editable">
  349.                                             {{ page.firstColumnText|raw }}
  350.                                         </span>
  351.                                     </div>
  352.                                 {% endif %}
  353.                             {% endif %}
  354.                             {% if editable %}
  355.                                 <div class="editable">
  356.                                     <div class="edit-icon">
  357.                                         <i class="fas fa-images imgUpload" onclick="fileUpload(this)"
  358.                                            data-field="firstColumnImage"></i>
  359.                                     </div>
  360.                                     <img class="image-editable" src="{{ '/user_uploads/'~page.firstColumnImage }}"
  361.                                          width="100%" alt="">
  362.                                 </div>
  363.                             {% else %}
  364.                                 {% if page.firstColumnImage %}
  365.                                     <div class="editable">
  366.                                         <img class="image-editable" src="{{ '/user_uploads/'~page.firstColumnImage }}"
  367.                                              width="100%" alt="">
  368.                                     </div>
  369.                                 {% endif %}
  370.                             {% endif %}
  371.                         </div>
  372.                         <div class="wrapper-item">
  373.                             {% if editable %}
  374.                                 <div class="editable">
  376.                                     <div class="edit-icon"><i class="fas fa-edit" data-field="firstColumnSecondTitle"
  377.                                                               onclick="openEditor(this)"></i></div>
  378.                                     <h5 class="text-editable">{{ page.firstColumnSecondTitle|raw }}</h5>
  379.                                 </div>
  380.                             {% else %}
  381.                                 {% if page.firstColumnSecondTitle %}
  382.                                     <div class="editable">
  383.                                         <h5 class="text-editable">{{ page.firstColumnSecondTitle|raw }}</h5>
  384.                                     </div>
  385.                                 {% endif %}
  386.                             {% endif %}
  387.                             {% if editable %}
  388.                                 <div class="editable">
  389.                                     <div class="edit-icon"><i class="fas fa-edit" data-field="firstColumnSecondText"
  390.                                                               onclick="openEditor(this)"></i></div>
  391.                                     <span class="text-editable">
  392.                                         {{ page.firstColumnSecondText|raw }}
  393.                                     </span>
  394.                                 </div>
  395.                             {% else %}
  396.                                 {% if page.firstColumnSecondText %}
  397.                                     <div class="editable">
  398.                                         <span class="text-editable">
  399.                                             {{ page.firstColumnSecondText|raw }}
  400.                                         </span>
  401.                                     </div>
  402.                                 {% endif %}
  403.                             {% endif %}
  404.                             {% if editable %}
  405.                                 <div class="editable">
  406.                                     <div class="edit-icon">
  407.                                         <i class="fas fa-images imgUpload" onclick="fileUpload(this)"
  408.                                            data-field="firstColumnSecondImage"></i>
  409.                                     </div>
  410.                                     <img class="image-editable" src="{{ '/user_uploads/'~page.firstColumnSecondImage }}"
  411.                                          width="100%" alt="">
  412.                                 </div>
  413.                             {% else %}
  414.                                 {% if page.firstColumnSecondImage %}
  415.                                     <div class="editable">
  416.                                         <img class="image-editable"
  417.                                              src="{{ '/user_uploads/'~page.firstColumnSecondImage }}"
  418.                                              width="100%" alt="">
  419.                                     </div>
  420.                                 {% endif %}
  421.                             {% endif %}
  422.                         </div>
  423.                     </div>
  424.                     <div class="wrapper-item-box">
  425.                         <div class="wrapper-item">
  426.                             {% if editable %}
  427.                                 <div class="editable">
  429.                                     <div class="edit-icon"><i class="fas fa-edit" data-field="secondColumnTitle"
  430.                                                               onclick="openEditor(this)"></i></div>
  431.                                     <h5 class="text-editable">{{ page.secondColumnTitle|raw }}</h5>
  432.                                 </div>
  433.                             {% else %}
  434.                                 {% if page.secondColumnTitle %}
  435.                                     <div class="editable">
  436.                                         <h5 class="text-editable">{{ page.secondColumnTitle|raw }}</h5>
  437.                                     </div>
  438.                                 {% endif %}
  439.                             {% endif %}
  440.                             {% if editable %}
  441.                                 <div class="editable">
  442.                                     <div class="edit-icon"><i class="fas fa-edit" data-field="secondColumnText"
  443.                                                               onclick="openEditor(this)"></i></div>
  444.                                     <span class="text-editable">
  445.                                         {{ page.secondColumnText|raw }}
  446.                                     </span>
  447.                                 </div>
  448.                             {% else %}
  449.                                 {% if page.secondColumnText %}
  450.                                     <div class="editable">
  451.                                         <span class="text-editable">
  452.                                             {{ page.secondColumnText|raw }}
  453.                                         </span>
  454.                                     </div>
  455.                                 {% endif %}
  456.                             {% endif %}
  457.                             {% if editable %}
  458.                                 <div class="editable">
  459.                                     <div class="edit-icon">
  460.                                         <i class="fas fa-images imgUpload" onclick="fileUpload(this)"
  461.                                            data-field="secondColumnImage"></i>
  462.                                     </div>
  463.                                     <img class="image-editable" src="{{ '/user_uploads/'~page.secondColumnImage|raw }}"
  464.                                          width="100%" alt="">
  465.                                 </div>
  466.                             {% else %}
  467.                                 {% if page.secondColumnImage %}
  468.                                     <div class="editable">
  469.                                         <img class="image-editable"
  470.                                              src="{{ '/user_uploads/'~page.secondColumnImage|raw }}"
  471.                                              width="100%" alt="">
  472.                                     </div>
  473.                                 {% endif %}
  474.                             {% endif %}
  475.                         </div>
  476.                         <div class="wrapper-item">
  477.                             {% if editable %}
  478.                                 <div class="editable">
  479.                                     <div class="edit-icon"><i class="fas fa-edit" data-field="secondColumSecondTitle"
  480.                                                               onclick="openEditor(this)"></i></div>
  481.                                     <h5 class="text-editable">{{ page.secondColumSecondTitle|raw }}</h5>
  482.                                 </div>
  483.                             {% else %}
  484.                                 {% if page.secondColumSecondTitle %}
  485.                                     <div class="editable">
  486.                                         <h5 class="text-editable">{{ page.secondColumSecondTitle|raw }}</h5>
  487.                                     </div>
  488.                                 {% endif %}
  489.                             {% endif %}
  490.                             {% if editable %}
  491.                                 <div class="editable">
  492.                                     <div class="edit-icon"><i class="fas fa-edit" data-field="secondColumnSecondText"
  493.                                                               onclick="openEditor(this)"></i></div>
  494.                                     <span class="text-editable">
  495.                                         {{ page.secondColumnSecondText|raw }}
  496.                                     </span>
  497.                                 </div>
  498.                             {% else %}
  499.                                 {% if page.secondColumnSecondText %}
  500.                                     <div class="editable">
  501.                                         <span class="text-editable">
  502.                                             {{ page.secondColumnSecondText|raw }}
  503.                                         </span>
  504.                                     </div>
  505.                                 {% endif %}
  506.                             {% endif %}
  507.                             {% if editable %}
  508.                                 <div class="editable">
  509.                                     <div class="edit-icon">
  510.                                         <i class="fas fa-images imgUpload" onclick="fileUpload(this)"
  511.                                            data-field="secondColumnSecondImage"></i>
  512.                                     </div>
  513.                                     <img class="image-editable"
  514.                                          src="{{ '/user_uploads/'~page.secondColumnSecondImage }}"
  515.                                          width="100%" alt="">
  516.                                 </div>
  517.                             {% else %}
  518.                                 {% if page.secondColumnSecondImage %}
  519.                                     <div class="editable">
  520.                                         <img class="image-editable"
  521.                                              src="{{ '/user_uploads/'~page.secondColumnSecondImage }}"
  522.                                              width="100%" alt="">
  523.                                     </div>
  524.                                 {% endif %}
  525.                             {% endif %}
  526.                         </div>
  527.                     </div>
  528.                     <div class="wrapper-item-box">
  529.                         <div class="wrapper-item">
  530.                             {% if editable %}
  531.                                 <div class="editable">
  532.                                     <div class="edit-icon"><i class="fas fa-edit" data-field="thirdColumnTitle"
  533.                                                               onclick="openEditor(this)"></i></div>
  534.                                     <h5 class="text-editable">{{ page.thirdColumnTitle|raw }}</h5>
  535.                                 </div>
  536.                             {% else %}
  537.                                 {% if page.thirdColumnTitle %}
  538.                                     <div class="editable">
  539.                                         <h5 class="text-editable">{{ page.thirdColumnTitle|raw }}</h5>
  540.                                     </div>
  541.                                 {% endif %}
  542.                             {% endif %}
  543.                             {% if editable %}
  544.                                 <div class="editable">
  545.                                     <div class="edit-icon"><i class="fas fa-edit" data-field="thirdColumnText"
  546.                                                               onclick="openEditor(this)"></i></div>
  547.                                     <span class="text-editable">
  548.                                         {{ page.thirdColumnText|raw }}
  549.                                     </span>
  550.                                 </div>
  551.                             {% else %}
  552.                                 {% if page.thirdColumnText %}
  553.                                     <div class="editable">
  554.                                         <span class="text-editable">
  555.                                             {{ page.thirdColumnText|raw }}
  556.                                         </span>
  557.                                     </div>
  558.                                 {% endif %}
  559.                             {% endif %}
  560.                             {% if editable %}
  561.                                 <div class="editable">
  562.                                     <div class="edit-icon">
  563.                                         <i class="fas fa-images imgUpload" onclick="fileUpload(this)"
  564.                                            data-field="thirdColumnImage"></i>
  565.                                     </div>
  566.                                     <img class="image-editable" src="{{ '/user_uploads/'~page.thirdColumnImage }}"
  567.                                          width="100%" alt="">
  568.                                 </div>
  569.                             {% else %}
  570.                                 {% if page.thirdColumnImage %}
  571.                                     <div class="editable">
  572.                                         <img class="image-editable" src="{{ '/user_uploads/'~page.thirdColumnImage }}"
  573.                                              width="100%" alt="">
  574.                                     </div>
  575.                                 {% endif %}
  576.                             {% endif %}
  577.                         </div>
  578.                         <div class="wrapper-item">
  579.                             {% if editable %}
  580.                                 <div class="editable">
  581.                                     <div class="edit-icon"><i class="fas fa-edit" data-field="thirdColumnSecondTitle"
  582.                                                               onclick="openEditor(this)"></i></div>
  583.                                     <h5 class="text-editable">{{ page.thirdColumnSecondTitle|raw }}</h5>
  584.                                 </div>
  585.                             {% else %}
  586.                                 {% if page.thirdColumnSecondTitle %}
  587.                                     <div class="editable">
  588.                                         <h5 class="text-editable">{{ page.thirdColumnSecondTitle|raw }}</h5>
  589.                                     </div>
  590.                                 {% endif %}
  591.                             {% endif %}
  592.                             {% if editable %}
  593.                                 <div class="editable">
  594.                                     <div class="edit-icon"><i class="fas fa-edit" data-field="thirdColumnSecondText"
  595.                                                               onclick="openEditor(this)"></i></div>
  596.                                     <span class="text-editable">
  597.                                         {{ page.thirdColumnSecondText|raw }}
  598.                                     </span>
  599.                                 </div>
  600.                             {% else %}
  601.                                 {% if page.thirdColumnSecondText %}
  602.                                     <div class="editable">
  603.                                         <span class="text-editable">
  604.                                             {{ page.thirdColumnSecondText|raw }}
  605.                                         </span>
  606.                                     </div>
  607.                                 {% endif %}
  608.                             {% endif %}
  609.                             {% if editable %}
  610.                                 <div class="editable">
  611.                                     <div class="edit-icon">
  612.                                         <i class="fas fa-images imgUpload" onclick="fileUpload(this)"
  613.                                            data-field="thirdColumnSecondImage"></i>
  614.                                     </div>
  615.                                     <img class="image-editable" src="{{ '/user_uploads/'~page.thirdColumnSecondImage }}"
  616.                                          width="100%" alt="">
  617.                                 </div>
  618.                             {% else %}
  619.                                 {% if page.thirdColumnSecondImage %}
  620.                                     <div class="editable">
  621.                                         <img class="image-editable"
  622.                                              src="{{ '/user_uploads/'~page.thirdColumnSecondImage }}"
  623.                                              width="100%" alt="">
  624.                                     </div>
  625.                                 {% endif %}
  626.                             {% endif %}
  627.                         </div>
  628.                     </div>
  629.                 </div>
  630.             </div>
  631.             <div class="wrapper-right-data">
  632.                 <div class="wrapper-item">
  633.                     {% if editable %}
  634.                         <div class="editable">
  635.                             <div class="edit-icon"><i class="fas fa-edit" data-field="fourthColumnTitle"
  636.                                                       onclick="openEditor(this)"></i></div>
  637.                             <h5 class="text-editable">{{ page.fourthColumnTitle|raw }}</h5>
  638.                         </div>
  639.                     {% else %}
  640.                         {% if page.fourthColumnTitle %}
  641.                             <div class="editable">
  642.                                 <h5 class="text-editable">{{ page.fourthColumnTitle|raw }}</h5>
  643.                             </div>
  644.                         {% endif %}
  645.                     {% endif %}
  646.                     {% if editable %}
  647.                         <div class="editable">
  648.                             <div class="edit-icon"><i class="fas fa-edit" data-field="fourthColumnText"
  649.                                                       onclick="openEditor(this)"></i></div>
  650.                             <span class="text-editable">
  651.                                     {{ page.fourthColumnText|raw }}
  652.                                 </span>
  653.                         </div>
  654.                     {% else %}
  655.                         {% if page.fourthColumnText %}
  656.                             <div class="editable">
  657.                                     <span class="text-editable">
  658.                                         {{ page.fourthColumnText|raw }}
  659.                                     </span>
  660.                             </div>
  661.                         {% endif %}
  662.                     {% endif %}
  663.                     {% if editable %}
  664.                         <div class="editable">
  665.                             <div class="edit-icon">
  666.                                 <i class="fas fa-images imgUpload" onclick="fileUpload(this)"
  667.                                    data-field="fourthColumnImage"></i>
  668.                             </div>
  669.                             <img class="image-editable" src="{{ '/user_uploads/'~page.fourthColumnImage }}"
  670.                                  width="100%"
  671.                                  alt="">
  672.                         </div>
  673.                     {% else %}
  674.                         {% if page.fourthColumnImage %}
  675.                             <div class="editable">
  676.                                 <img class="image-editable" src="{{ '/user_uploads/'~page.fourthColumnImage }}"
  677.                                      width="100%"
  678.                                      alt="">
  679.                             </div>
  680.                         {% endif %}
  681.                     {% endif %}
  682.                 </div>
  683.                 <div class="wrapper-item">
  684.                     {% if editable %}
  685.                         <div class="editable">
  686.                             <div class="edit-icon"><i class="fas fa-edit" data-field="fourthColumnSecondTitle"
  687.                                                       onclick="openEditor(this)"></i></div>
  688.                             <h5 class="text-editable">{{ page.fourthColumnSecondTitle|raw }}</h5>
  689.                         </div>
  690.                     {% else %}
  691.                         {% if page.fourthColumnSecondTitle %}
  692.                             <div class="editable">
  693.                                 <h5 class="text-editable">{{ page.fourthColumnSecondTitle|raw }}</h5>
  694.                             </div>
  695.                         {% endif %}
  696.                     {% endif %}
  697.                     {% if editable %}
  698.                         <div class="editable">
  699.                             <div class="edit-icon"><i class="fas fa-edit" data-field="fourthColumnSecondText"
  700.                                                       onclick="openEditor(this)"></i></div>
  701.                             <span class="text-editable">
  702.                                     {{ page.fourthColumnSecondText|raw }}
  703.                                 </span>
  704.                         </div>
  705.                     {% else %}
  706.                         {% if page.fourthColumnSecondText %}
  707.                             <div class="editable">
  708.                                     <span class="text-editable">
  709.                                         {{ page.fourthColumnSecondText|raw }}
  710.                                     </span>
  711.                             </div>
  712.                         {% endif %}
  713.                     {% endif %}
  714.                     {% if editable %}
  715.                         <div class="editable">
  716.                             <div class="edit-icon">
  717.                                 <i class="fas fa-images imgUpload" onclick="fileUpload(this)"
  718.                                    data-field="fourthColumnSecondImage"></i>
  719.                             </div>
  720.                             <img class="image-editable" src="{{ '/user_uploads/'~page.fourthColumnSecondImage }}"
  721.                                  width="100%" alt="">
  722.                         </div>
  723.                     {% else %}
  724.                         {% if page.fourthColumnSecondImage %}
  725.                             <div class="editable">
  726.                                 <img class="image-editable"
  727.                                      src="{{ '/user_uploads/'~page.fourthColumnSecondImage }}"
  728.                                      width="100%" alt="">
  729.                             </div>
  730.                         {% endif %}
  731.                     {% endif %}
  732.                 </div>
  733.             </div>
  734.         </div>
  735.     </div>
  736.     {% if editable %}
  737.         <div id="myModal" class="modal">
  738.             <!-- Modal content -->
  739.             <div class="modal-content">
  741.                 <div class="modal-body">
  742.                     <input type="hidden" id="fieldName" value="">
  743.                     <input type="hidden" id="pageID" name="pageId" value="{{ page.id }}">
  744.                     <textarea name="" class="editorShort" id="editor_value" style="width: 100%; height: 500px"
  745.                               rows="50"></textarea>
  746.                 </div>
  747.                 <div class="modal-footer">
  748.                     <button onclick="discardModal()">discard Changes</button>
  749.                     <button onclick="SaveModalData()">Save Changes</button>
  750.                 </div>
  751.             </div>
  753.         </div>
  754.         <div id="FileUploadModal" class="modal">
  755.             <!-- Modal content -->
  756.             <div class="modal-content">
  758.                 <div class="modal-body">
  759.                     <input type="hidden" id="FileFieldName" value="">
  760.                     <input type="hidden" id="FilePageID" value="{{ page.id }}">
  761.                     <input id="ModalFileInput" type="file" name="fileInput" class="modalFileUpload">
  762.                     <img id="ModalFilePreview" width="300" height="300">
  763.                 </div>
  764.                 <div class="modal-footer">
  765.                     <button onclick="discardModalFileUpload()">discard Changes</button>
  766.                     <button onclick="saveUploadedFile()">Save Changes</button>
  767.                     <button onclick="removeCurrentImage()">Remove Image</button>
  768.                 </div>
  769.             </div>
  771.         </div>
  772.         <button id="openModalButton" style="display: none"></button>
  773.         <button id="FileUploadButton" style="display: none"></button>
  774.         <script src="{{ asset('js/ckeditor.js') }}"></script>
  775.         <script src="{{ asset('js/jquery-3.6.3.min.js') }}"></script>
  776.     {% endif %}
  778. {% endblock %}