<div id="ok-head">	
   <script type="text/javascript" src="{{Theme::asset()->get('theme/js/htmleditor/jquery.min.js')}}"></script>
	
	<!-- CSS BEGIN -->
   <link rel="stylesheet" href="{{Theme::asset()->get('theme/css/htmleditor/bulma.min.css')}}">
   <link rel="stylesheet" href="{{Theme::asset()->get('theme/css/htmleditor/style.css')}}">
   <link rel="stylesheet" href="{{Theme::asset()->get('theme/css/htmleditor/fontawesome-all.min.css')}}">
   <link rel="stylesheet" href="{{Theme::asset()->get('theme/css/htmleditor/animate.min.css')}}">
   <link rel="stylesheet" href="{{Theme::asset()->get('theme/css/htmleditor/aos.css')}}">
   <link rel="stylesheet" href="{{Theme::asset()->get('theme/css/htmleditor/spectrum.css')}}">
   <link rel="stylesheet" href="{{Theme::asset()->get('theme/css/htmleditor/codemirror.css')}}">
   <link id="cmtm" rel="stylesheet" href="{{Theme::asset()->get('theme/codemirror-theme/dracula.css')}}">
   <link rel="stylesheet" href="{{Theme::asset()->get('theme/css/htmleditor/jquery.splitter.css')}}">
   <link rel="stylesheet" href="{{Theme::asset()->get('theme/css/htmleditor/builder.css')}}">
   <link rel="stylesheet" href="{{Theme::asset()->get('theme/css/htmleditor/bootstrap-iconpicker.min.css')}}"/>
</div>

<div class="page-htmleditor">
    <div class="app-loader">
    </div>
    
    <!-- ::START: Project Page:: -->
    <div id="project-source">
    <!--[if IE]>
        <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
    <![endif]-->
    <!-- ::START: Global Header -->
    <div id="hm-header" style="display:none">
        <header class="ok-is-header">
            <nav class="ok-is-nav navbar container w-90 bg-transparent">
                <div class="navbar-brand text-center">
                    <div class="ok-is-logo navbar-item brand-logo">
                        <img src="{{Theme::asset()->get('theme/images/htmleditor/logo.svg')}}" alt="OctoKing Logo" />
                    </div>
                </div>
            </nav>
        </header>
    </div><!-- ::END: Global Header -->
    
    <!-- ::START: Zip IndexPage/SortableWrap from here -->
    <div id="index-page-content" class="page-one main-content for-dyn-block sortable-section">
        @if($editData=="")
        	<div id="index-page-placeholder">
                <section id="index-page-placeholder-content" class="ok-is-block section">	
                    <div class="container w-90 mt-50 text-left">
                        <div class="m-0 w-15 text-center">
                            <h1 class="font-a fs-14 bg-gray-lighter ds-tb-silver br-10 p-10">Header Section</h1>
                            <i class="fas fa-long-arrow-alt-up fs-32 silver"></i>
                        </div>	
                    </div>
                    <div class="container w-90 mt-10 mb-20 text-center">
                        <h1 class="text-center font-a fs-32"><strong>Get Started by Adding New Block.</strong></h1>
                        <h2 class="text-center mt-10 font-a fs-18">Click on the <strong>Plus</strong> button to Add a New Block.</h2>
                        <button class="add-section-block button mt-20 is-large bg-blue white no-border"><i class="fas fa-plus"></i></button>
                    </div>	
                    <div class="container w-90 mt-50 text-left">
                        <div class="m-0 w-15 text-center">
                            <i class="fas fa-long-arrow-alt-down fs-32 silver"></i>
                            <h1 class="font-a fs-14 bg-gray-lighter ds-tb-silver br-10 p-10">Footer Section</h1>
                        </div>	
                    </div>
                </section>
            </div>
         @else
         	{!! $editData !!}
         @endif   	
     
    </div><!-- ::END: Zip Index Page/Sortable Wrap -->
    
    <!-- ::START: Zip Page two from here -->
    <div id="page-two-content" class="page-two for-dyn-block">
    </div><!-- ::END: Zip Page two Page -->
    
    <!-- ::START: Zip Page two from here -->
    <div id="page-three-content" class="page-three for-dyn-block"> 
    </div><!-- ::END: Zip Page two Page -->
    
    <!-- ::START: Zip Page two from here -->
    <div id="page-four-content" class="page-four for-dyn-block"> 
    </div><!-- ::END: Zip Page two Page -->
    
    <!-- ::START: Zip Page two from here -->
    <div id="page-five-content" class="page-five for-dyn-block"> 
    </div><!-- ::END: Zip Page two Page -->
    
    <!-- ::START: Global Footer -->
    <div id="hm-footer" class="for-dyn-block" style="display:none">
        <footer class="ok-is-block ok-is-footer">
            <div class="ok-is-container container w-90 pt-10 pb-10">
                <div class="columns is-variable is-multiline">
                    <div class="column has-text-centered-desktop has-text-centered-tablet-only has-text-centered-mobile">
                        <p class="ok-is-text font-b ok-paragraph fs-18 ecolor-a mb-10 mt-15">Copyright © Domain.com</p>
                    </div>
                </div>
            </div>
        </footer>
    </div><!-- ::END: Global Footer -->
    
    <!-- ::START: Check Pages -->
    <div class="has-pages hm-theme"></div>
    <div class="has-headers page-2-header page-3-header page-4-header page-5-header hm-theme"></div>
    <div class="has-footers page-2-footer page-3-footer page-4-footer page-5-footer hm-theme"></div>
    <div id="empty-db" class="hm-theme"></div>
    <!-- ::END: Check Pages -->
    <!-- ::Page Meta Database :: -->
    <div id="main-page-meta" class="hm-theme">
    <p id="page-meta-title"></p>
    <p id="page-meta-desc"></p>
    <p id="web-domain"></p>
    <p id="web-ogimg"></p>
    <p id="web-favicon"></p>
    <p id="page-2-meta-title"></p>
    <p id="page-2-meta-desc"></p>
    <p id="page-2-web-domain"></p>
    <p id="page-2-web-ogimg"></p>
    <p id="page-2-web-favicon"></p>
    <p id="page-3-meta-title"></p>
    <p id="page-3-meta-desc"></p>
    <p id="page-3-web-domain"></p>
    <p id="page-3-web-ogimg"></p>
    <p id="page-3-web-favicon"></p>
    <p id="page-4-meta-title"></p>
    <p id="page-4-meta-desc"></p>
    <p id="page-4-web-domain"></p>
    <p id="page-4-web-ogimg"></p>
    <p id="page-4-web-favicon"></p>
    <p id="page-5-meta-title"></p>
    <p id="page-5-meta-desc"></p>
    <p id="page-5-web-domain"></p>
    <p id="page-5-web-ogimg"></p>
    <p id="page-5-web-favicon"></p>
    </div>
    <!-- ::Custom Font Family Database :: -->
    <div id="font-family-setting" class="hm-theme">
    <p id="font-a-src"></p>
    <p id="font-b-src"></p>
    <p id="font-c-src"></p>
    <p id="font-a-code"></p>
    <p id="font-b-code"></p>
    <p id="font-c-code"></p>
    </div>
    <!-- ::Custom CSS/JS Database :: -->
    <div id="primary-setting" class="hm-theme">
    <p id="db-primary-css-code" class="primary-color"></p>
    <p id="db-primary-hover-css-code" class="primary-hover-color"></p>
    <p id="db-secondary-css-code" class="secondary-color"></p>
    <p id="db-link-css-code" class="link-color"></p>
    <p id="db-link-hover-css-code" class="link-hover-color"></p>
    <p id="db-ecolor-a-css-code" class="ecolor-a"></p>
    <p id="db-ecolor-b-css-code" class="ecolor-b"></p>
    <p id="db-ecolor-c-css-code" class="ecolor-c"></p>
    <p id="db-ecolor-d-css-code" class="ecolor-d"></p>
    </div>
    <div id="css-js-db-files" class="hm-theme">
    <p id="db-css-code"></p>
    <p id="db-css-link-a"></p>
    <p id="db-css-link-b"></p>
    <p id="db-css-link-c"></p>
    <p id="db-css-link-d"></p>
    <p id="db-css-link-e"></p>
    <p id="db-js-code"></p>
    <p id="db-js-link-a"></p>
    <p id="db-js-link-b"></p>
    <p id="db-js-link-c"></p>
    <p id="db-js-link-d"></p>
    <p id="db-js-link-e"></p>
    </div>
    <!-- ::Header/Footer On/Off Database :: -->
    <div id="hf-db-files" class="hm-theme">
    <p id="db-header-2"></p>
    <p id="db-header-3"></p>
    <p id="db-header-4"></p>
    <p id="db-header-5"></p>
    <p id="db-footer-2"></p>
    <p id="db-footer-3"></p>
    <p id="db-footer-4"></p>
    <p id="db-footer-5"></p>
    </div>
    <!-- ::Custom CSS/JS files :: -->
    <div id="css-files" class="hm-theme">
    </div>
    <div id="hm-custom-css-link" class="hm-theme">
    </div>
    <div id="hm-custom-css" class="hm-theme">
    </div>
    <!-- ::Main Page JS files :: -->
    <div id="main-js-src" class="hm-theme">
    </div>
    <div id="js-files" class="hm-theme">
    </div>
    <div id="hm-custom-js-link" class="hm-theme">
    </div>
    <div id="hm-custom-js" class="hm-theme">
    </div>
    <!-- ::Dynamic JS files :: -->
    <div id="dynamic-custom-js" class="hm-theme">
    </div>
    <!-- ::Contact Email DB :: -->
    <div id="contact-form-db" class="hm-theme"> 
    <span id="contact-email"></span>
    <span id="contact-website"></span>
    <span id="contact-success-message"></span>
    <span id="contact-select-title">None</span>
    <span id="contact-option-title">Terms</span>
    <div id="contact-script-src"></div>
    </div>
    
    </div><!-- ::END: Project Page:: -->
    <!-- ::Main Menu Buttons:: -->
    <div id="main-menu-btn" class="main-menu-wrap main-draggable-menu">	
        <div id="main-menu-btnmenuheader">
            <div id="drag-menu" class="main-menu-btn tooltip" title="Drag Menu">
                <i class="fas fa-arrows-alt animate__animated animate__rotateIn animate__faster"></i>
            </div>
        </div>
        <div id="switch-setting" class="main-menu-btn tooltip animate__animated animate__zoomIn animate__faster" title="Global Setting">
            <i class="fas fa-cog"></i>
        </div>
        <div id="switch-seo" class="main-menu-btn tooltip animate__animated animate__zoomIn animate__faster" title="Page SEO">
            <i class="fas fa-search"></i>
        </div>
        <div id="switch-integration" class="main-menu-btn tooltip animate__animated animate__zoomIn animate__faster" title="Integrations">
            <i class="fas fa-plug"></i>
        </div>
        <div id="switch-add-page" class="main-menu-btn tooltip animate__animated animate__zoomIn animate__faster" title="Page Settings">
            <i class="far fa-file-alt"></i>
        </div>
        <div id="switch-code" class="main-menu-btn tooltip animate__animated animate__zoomIn animate__faster" title="Custom Code">
            <i class="fas fa-code"></i>
        </div>
        <div id="switch-mob" class="main-menu-btn tooltip animate__animated animate__zoomIn animate__faster" title="Mobile View">
            <i class="fas fa-mobile-alt"></i>
        </div>
        <div id="switch-import-file" class="main-menu-btn tooltip animate__animated animate__zoomIn animate__faster" title="Upload Project File">
            <i class="fas fa-upload"></i>
        </div>
        <div id="switch-file" class="tooltip animate__animated animate__zoomIn animate__faster" title="Download File">
            <i class="fas fa-download"></i>
        </div>
    </div>
    
    <!-- ::Download Box:: -->
    <div id="download-pop-box" class="popup-wrap">
        <div class="popup-box">
            <p class="popup-title"><i class="far fa-file-archive"></i> my-webpage.zip</p>
            <div class="popup-content animate__animated animate__slideInUp animate__faster">
                <h3 class="download-message">Your file is ready to download!</h3>
                <p class="download-inst">Click the DOWNLOAD button.</p>
                <div class="popup-inner-conten animate__animated animate__slideInUp animate__fast">
                    <button id="download-webpage" class="app-btn-blue"><span class="app-btn-icon"><i class="fas fa-download"></i></span> DOWNLOAD</button>
                    <button id="close-download-box" class="app-btn-pink"><span class="app-btn-icon"><i class="fas fa-times"></i></span> CLOSE</button>				
                    
                    <div id="progressbar" class="download-progress animate__animated animate__pulse animate__fast">
                        <p id="download-status"></p>					
                        <progress class="progress-bar" value="0" min="0" max="100"></progress>
                        <div class="progress-image">
                            <img class="hw-20" src="{{Theme::asset()->get('theme/images/htmleditor/progress-image.gif')}}" alt="">					
                        </div>
                    </div> 
                    <div id="supportme" class="mt-30 m-0 w-50 white fs-18 pt-20 pb-20 pl-30 pr-30 br-200 bg-hover-red d-cursor" style="background: #FF424D;">
                        <i class="fab fa-patreon"></i> Support me on Patreon
                    </div>				
                </div>
                <div id="sponsored-content" class="animate__animated animate__fadeInUp">		 
                </div>
            </div>
        </div>
    </div>
     
    <!-- ::Upload Box:: -->
    <div id="upload-pop-box" class="popup-wrap">
        <div class="popup-box">
            <p class="popup-title"><i class="fas fa-file-upload"></i> Upload project.ok</p>
            <div class="popup-content animate__animated animate__slideInUp animate__faster">
                <h3 class="download-message">Select and Upload your Project File</h3>
                <p class="upload-inst"><i class="fas fa-exclamation-triangle red"></i> Please go to the download option and download your current project file before uploading the file from your hard drive.</p>
                <div class="popup-inner-conten animate__animated animate__slideInUp animate__fast">		
                    <button class="upload-file-btn app-btn-blue">
                        <label for="project-file" class="upload-label">	
                            <span class="app-btn-icon"><i class="fas fa-upload"></i></span> <span id="uploaded-file-name">Upload File</span>
                        </label>
                        <input id="project-file" type="file" name="file" accept=".ok">
                    </button>			
                    <button id="close-upload-box" class="app-btn-pink"><span class="app-btn-icon"><i class="fas fa-times"></i></span> CLOSE</button>
                    <div id="upload-status"></div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- ::Add/Switch Pages:: -->
    <div id="page-pop-box" class="popup-wrap">
        <div class="popup-box">
            <p class="popup-title"><i class="far fa-file-alt"></i> <span id="add-remove-title">Add/Remove Header/Footer</span></p>
            <div class="popup-content animate__animated animate__slideInUp animate__faster">
                <div class="popup-inner-conten animate__animated animate__fadeInUp animate__fast">
                <p id="select-page" class="page-sub-title">Go to</p>
                    <button class="app-btn-pink btn-page-one">1: <span id="index-page">index</span></button>
                    <button class="app-btn-blue btn-page-two">2: <span id="page-2"></span></button>
                    <button class="app-btn-blue btn-page-three">3: <span id="page-3"></span></button>
                    <button class="app-btn-blue btn-page-four">4: <span id="page-4"></span></button>
                    <button class="app-btn-blue btn-page-five">5: <span id="page-5"></span></button>
                </div>
                <div class="popup-inner-conten animate__animated animate__fadeInUp animate__fast">
                <p id="add-remove-page" class="page-sub-title">Select check box to remove Header/Footer</p>
                <ul class="add-page-ul">				
                    <li id="page-index-li">
                        1: index
                        <div class="ar-index-hfooter">
                            Remove: 
                                <input type="checkbox" id="remove-index-header"> <label for="remove-index-header">Header</label>
                                <input type="checkbox" id="remove-index-footer"> <label for="remove-index-footer">Footer</label>
                        </div>
                    </li>
                    <li id="page-2-li" class="page-list">
                        2: <input id="input-page-2" placeholder="Add Page 2">
                        <button id="add-page-2" class="add-page-btn" disabled><i class="fas fa-plus"></i></button>
                        <button id="remove-page-2" class="remove-page-btn" disabled><i class="fas fa-trash-alt"></i></button>
                        <div class="ar-hfooter">
                            Remove: 
                                <input type="checkbox" id="remove-header-2"> <label for="remove-header-2">Header</label>
                                <input type="checkbox" id="remove-footer-2"> <label for="remove-footer-2">Footer</label>
                        </div>
                    </li>
                    <li id="page-3-li" class="page-list">
                        3: <input id="input-page-3" placeholder="Add Page 3">
                        <button id="add-page-3" class="add-page-btn" disabled><i class="fas fa-plus"></i></button>
                        <button id="remove-page-3" class="remove-page-btn" disabled><i class="fas fa-trash-alt"></i></button>
                        <div class="ar-hfooter">
                            Remove: 
                                <input type="checkbox" id="remove-header-3"> <label for="remove-header-3">Header</label>
                                <input type="checkbox" id="remove-footer-3"> <label for="remove-footer-3">Footer</label>
                        </div>
                    </li>
                    <li id="page-4-li" class="page-list">
                        4: <input id="input-page-4" placeholder="Add Page 4">
                        <button id="add-page-4" class="add-page-btn" disabled><i class="fas fa-plus"></i></button>
                        <button id="remove-page-4" class="remove-page-btn" disabled><i class="fas fa-trash-alt"></i></button>
                        <div class="ar-hfooter">
                            Remove: 
                                <input type="checkbox" id="remove-header-4"> <label for="remove-header-4">Header</label>
                                <input type="checkbox" id="remove-footer-4"> <label for="remove-footer-4">Footer</label>
                        </div>
                    </li>
                    <li id="page-5-li" class="page-list">
                        5: <input id="input-page-5" placeholder="Add Page 5">
                        <button id="add-page-5" class="add-page-btn" disabled><i class="fas fa-plus"></i></button>
                        <button id="remove-page-5" class="remove-page-btn" disabled><i class="fas fa-trash-alt"></i></button>
                        <div class="ar-hfooter">
                            Remove: 
                                <input type="checkbox" id="remove-header-5"> <label for="remove-header-5">Header</label>
                                <input type="checkbox" id="remove-footer-5"> <label for="remove-footer-5">Footer</label>
                        </div>
                    </li>
                </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- ::Site Meta Tags index.html:: -->
    <div class="seo-box-wrapper animate__animated animate__zoomIn animate__faster">
        <div id="index-seo">
            <div class="seo-box animate__animated animate__zoomIn animate__fast">
                <button class="seo-close-btn"><i class="fas fa-check"></i></button>
                <h3 class="seo-title">Site Meta Tags ( <span class="index-meta">index</span>.html )</h3>
                <p class="seo-left-tag">Site Title <span class="char-left">(Characters left: <span class="title-characters">70</span>)</span></p>
                <textarea class="page-title page-title-input" type="text" placeholder="Enter Page Title" maxlength="70"></textarea>
                <p class="seo-left-tag mt-15">Site Description <span class="char-left">(Characters left: <span class="meta-characters">160</span>)</span></p>
                <textarea class="meta-desc meta-desc-input" type="text" placeholder="Enter Meta Description" maxlength="160"></textarea>
                <p class="seo-left-tag mt-15">Site URL <span class="char-left">(For Social Media sharing)</span></p>
                <input type="text" id="web-url" class="meta-alt-input" placeholder="https://domain.com">
                <p class="seo-left-tag mt-15">Site Image <span class="char-left">(For Social Media sharing)</span></p>
                <input type="text" id="web-img" class="meta-alt-input" placeholder="https://domain.com/img.jpg">
                <p class="seo-left-tag mt-15">Site Favicon</p>
                <input type="text" id="web-fav" class="meta-alt-input" placeholder="https://domain.com/img.png">
                <p class="char-left mt-15"><i class="fas fa-exclamation-triangle"></i> Be sure to upload your image to your CMS or host.</p>
            </div>
        </div>
        <div id="page-2-seo">
            <div class="seo-box animate__animated animate__zoomIn animate__fast">
                <button class="seo-close-btn"><i class="fas fa-check"></i></button>
                <h3 class="seo-title">Site Meta Tags ( <span class="page-2-meta"></span>.html )</h3>
                <p class="seo-left-tag">Site Title <span class="char-left">(Characters left: <span class="page-2-title-characters">70</span>)</span></p>
                <textarea class="page-2-title page-title-input" type="text" placeholder="Enter Page Title" maxlength="70"></textarea>
                <p class="seo-left-tag mt-15">Site Description <span class="char-left">(Characters left: <span class="page-2-meta-characters">160</span>)</span></p>
                <textarea class="page-2-meta-desc meta-desc-input" type="text" placeholder="Enter Meta Description" maxlength="160"></textarea>
                <p class="seo-left-tag mt-15">Site URL <span class="char-left">(For Social Media sharing)</span></p>
                <input type="text" id="page-2-web-url" class="meta-alt-input" placeholder="https://domain.com">
                <p class="seo-left-tag mt-15">Site Image <span class="char-left">(For Social Media sharing)</span></p>
                <input type="text" id="page-2-web-img" class="meta-alt-input" placeholder="https://domain.com/img.jpg">
                <p class="seo-left-tag mt-15">Site Favicon</p>
                <input type="text" id="page-2-web-fav" class="meta-alt-input" placeholder="https://domain.com/img.png">
                <p class="char-left mt-15"><i class="fas fa-exclamation-triangle"></i> Be sure to upload your image to your CMS or host.</p>
            </div>
        </div>
        <div id="page-3-seo">
            <div class="seo-box animate__animated animate__zoomIn animate__fast">
                <button class="seo-close-btn"><i class="fas fa-check"></i></button>
                <h3 class="seo-title">Site Meta Tags ( <span class="page-3-meta"></span>.html )</h3>
                <p class="seo-left-tag">Site Title <span class="char-left">(Characters left: <span class="page-3-title-characters">70</span>)</span></p>
                <textarea class="page-3-title page-title-input" type="text" placeholder="Enter Page Title" maxlength="70"></textarea>
                <p class="seo-left-tag mt-15">Site Description <span class="char-left">(Characters left: <span class="page-3-meta-characters">160</span>)</span></p>
                <textarea class="page-3-meta-desc meta-desc-input" type="text" placeholder="Enter Meta Description" maxlength="160"></textarea>
                <p class="seo-left-tag mt-15">Site URL <span class="char-left">(For Social Media sharing)</span></p>
                <input type="text" id="page-3-web-url" class="meta-alt-input" placeholder="https://domain.com">
                <p class="seo-left-tag mt-15">Site Image <span class="char-left">(For Social Media sharing)</span></p>
                <input type="text" id="page-3-web-img" class="meta-alt-input" placeholder="https://domain.com/img.jpg">
                <p class="seo-left-tag mt-15">Site Favicon</p>
                <input type="text" id="page-3-web-fav" class="meta-alt-input" placeholder="https://domain.com/img.png">
                <p class="char-left mt-15"><i class="fas fa-exclamation-triangle"></i> Be sure to upload your image to your CMS or host.</p>
            </div>
        </div>
        <div id="page-4-seo">
            <div class="seo-box animate__animated animate__zoomIn animate__fast">
                <button class="seo-close-btn"><i class="fas fa-check"></i></button>
                <h3 class="seo-title">Site Meta Tags ( <span class="page-4-meta"></span>.html )</h3>
                <p class="seo-left-tag">Site Title <span class="char-left">(Characters left: <span class="page-4-title-characters">70</span>)</span></p>
                <textarea class="page-4-title page-title-input" type="text" placeholder="Enter Page Title" maxlength="70"></textarea>
                <p class="seo-left-tag mt-15">Site Description <span class="char-left">(Characters left: <span class="page-4-meta-characters">160</span>)</span></p>
                <textarea class="page-4-meta-desc meta-desc-input" type="text" placeholder="Enter Meta Description" maxlength="160"></textarea>
                <p class="seo-left-tag mt-15">Site URL <span class="char-left">(For Social Media sharing)</span></p>
                <input type="text" id="page-4-web-url" class="meta-alt-input" placeholder="https://domain.com">
                <p class="seo-left-tag mt-15">Site Image <span class="char-left">(For Social Media sharing)</span></p>
                <input type="text" id="page-4-web-img" class="meta-alt-input" placeholder="https://domain.com/img.jpg">
                <p class="seo-left-tag mt-15">Site Favicon</p>
                <input type="text" id="page-4-web-fav" class="meta-alt-input" placeholder="https://domain.com/img.png">
                <p class="char-left mt-15"><i class="fas fa-exclamation-triangle"></i> Be sure to upload your image to your CMS or host.</p>
            </div>
        </div>
        <div id="page-5-seo">
            <div class="seo-box animate__animated animate__zoomIn animate__fast">
                <button class="seo-close-btn"><i class="fas fa-check"></i></button>
                <h3 class="seo-title">Site Meta Tags ( <span class="page-5-meta"></span>.html )</h3>
                <p class="seo-left-tag">Site Title <span class="char-left">(Characters left: <span class="page-5-title-characters">70</span>)</span></p>
                <textarea class="page-5-title page-title-input" type="text" placeholder="Enter Page Title" maxlength="70"></textarea>
                <p class="seo-left-tag mt-15">Site Description <span class="char-left">(Characters left: <span class="page-5-meta-characters">160</span>)</span></p>
                <textarea class="page-5-meta-desc meta-desc-input" type="text" placeholder="Enter Meta Description" maxlength="160"></textarea>
                <p class="seo-left-tag mt-15">Site URL <span class="char-left">(For Social Media sharing)</span></p>
                <input type="text" id="page-5-web-url" class="meta-alt-input" placeholder="https://domain.com">
                <p class="seo-left-tag mt-15">Site Image <span class="char-left">(For Social Media sharing)</span></p>
                <input type="text" id="page-5-web-img" class="meta-alt-input" placeholder="https://domain.com/img.jpg">
                <p class="seo-left-tag mt-15">Site Favicon</p>
                <input type="text" id="page-5-web-fav" class="meta-alt-input" placeholder="https://domain.com/img.png">
                <p class="char-left mt-15"><i class="fas fa-exclamation-triangle"></i> Be sure to upload your image to your CMS or host.</p>
            </div>
        </div>
    </div>
    <!-- ::Code Editor:: -->
    <div class="editor-wrap animate__animated animate__slideInUp animate__faster">
        <div id="sec-editor-title-wrap">
            <span class="editor-name"><span class="editor-icon"><i class="fab fa-html5"></i></span> | <span class="editor-sample">HTML</span></span>
            <button class="smallify-font">A-</button>
            <button class="default-font">A</button>
            <button class="biggify-font">A+</button> 
            <div class="cm-theme-wrap">
                <button class="cm-theme-btn"><i class="fas fa-fill-drip"></i></button>
                <ul class="cm-theme-list">
                    <li class="default">Default</li>
                    <li class="dracula active-cmtheme">Dracula</li>
                    <li class="eclipse">Eclipse</li>
                    <li class="yonce">Yonce</li>
                </ul>
            </div>
            <span class="close-editor">Close <i class="fas fa-times"></i></span>
        </div>	
        <div id="resize-editor">
            <div id="left-resizebar">
                <textarea id="code-editor" type="text" autocomplete="off" placeholder="Type your text here"></textarea>
            </div>
            <div id="right-resizebar">
                <div id="top-resizebar">
                    <div id="sec-frame-title">
                        <span class="editor-name"><span class="editor-icon"><i class="fas fa-eye"></i></span> | <span class="editor-sample">Preview</span></span>
                        <button id="run-btn">Reload Frame</button>
                    </div>
                    <div id="prev">
                        <iframe id="prev-content"></iframe>
                    </div>
                </div>
                <div id="bottom-resizebar">
                    <div id="inner-left-resizebar">	
                        <div id="sec-css-title">
                            <span class="editor-name"><span class="editor-icon"><i class="fab fa-css3-alt"></i></span> | <span class="editor-sample">CSS</span></span>
                        </div>
                        <div id="sec-custon-css-wrap">
                            <textarea id="sec-custon-css" type="text" autocomplete="off" placeholder="Type your text here"></textarea>
                        </div>
                    </div>
                    <div id="inner-right-resizebar">
                        <div id="sec-js-title">
                            <span class="editor-name"><span class="editor-icon"><i class="fab fa-js"></i></span> | <span class="editor-sample">JS</span></span>
                        </div>
                        <div id="sec-custon-js-wrap">
                            <textarea id="sec-custon-js" type="text" autocomplete="off" placeholder="Type your text here"></textarea>
                        </div>
                    </div>       
                </div>
            </div>
        </div>
    </div>
    
    <!-- ::JS files:: -->
    <div id="ok-scripts">
		<script type="text/javascript" src="{{Theme::asset()->get('theme/js/htmleditor/spectrum.js')}}"></script>
		<script type="text/javascript" src="{{Theme::asset()->get('theme/js/htmleditor/codemirror.js')}}"></script>
		<script type="text/javascript" src="{{Theme::asset()->get('theme/js/htmleditor/codemirror-javascript.js')}}"></script>
		<script type="text/javascript" src="{{Theme::asset()->get('theme/js/htmleditor/codemirror-css.js')}}"></script>
		<script type="text/javascript" src="{{Theme::asset()->get('theme/js/htmleditor/xml.js')}}"></script>
		<script type="text/javascript" src="{{Theme::asset()->get('theme/js/htmleditor/htmlmixed.js')}}"></script>
		<script type="text/javascript" src="{{Theme::asset()->get('theme/js/htmleditor/jquery.splitter.js')}}"></script>
		<script type="text/javascript" src="{{Theme::asset()->get('theme/js/htmleditor/aos.js')}}"></script>
		<script type="text/javascript" src="{{Theme::asset()->get('theme/js/htmleditor/sortable.min.js')}}"></script>
		<script type="text/javascript" src="{{Theme::asset()->get('theme/js/htmleditor/builder.js')}}"></script>
		<script type="text/javascript" src="{{Theme::asset()->get('theme/js/htmleditor/preloding-scripts.js')}}"></script>
		<script type="text/javascript" src="{{Theme::asset()->get('theme/js/htmleditor/file-generator.js')}}"></script>
		<script type="text/javascript" src="{{Theme::asset()->get('theme/js/htmleditor/global-setting.js')}}"></script>
		<script type="text/javascript" src="{{Theme::asset()->get('theme/js/htmleditor/jszip.min.js')}}"></script>
		<script type="text/javascript" src="{{Theme::asset()->get('theme/js/htmleditor/jszip-utils.js')}}"></script>
		<script type="text/javascript" src="{{Theme::asset()->get('theme/js/htmleditor/file-saver.js')}}"></script>
		<script type="text/javascript" src="{{Theme::asset()->get('theme/js/htmleditor/prettifier.js')}}"></script>
		<script type="text/javascript" src="{{Theme::asset()->get('theme/js/htmleditor/bootstrap.bundle.min.js')}}"></script>
		<script type="text/javascript" src="{{Theme::asset()->get('theme/js/htmleditor/bootstrap-iconpicker.bundle.min.js')}}"></script>
    </div>
    
    <!-- START::Dynamic Elements:: -->
    <div id="dynamic-elements">
    </div><!-- END::Dynamic Elements:: -->
</div>

@if(isset($blog_posts) and $blog_posts=="yes")
	<script type="text/javascript">
		$(window).on('load', function(){
			//alert("hello");		
			$('#premade-blocks').append(`{!!Theme::section('htmleditor.news-blogs',['community_id'=>$community_id])!!}`);
		});	
	</script>
@endif	
