document.addEventListener( "DOMContentLoaded", function( event ) {

    function _( str ) {
        return __( str, "pages.mod.php" );
    }

    // Полностью этот скрипт отключить нельзя если включены Инструменты,
    // поэтому нужна проверка
    if ( document.querySelector( "#pages" ) ) {
        api( { fn: "get_pages_list" }, set_pages_list );
    }

    function set_pages_list( r ) {

        if ( ! document.querySelector( "#pages" ) ) return;

        if ( r.no_database ) {
            document.querySelector( "#pages .pages-grid" ).innerHTML = r.no_database;
            return;
        }

        if ( r.overloaded ) {
            let m = _( "server_overloaded_xxx" );
            m = m.replace( "xxx", r.pages.length );
            notify( m, "info-error", 5000 );
        }

        // Запоминаем результаты какого поиска мы получили
        // Это нужно чтобы не загружать снова все страницы при создании новой
        // не производить сброс поиска.
        let pages_search = document.querySelector( "#pages .page-search" );
        pages_search.setAttribute( "data-result-of", r.search );

        let grid = document.querySelector( "#pages .pages-grid" );
        let count = document.querySelector( "#pages .main-footer .count" );
        let loaded = document.querySelector( "#pages .main-footer .loaded" );
        if ( cms.clear_pages_list ) {
            cms.clear_pages_list = false;
            grid.innerHTML = "";
            loaded.value = "0";
        }

        // Всего страниц в БД
        count.innerText = r.count;

        // При удалении страниц подгружаются последние и не нужно менять смещение у пейджера
        if ( cms.dont_change_offset ) {
            cms.dont_change_offset = false;
        } else {
            loaded.setAttribute( "data-offset", r.offset );
        }

        // insert pages
        let start = Date.now();
        for ( let i = 0; i < r.pages.length; i++ ) {
            grid.insertAdjacentHTML( "beforeend", r.pages[i].html );
            loaded.value = +loaded.value + 1;
            let page = grid.querySelector( `[data-id="${r.pages[i].id}"]` );
            set_controls( page );
            if ( Date.now() - start > 1000 ) {
                let m = _( "browser_overloaded_xxx" );
                m = m.replace( "xxx", i + 1 );
                m = m.replace( "nnn", r.pages.length );
                notify( m, "info-error", 5000 );
                break;
            }
        }

        create_pager();

        // При создании страницы было обнаружено что поиск не сброшен,
        // поэтому была вызвана функция загрузки страниц с пустым поиском
        // и пришло время создать новую страницу
        if ( cms.create_page_fn ) {
            cms.create_page_fn();
            cms.create_page_fn = null;
        }

    }

    function create_pager() {
        let loaded = document.querySelector( "#pages .main-footer .loaded" );
        let offset = parseInt( loaded.getAttribute( "data-offset" ) );
        let count  = parseInt( document.querySelector( "#pages .main-footer .count" ).innerText );
        if ( count === 0 ) { count++; }
        let cookie_pp = get_cookie( "pages_pager" );
        let pages  = Math.ceil( count / cookie_pp );
        let pager  = document.querySelector( "#pages .main-footer .pager" );
        pager.innerHTML = "";
        if ( pages > 1 ) {
            for ( let i = 1; i <= pages; i++ ) {
                let p = document.createElement( "div" );
                p.innerText = i;
                p.setAttribute( "data-offset", ( i - 1 ) * cookie_pp );
                pager.appendChild( p );
            }
            pager.querySelector( `[data-offset="${offset}"]` ).classList.add( "active" );
            pager.childNodes.forEach( function( el ) {
                el.addEventListener( "click", function( e ) {
                    let offset = this.getAttribute( "data-offset" );
                    let search = document.querySelector( "#pages .page-search" ).value;
                    let data = {
                        fn: "get_pages_list",
                        offset: offset,
                        search: search
                    }
                    document.querySelector( "#pages .main-main" ).scrollTop = 0;
                    cms.clear_pages_list = true;
                    api( data, set_pages_list );
                } );
            } );
            // scroll
            pager.onmousedown = function( e ) {
                let pageX = 0;
                let pageY0 = 0;
              
                document.onmousemove = function( e ) {
                    if ( pageX !== 0 ) {
                        pager.scrollLeft = pager.scrollLeft + ( pageX - e.pageX );
                    }
                    pageX = e.pageX;
                    // fix for google chrome
                    if ( pageY0 === 0 ) {
                        pageY0 = e.pageY;
                    }
                    if ( Math.abs( pageY0 - e.pageY ) > 64 ) {
                        const event = new Event( "mouseup" );
                        pager.dispatchEvent( event );
                    }
                }
              
                // end drag
                pager.onmouseup = function() {
                    document.onmousemove = null;
                    pager.onmouseup = null;
                }
              
                // disable browser drag
                pager.ondragstart = function() {
                    return false;
                }
            }
        }
    }

    function short_title( str ) {
        // чтобы работать с символами, а не с кодовыми точками
        let s = Array.from( str );
        if ( s.length <= 25 ) return str;
        return s.slice(0, 10).join("") + " ... " + s.slice(-10).join("");
    }

    // pager counter
    let pager_counter = document.querySelector( "#pages .main-footer input" );
    if ( pager_counter ) pager_counter.addEventListener( "keydown", function( e ) {
        if ( e.keyCode === 13 ) { // keyCode work on mobile
            let p = document.querySelector( "#pages .main-footer input" ).value;
            set_cookie_expires( "pages_pager", p );
            cms.clear_pages_list = true;
            api( { fn: "get_pages_list", search: document.querySelector( "#pages .page-search" ).value }, set_pages_list );
        }
    } );

    function set_controls( selector ) {

        // Open properties
        selector.querySelectorAll( ".page-prop-btn" ).forEach( function( button ) {
            button.addEventListener( "click", function( e ) {
                let id = this.closest( "[data-id]" ).getAttribute( "data-id" );
                document.querySelector( `#pages .pages-grid [data-id="${id}"]` ).classList.toggle( "open" );
            } );
        } );

        // Save properties
        selector.querySelectorAll( ".page-prop-save-btn" ).forEach( function( button ) {
            button.addEventListener( "click", function( e ) {
                let id       = this.closest( "[data-id]" ).getAttribute( "data-id" );
                let item = document.querySelector( `#pages .pages-grid [data-id="${id}"] ` );
                let data = {
                    fn:           "save_prop",
                    id:           id,
                    title:        item.querySelector( '[name="title"]' ).value,
                    seo_title:    item.querySelector( '[name="seo_title"]' ).value,
                    url:          item.querySelector( '[name="url"]' ).value,
                    date:         item.querySelector( '[name="date"]' ).value,
                    time:         item.querySelector( '[name="time"]' ).value,
                    template:     item.querySelector( '.template-select-grid .field-select' ).getAttribute( "data-template" ),
                    old_template: item.querySelector( '.template-select-grid .field-select' ).getAttribute( "data-old-template" ),
                    description:  item.querySelector( '[name="description"]' ).value,
                    tags:         item.querySelector( '[name="tags"]' ).value,
                }
                api( data, function( r ) {
                    if ( r.ok == "false" ) { // FIXME: never fire
                        notify( r.info_text, r.info_class, 5000 );
                    }
                    if ( r.ok == "true" ) {

                        // Update Title, URL and Date
                        item.querySelector( ".page-name" ).innerHTML = r.title;
                        item.querySelector( ".page-name" ).setAttribute( "href", r.base_path + r.url );
                        update_home();
                        let url_el = item.querySelector( "[name=url]" );
                        if ( url_el.value != r.url ) {
                            notify( _( "url_changed" ), "info-error", 5000 );
                        }
                        url_el.value = r.url;
                        let date = item.querySelector( ".page-date" );
                        date.innerHTML = r.created;
                        if ( r.planned ) {
                            date.classList.add( "future" );
                        } else {
                            date.classList.remove( "future" );
                        }

                        // update old template
                        item.querySelector( '.template-select-grid .field-select' ).setAttribute( "data-old-template", data.template );

                        // edit marker
                        document.querySelectorAll( "#pages .pages-grid > div" ).forEach( function( el ) {
                            el.classList.remove( "last-edited" );
                        } );
                        setTimeout( function() {
                            item.classList.add( "last-edited" );
                        }, 200 );

                        // highlight save button
                        button.classList.add( "saved" );
                        setTimeout( function() {
                            button.classList.remove( "saved" );
                        }, 200 );

                        notify( r.info_text, r.info_class, 5000 );

                        // update event for menu
                        if ( r.update_menu == "true" ) {
                            let event = new Event( "update_menu" );
                            document.body.dispatchEvent( event );
                        }
                    }
                    
                } );
            } );
        } );

        // Pin Page
        selector.querySelectorAll( ".pin" ).forEach( function( pin ) {
            pin.addEventListener( "click", function( e ) {
                let box  = this.closest( "[data-id]" );
                let id   = box.getAttribute( "data-id" );
                let pin  = box.getAttribute( "data-pin" );
                if ( pin === "1" ) {
                    pin = "0";
                } else {
                    pin = "1";
                }
                let data = {
                    fn:  "page_pin",
                    id:  id,
                    pin: pin
                }
                api( data, function( r ) {
                    if ( r.ok == "true" ) {
                        box.setAttribute( "data-pin", pin );
                    }
                } );
            } );
        } );
        
        // Publish Page
        selector.querySelectorAll( ".published" ).forEach( function( pub ) {
            pub.addEventListener( "click", function( e ) {
                let box  = this.closest( "[data-id]" );
                let id   = box.getAttribute( "data-id" );
                let published  = box.getAttribute( "data-published" );
                if ( published === "1" ) {
                    published = "0";
                } else {
                    published = "1";
                }
                let data = {
                    fn:  "page_publish",
                    id:  id,
                    published: published
                }
                api( data, function( r ) {
                    if ( r.ok == "true" ) {
                        box.setAttribute( "data-published", published );
                        if ( published == "1" ) {
                            pub.setAttribute( "title", _( "published" ) );
                        } else {
                            pub.setAttribute( "title", _( "unpublished" ) );
                        }
                    }
                } );
            } );
        } );

        // Редактировать страницу
        selector.querySelectorAll( ".page-edit-btn" ).forEach( function( button ) {
            button.addEventListener( "click", function( e ) {
                button.classList.add( "loading" );
                let id = this.closest( "[data-id]" ).getAttribute( "data-id" );

                let pages = document.querySelector( `#pages` );
                let ed_tpl = pages.querySelector( ".page-editor-bg" );
                
                // Может быть нужный div уже создан
                let ed = pages.querySelector( `.page-ed-bg[data-id="${id}"]` );
                if ( ed ) {
                    // Если он уже есть, значит просто отобразить его
                    ed.classList.remove( `hidden` );
                    document.querySelector( `.page-tabs .page[data-id="${id}"]` ).classList.add( "active" );
                    button.classList.remove( "loading" );
                } else {
                    // Если его еще нет, то склонировать из существующего шаблона
                    
                    // Получить страницу с сервера
                    api( { fn: "get_page", id: id }, function( r ) {
                        button.classList.remove( "loading" );
                        if ( r.result == "ok" ) {
                        
                            // Добавить кнопку на панель
                            let button = document.createElement( "div" );
                            button.innerText = short_title( r.page.title );
                            button.classList.add( "page" );
                            button.classList.add( "active" );
                            button.setAttribute( "data-id", id );
                            let tabs = document.querySelector( ".page-tabs" );
                            tabs.querySelectorAll( ".page.active" ).forEach( function( btn ) {
                                btn.classList.remove( "active" );
                            } );
                            tabs.appendChild( button );
                            

                            // Щелчок по кнопке скрывает/показывает редактор
                            button.addEventListener( "click", function( e ) {
                                let old_hash = window.location.hash;
                                window.location.hash = "#pages";
                                // Отжать все нажатые
                                // Можно проверять количество и прекратить отжимать
                                let actives = this.parentElement.querySelectorAll( ".page.active" );
                                actives.forEach( function( btn ) {
                                    let edid = btn.getAttribute( "data-id" );
                                    if ( edid !== id ) {
                                        pages.querySelector( `.page-ed-bg[data-id="${edid}"]` ).classList.add( "hidden" );
                                        btn.classList.remove( "active" );
                                    }
                                } );
                                if ( old_hash !== "#pages" && this.classList.contains( "active" ) ) {
                                    cm.focus();
                                } else {
                                    pages.querySelector( `.page-ed-bg[data-id="${id}"]` ).classList.toggle( "hidden" );
                                    this.classList.toggle( "active" );
                                    cm.focus();
                                }
                            } );
                            

                            // Добавить div редактора
                            let ed = ed_tpl.cloneNode( true );
                            ed.classList.remove( "page-editor-bg" );
                            ed.classList.add( "page-ed-bg" );
                            ed.setAttribute( "data-id", id );
                            pages.appendChild( ed );
                            
                            // Заполнение полей редактора
                            let title = ed.querySelector( ".page-editor-title" );
                            title.innerHTML = r.page.title;
                            title.setAttribute( "href", r.base_path + r.page.url );
                            let props = ed.querySelector( ".page-properties" );
                            props.querySelector( "input[name='title']" ).value = r.page.title;
                            props.querySelector( "input[name='url']" ).value = r.page.url;
                            props.querySelector( "input[name='seo_title']" ).value = r.page.seo_title;
                            props.querySelector( "textarea[name='description']" ).value = r.page.description;
                            props.querySelector( "textarea[name='tags']" ).value = r.page.tags;
                            props.querySelector( "input[name='date']" ).value = r.date;
                            props.querySelector( "input[name='time']" ).value = r.time;
                            let select = props.querySelector( ".template-select-grid" );
                            let options = select.querySelector( ".field-options" );
                            options.innerHTML = r.options;
                            let tpl = select.querySelector( ".field-select" );
                            tpl.setAttribute( "data-template", r.option );
                            tpl.setAttribute( "data-old-template", r.option );
                            tpl.querySelector( ".value" ).innerText = r.option_tr;
                            ed.querySelector( ".page-editor > textarea" ).value = r.page.text;
                            if ( r.page.modified != null ) { // prevent delete attribute
                                ed.querySelector( ".page-editor > textarea" ).setAttribute( "data-modified", r.page.modified );
                            }
                            ed.querySelector( ".save-page-button" ).setAttribute( "data-id", r.page.id );

                            options.querySelectorAll( ".option" ).forEach( function( option ) {
                                option.addEventListener( "click", click_select_option );
                            } );


                            // Отобразить до присоединения редактора чтобы корректно отрисовалось
                            ed.classList.remove( "hidden" );

                            // Connect Editor
                            let cm = codemirror_connect( ed.querySelector( ".page-editor > textarea" ) );
                            
                            
                            // Images
                            ed.querySelector( ".link-file-tag" ).innerHTML = "";
                            ed.querySelector( ".del-uploaded-files" ).classList.add( "disabled" );
                            ed.querySelector( ".mediateka-files-grid" ).innerHTML = r.flist;
                            ed.querySelectorAll( ".mediateka-files-grid input[type=checkbox]" ).forEach( function( checkbox ) {
                                checkbox.addEventListener( "dblclick", img_check_dblclick );
                                checkbox.addEventListener( "change", img_rechecked );
                            } );
                            ed.querySelectorAll( ".file-block" ).forEach( function( block ) {
                                block.addEventListener( "click", img_click );
                            } );
                            ed.querySelectorAll( ".mediateka-files-grid img" ).forEach( function( img ) {
                                img.addEventListener( "dblclick", img_lbox );
                            } );

                            // generate link to clicked file
                            function img_click() {
                                this.parentElement.querySelectorAll( ".file-block" ).forEach( function( block ) {
                                    block.classList.remove( "active-file" );
                                } );
                                this.classList.add( "active-file" );
                                let i = this.querySelector( "img" );
                                let t = i.getAttribute( "data-type" );
                                let link = i.getAttribute( "data-src" );
                                let w = i.getAttribute( "width" );
                                let h = i.getAttribute( "height" );
                                let e = link.replace( /.*\./, "" );
                                let img = [ "webp", "tiff", "jpeg", "jpg", "png", "svg", "gif", "bmp", "ico" ];
                                let mus = [ "mp3", "ogg", "m4a", "flac" ];
                                let vid = [ "mp4", "mkv", "webm" ];
                                let a = `<a href="${link}" target=_blank>${link}</a>`;
                                let tag = this.closest( ".mediateka-grid" ).querySelector( ".link-file-tag" );
                                if ( img.indexOf( e ) >= 0 ) {
                                    link = `&lt;img alt="" src="${a}"`;
                                    if ( w ) {
                                        link += ` width="${w}"`;
                                    }
                                    if ( h ) {
                                        link += ` height="${h}"`;
                                    }
                                    link += ` loading="lazy"`;
                                    link += "&gt;";
                                    tag.innerHTML = link;
                                } else if ( mus.indexOf( e ) >= 0 ) {
                                    link = `&lt;audio src="${a}" controls>&lt;/audio>`;
                                    tag.innerHTML = link;
                                } else if ( vid.indexOf( e ) >= 0 ) {
                                    link = `&lt;video src="${a}" poster="" controls preload="none">&lt;/video>`;
                                    tag.innerHTML = link;
                                } else {
                                    let f = link.replace( /.*\//, "" );
                                    link = `&lt;a href="${a}"&gt;${f}&lt;/a&gt;`;
                                    tag.innerHTML = link;
                                }
                                let inner_link = tag.querySelector( "a" );
                                inner_link.addEventListener( "click", file_link_click );
                                cm.focus();
                            }

                            function file_link_click( e ) {
                                e.preventDefault();
                                let tmp = document.createElement( "textarea" );
                                document.body.appendChild( tmp );
                                tmp.value = e.target.getAttribute( "href" );
                                tmp.select();
                                let r = document.execCommand( "copy" );
                                tmp.remove();
                                if ( r ) {
                                    notify( _( "copyed" ), "info-success", 5000 );
                                } else {
                                    notify( _( "copy_error" ), "info-error", 5000 );
                                }
                                cm.focus();
                            }

                            // enable or disable delete files button
                            function img_rechecked() {
                                let checked = ed.querySelectorAll( ".mediateka-files-grid input[type=checkbox]:checked" );
                                if ( checked.length ) {
                                    ed.querySelector( ".del-uploaded-files" ).classList.remove( "disabled" );
                                } else {
                                    ed.querySelector( ".del-uploaded-files" ).classList.add( "disabled" );
                                }
                            }

                            // Выбор всех картинок двойным кликом
                            function img_check_dblclick( e ) {
                                let stat = ! this.checked;
                                ed.querySelectorAll( ".mediateka-files-grid input[type=checkbox]" ).forEach( function( chbox ) {
                                    chbox.checked = stat;
                                } );
                                img_rechecked();
                            }
                            

                            // open tags panel
                            if ( document.documentElement.offsetWidth >= 1024 ) {
                                ed.querySelector( ".page-editor-grid" ).classList.add( "tags-opened" );
                            }

                            // restore scroll and cursor position
                            let cursor = localStorage.getItem( "cursor_page_" + id );
                            if ( cursor ) {
                                cursor = JSON.parse( cursor );
                                cm.scrollTo( cursor.left, cursor.top );
                                cm.setCursor( { line:cursor.line, ch:cursor.ch } );
                                cm.scrollIntoView( { line:cursor.line, ch:cursor.ch } );
                            }

                            // set focus to editor
                            cm.focus();
                            
                            // track changes
                            ed.querySelector( ".close-page-button" ).setAttribute( "data-changed", "false" );
                            ed.querySelector( ".page-editor-grid" ).setAttribute( "data-changed", "false" );
                            cm.on( "change", function( cm, change ) {
                                ed.querySelector( ".close-page-button" ).setAttribute( "data-changed", "true" );
                                ed.querySelector( ".page-editor-grid" ).setAttribute( "data-changed", "true" );
                                button.setAttribute( "data-changed", "true" );
                            } );
                            // save scroll and cursor position
                            [ "cursorActivity", "scroll" ].forEach( function( event ) {
                                cm.on( event, function() {
                                    let cursor = cm.getCursor();
                                    let scroll = cm.getScrollInfo();
                                    localStorage.setItem( "cursor_page_" + id, JSON.stringify( { line:cursor.line, ch:cursor.ch, left: scroll.left, top: scroll.top } ) );
                                } );
                            } );

                            bind_key( ed, "CtrlKeyS", ed.querySelector( ".save-page-button" ), "click" );
                            bind_key( ed, "CtrlKeyH", ed.querySelector( ".tags-grid [data-otag='<h2>']" ), "click" );
                            bind_key( ed, "CtrlKeyP", ed.querySelector( ".tags-grid [data-otag='<p>']" ), "click" );
                            bind_key( ed, "CtrlKeyB", ed.querySelector( ".tags-grid [data-otag='<b>']" ), "click" );
                            bind_key( ed, "CtrlKeyD", ed.querySelector( ".tags-grid [data-otag='<div>']" ), "click" );
                            bind_key( ed, "CtrlKeyL", ed.querySelector( ".tags-grid [data-otag='<li>']" ), "click" );
                            bind_key( ed, "CtrlKeyI", ed.querySelector( ".tags-grid [data-otag='<span>']" ), "click" );
                            bind_key( ed, "CtrlKeyK", ed.querySelector( ".tags-grid [data-otag='<kbd>']" ), "click" );
                            bind_key( ed, "CtrlKeyM", ed.querySelector( ".tags-grid [data-otag^='<figure>']" ), "click" );
                            bind_key( ed, "CtrlComma", ed.querySelector( ".tags-grid [data-otag='<code>']" ), "click" );
                            bind_key( ed, "CtrlShiftComma", ed.querySelector( ".tags-grid [data-otag='<pre><code>']" ), "click" );
                            bind_key( ed, "CtrlPeriod", ed.querySelector( ".tags-grid [data-otag='<blockquote>']" ), "click" );
                            bind_key( ed, "CtrlKeyU", ed.querySelector( ".tags-grid [data-tag='ul']" ), "click" );
                            bind_key( ed, "CtrlKeyO", ed.querySelector( ".tags-grid [data-tag='ol']" ), "click" );
                            bind_key( ed, "CtrlShiftKeyA", ed.querySelector( ".tags-grid [data-type='wrap-a']" ), "click" );
                            bind_key( ed, "CtrlShiftKeyC", ed.querySelector( ".tags-grid [data-otag='<!-- ']" ), "click" );

                            ed.classList.remove( `hidden` );

                            // Закрытие редактора
                            ed.querySelector( ".close-page-button" ).addEventListener( "click", function( e ) {
                                if ( this.getAttribute( "data-changed" ) === "true" ) {
                                    if ( confirm( _( "confirm_save" ) ) ) {
                                        ed.querySelector( ".save-page-button" ).setAttribute( "data-close", "true" );
                                        ed.querySelector( ".save-page-button" ).click();
                                        return;
                                    }
                                }
                                ed.remove();
                                // Удалить вкладку-кнопку
                                let btn = document.querySelector( `.page-tabs .page[data-id="${id}"]` )
                                if ( btn ) btn.remove();
                                // Удалить событие
                                document.querySelector( "aside a[href='#pages']" ).removeEventListener( "click", cm_focus );
                            } );

                            // Сохранение страницы
                            ed.querySelector( ".save-page-button" ).addEventListener( "click", function( e ) {
                                cm.save(); // drop changes to textarea
                                let prop_div = ed.querySelector( ".page-properties" );
                                let data = {
                                    fn: "save_page",
                                    id: ed.querySelector( ".save-page-button" ).getAttribute( "data-id" ),
                                    modified: ed.querySelector( ".page-editor > textarea" ).getAttribute( "data-modified" ),
                                    text: ed.querySelector( ".page-editor > textarea" ).value,
                                    title: prop_div.querySelector( "input[name='title']" ).value,
                                    url: prop_div.querySelector( "input[name='url']" ).value,
                                    seo_title: prop_div.querySelector( "input[name='seo_title']" ).value,
                                    description: prop_div.querySelector( "textarea[name='description']" ).value,
                                    tags: prop_div.querySelector( "textarea[name='tags']" ).value,
                                    date: prop_div.querySelector( "input[name='date']" ).value,
                                    time: prop_div.querySelector( "input[name='time']" ).value,
                                    template: prop_div.querySelector( ".template-select-grid .field-select" ).getAttribute( "data-template" ),
                                    old_template: prop_div.querySelector( ".template-select-grid .field-select" ).getAttribute( "data-old-template" ),
                                }
                                api( data, function( r ) {
                                    if ( r.ok == "true" ) {
                                        // Новый текст может прийти если изменен шаблон,
                                        // но предыдущая заготовка не изменена.
                                        // При создании страницы она заполняется из шаблона.
                                        if ( r.new_text ) {
                                            cm.setValue( r.new_text );
                                        }

                                        // Update Title and URL
                                        ed.querySelector( ".page-editor-title" ).innerHTML = r.title;
                                        ed.querySelector( ".page-editor-title" ).setAttribute( "href", r.base_path + r.url );
                                        prop_div.querySelector( "input[name='url']" ).value = r.url;

                                        // Обновить в кнопке
                                        let btn = document.querySelector( `.page-tabs [data-id="${id}"]` );
                                        if ( btn ) btn.innerText = short_title( r.title );

                                        // update old template
                                        prop_div.querySelector( ".template-select-grid .field-select" ).setAttribute( "data-old-template", data.template );

                                        // Update item in page list
                                        let item = pages.querySelector( `.pages-grid [data-id='${data.id}']` );
                                        item.querySelector( `.page-name` ).innerHTML = r.title;
                                        item.querySelector( `.page-name` ).setAttribute( "href", r.base_path + r.url );
                                        update_home(); // Подсветить главную страницу
                                        item.querySelector( `input[name='title']` ).value = r.title;
                                        item.querySelector( `input[name='url']` ).value = r.url;
                                        item.querySelector( `input[name='seo_title']` ).value = data.seo_title;
                                        item.querySelector( `textarea[name='description']` ).value = data.description;
                                        item.querySelector( `textarea[name='tags']` ).value = data.tags;

                                        // Выставить шаблон в плашке в списке страниц
                                        let select = item.querySelector( `.template-select-grid` );
                                        select_switch_to( select, data.template );
                                        item.querySelector( `.template-select-grid .field-select` ).setAttribute( "data-old-template", data.template );

                                        item.querySelector( `input[name='date']` ).value = data.date;
                                        item.querySelector( `input[name='time']` ).value = data.time;
                                        if ( r.planned ) {
                                            item.querySelector( `.page-date` ).classList.add( "future" );
                                        } else {
                                            item.querySelector( `.page-date` ).classList.remove( "future" );
                                        }

                                        ed.querySelector( ".page-editor > textarea" ).setAttribute( "data-modified", r.modified );
                                        ed.querySelector( ".close-page-button" ).setAttribute( "data-changed", "false" );
                                        ed.querySelector( ".page-editor-grid" ).setAttribute( "data-changed", "false" );
                                        button.setAttribute( "data-changed", "false" );
                                        
                                        // Маркер последнего изменения
                                        document.querySelectorAll( "#pages .pages-grid > div" ).forEach( function( item ) {
                                            item.classList.remove( "last-edited" );
                                        } );
                                        item.classList.add( "last-edited" );
                                        
                                        // Закрыть редактор после сохранения
                                        if ( ed.querySelector( ".save-page-button" ).getAttribute( "data-close" ) === "true" ) {
                                            ed.querySelector( ".save-page-button" ).setAttribute( "data-close", "false" );
                                            ed.querySelector( ".close-page-button" ).click();
                                        }
                                        
                                        // Подсветить кнопку сохранения
                                        ed.querySelector( ".save-page-button" ).classList.add( "saved" );
                                        setTimeout( function() {
                                            ed.querySelector( ".save-page-button" ).classList.remove( "saved" );
                                        }, 1000 );

                                        notify( r.info_text, r.info_class, r.info_time );

                                        // update event for menu
                                        if ( r.update_menu == "true" ) {
                                            let event = new Event( "update_menu" );
                                            document.body.dispatchEvent( event );
                                        }
                                    }
                                    if ( r.ok == "false" ) {
                                        // highlight save button
                                        ed.querySelector( ".save-page-button" ).classList.add( "error" );
                                        setTimeout( function() {
                                            ed.querySelector( ".save-page-button" ).classList.remove( "error" );
                                        }, 1000 );

                                        notify( r.info_text, r.info_class, r.info_time );
                                    }
                                } );
                            } );

                            // Кнопка "Свойства"
                            ed.querySelector( ".open-properties" ).addEventListener( "click", function( e ) {
                                ed.querySelector( ".page-editor-grid" ).classList.toggle( "properties" );
                                ed.querySelector( ".page-properties" ).classList.toggle( "hidden" );
                                // Чтобы место редактирования не уходило за экран
                                let cursor = cm.getCursor();
                                cm.scrollIntoView( { line:cursor.line, ch:cursor.ch } );
                                // Скрыть медиатеку
                                if ( ed.querySelector( ".page-editor-grid" ).classList.contains( "properties" ) ) {
                                    ed.querySelector( ".page-editor-grid" ).classList.remove( "mediateka" );
                                    ed.querySelector( ".page-editor-panel" ).classList.add( "hidden" );
                                }
                            } );

                            // Кнопка заполнения URL
                            ed.querySelector( ".page-editor-grid .url-translit" ).addEventListener( "click", function( e ) {
                                let url = ed.querySelector( ".page-editor-grid .page-properties input[name='title']" ).value;
                                let tr_url = url_translit( url );
                                this.previousElementSibling.value = tr_url;
                            } );

                            // Открытие селектора выбора шаблона страницы
                            ed.querySelector( ".template-select-grid" ).addEventListener( "click", function( e ) {
                                e.stopPropagation();
                                this.classList.toggle( "open" );
                            } );

                            // Закрытие выпадающего списка выбора шаблона страницы при кликах вне его, а так же по нему
                            // Привязываем событие к редактору чтобы удаление дива освобождало память.
                            // Иначе привязанное событие не даст удалить див несмотря на то что он удален из дерева.
                            ed.addEventListener( "click", function ( e ) {
                                ed.querySelector( ".template-select-grid" ).classList.remove( "open" );
                            } );

                            // Кнопка "Медиатека"
                            ed.querySelector( ".open-mediateka" ).addEventListener( "click", function( e ) {
                                ed.querySelector( ".page-editor-grid" ).classList.toggle( "mediateka" );
                                ed.querySelector( ".page-editor-panel" ).classList.toggle( "hidden" );
                                // Чтобы место редактирования не уходило за экран
                                let cursor = cm.getCursor();
                                cm.scrollIntoView( { line:cursor.line, ch:cursor.ch } );
                                // Скрыть свойства
                                if ( ed.querySelector( ".page-editor-grid" ).classList.contains( "mediateka" ) ) {
                                    ed.querySelector( ".page-editor-grid" ).classList.remove( "properties" );
                                    ed.querySelector( ".page-properties" ).classList.add( "hidden" );
                                }
                                cm.focus();
                            } );

                            // Кнопка копирования тега картинки
                            ed.querySelector( ".link-file-copy-btn" ).addEventListener( "click", function( e ) {
                                let img = this.previousElementSibling.innerText;
                                let tmp = document.createElement( "textarea" );
                                document.body.appendChild( tmp );
                                tmp.value = img;
                                tmp.select();
                                let r = document.execCommand( "copy" );
                                tmp.remove();
                                if ( r ) {
                                    if ( img ) {
                                        notify( _( "copyed" ), "info-success", 5000 );
                                    } else {
                                        notify( _( "select_file" ), "info-error", 5000 );
                                    }
                                } else {
                                    notify( _( "copy_error" ), "info-error", 5000 );
                                }
                                cm.focus();
                            } );

                            // Загрузка файлов страницы
                            let upload_btn = ed.querySelector( ".upload-files input[type=file]" );
                            if ( upload_btn ) upload_btn.addEventListener( "change", async function( event ) {
                                const formData = new FormData();
                                let id = ed.querySelector( ".save-page-button" ).getAttribute( "data-id" );
                                formData.append( "id", id );
                                formData.append( "fn", "upload_files" );
                                let n = 0;
                                for ( let i = 0; i < this.files.length; i++ ) {
                                    formData.append( "myfile[]", this.files[i] );
                                    let f = `${cms.base_path}uploads/${id}/` + __tr_file( this.files[i].name );
                                    let f_exists = ed.querySelector( `.file-block [data-src="${f}"]` );
                                    if ( f_exists ) { n++; }
                                }
                                let google_chrome_fix = this;
                                if ( n )  {
                                    let c = confirm( _( "same_files" ) + ` - ${n} ` + _( "pc" ) + "\n" + _( "confirm_replace" ) );
                                    if ( ! c ) {
                                        google_chrome_fix.value = "";
                                        return c;
                                    }
                                }
                                let bar = ed.querySelector( ".upload-progress" );

                                
                                let ajax = new XMLHttpRequest();
                                
                                ajax.upload.addEventListener( "progress", function( event ) {
                                    let percent = Math.round( (event.loaded / event.total) * 100 );
                                    bar.style.width = percent + "%";
                                }, false );

                                ajax.addEventListener( "error", function( event ) {
                                    notify( _( "error_upload_file" ), "info-error", 3600000 );
                                    bar.style = "";
                                }, false );
                                
                                ajax.addEventListener( "abort", function( event ) {
                                    notify( _( "error_upload_file" ), "info-error", 3600000 );
                                    bar.style = "";
                                }, false );

                                ajax.addEventListener( "load", function( event ) {
                                    bar.style = "";
                                    google_chrome_fix.value = "";
                                    if ( event.target.status == 413 ) {
                                        notify( _( "too_large" ), "info-error", 5000 );
                                    } else {
                                        let r = JSON.parse( event.target.responseText );
                                        if ( r.info_text ) {
                                            notify( r.info_text, r.info_class, r.info_time );
                                            if ( r.info_class == "info-success" ) {

                                                // удалить файлы которые были обновлены
                                                let tmp = document.createElement( "div" );
                                                tmp.innerHTML = r.flist;
                                                let imgs = tmp.querySelectorAll( "img" );
                                                imgs.forEach( function( img ) {
                                                    let file = img.getAttribute( "data-src" );
                                                    let exists_file = ed.querySelector( `.file-block [data-src="${file}"]` );
                                                    if ( exists_file ) {
                                                        exists_file.parentElement.remove();
                                                    }
                                                } );

                                                let container = ed.querySelector( ".mediateka-files-grid" );
                                                container.innerHTML = r.flist + container.innerHTML;
                                                
                                                // images checkboxes
                                                container.querySelectorAll( "input[type=checkbox]" ).forEach( function( checkbox ) {
                                                    checkbox.addEventListener( "dblclick", img_check_dblclick );
                                                    checkbox.addEventListener( "change", img_rechecked );
                                                } );
                                                
                                                // open lightbox
                                                container.querySelectorAll( "img" ).forEach( function( img ) {
                                                    img.addEventListener( "dblclick", img_lbox );
                                                } );
                                                
                                                // generate link
                                                container.querySelectorAll( ".file-block" ).forEach( function( file_block ) {
                                                    file_block.addEventListener( "click", img_click );
                                                } );
                                                
                                                // select last uploaded
                                                container.querySelector( ".file-block" ).click();
                                            }
                                        }
                                    }
                                }, false );

                                ajax.open( "POST", cms.api );
                                ajax.send( formData );
                                
                            } );

                            // Удаление файлов из медиатеки
                            ed.querySelector( ".del-uploaded-files" ).addEventListener( "click", function( e ) {
                                if ( ! this.classList.contains( "disabled" ) ) {
                                    let flist = [];
                                    ed.querySelectorAll( ".mediateka-files-grid input[type=checkbox]:checked" ).forEach( function( e ) {
                                        let f = e.closest( ".file-block" ).querySelector( "img" ).getAttribute( "data-src" );
                                        flist.push( f );
                                    } );
                                    let data = {
                                        fn: "del_files",
                                        flist: flist
                                    };
                                    api( data, function( r ) {
                                        if ( r.info_text ) {
                                            ed.querySelector( ".link-file-tag" ).innerHTML = "";
                                            notify( r.info_text, r.info_class, r.info_time );
                                            if ( r.info_class == "info-success" ) {
                                                for ( let f in flist ) {
                                                    ed.querySelector( `.mediateka-files-grid img[data-src="${flist[f]}"]` ).parentElement.remove();
                                                }
                                                ed.querySelector( ".del-uploaded-files" ).classList.add( "disabled" );
                                            }
                                        }
                                    } );
                                }
                            } );

                            // Кнопка "Заменить"
                            ed.querySelector( ".codemirror-replace" ).addEventListener( "click", function( e ) {
                                let dialog = ed.querySelector( ".CodeMirror-dialog" );
                                if ( dialog ) {
                                    dialog.remove();
                                } else {
                                    let mediateka = ! ed.querySelector( ".page-editor-panel" ).classList.contains( "hidden" );
                                    if ( mediateka && window.innerWidth < 1024 ) {
                                        ed.querySelector( ".open-mediateka" ).click();
                                    }
                                    cm.execCommand( "replace" );
                                }
                            } );

                            // show/hide tags
                            ed.querySelector( ".tags-helper" ).addEventListener( "click", function( e ) {
                                ed.querySelector( ".page-editor-grid" ).classList.toggle( "tags-opened" );
                                cm.focus();
                                cm.refresh(); // иначе курсор прыгает в строку ниже
                            } );

                            // for tags
                            ed.querySelectorAll( ".tags-grid [data-type='wrap']" ) .forEach( function( btn ) {
                                btn.addEventListener( "click", function( e ) {
                                    let otag = this.getAttribute( "data-otag" );
                                    let ctag = this.getAttribute( "data-ctag" );
                                    let len  = this.getAttribute( "data-len" );
                                    let ch   = this.getAttribute( "data-ch" );
                                    let line = this.getAttribute( "data-line" );
                                    
                                    //wrap_selections( otag, ctag, len, line, ch );
                                    let cursor = cm.getCursor();
                                    let selections = cm.getSelections();
                                    let replacements = [];
                                    for ( let i = 0; i < selections.length; i++ ) {
                                        replacements[i] = otag + selections[i] + ctag;
                                    }
                                    cm.replaceSelections( replacements );
                                    // Прятять панельку на мобильнике
                                    if ( window.innerWidth < 1024 ) {
                                        //ed.querySelector( ".tags-helper" ).click();
                                        let grid = this.closest( ".editor-grid" );
                                        grid.classList.remove( "tags-opened" );
                                    }
                                    if ( selections.length < 2 ) {
                                        if ( line ) {
                                            cursor.line += +line;
                                            cursor.ch = +ch;
                                        } else if ( len ) {
                                            cursor.ch += +len;
                                        }
                                        cm.setCursor( cursor );
                                    }
                                    cm.focus();
                                } );
                            } );
                            // for <a> tag
                            ed.querySelectorAll( ".tags-grid [data-type='wrap-a']" ) .forEach( function( btn ) {
                                btn.addEventListener( "click", function( e ) {
                                    let cursor = cm.getCursor();
                                    let selections = cm.getSelections();
                                    let replacements = [];
                                    
                                    for ( let i = 0; i < selections.length; i++ ) {
                                        if ( selections[i].match( /https?:\/\// ) ) {
                                            replacements[i] = `<a href="${selections[i]}" target=_blank>${selections[i]}</a>`;
                                        } else {
                                            replacements[i] = `<a href="" target=_blank>${selections[i]}</a>`;
                                        }
                                    }
                                    
                                    cm.replaceSelections( replacements );

                                    if ( selections.length == 1 && selections[0] === "" ) {
                                        cursor.ch += 9;
                                        cm.setCursor( cursor );
                                    }
                                    
                                    if ( window.innerWidth < 1024 ) {
                                        //ed.querySelector( ".tags-helper" ).click();
                                        let grid = this.closest( ".editor-grid" );
                                        grid.classList.remove( "tags-opened" );
                                    }

                                    cm.focus();
                                } );
                            } );
                            // for tags <ul> and <ol>
                            ed.querySelectorAll( ".tags-grid [data-type='wrap-list']" ) .forEach( function( btn ) {
                                btn.addEventListener( "click", function( e ) {
                                    let tag = this.getAttribute( "data-tag" );
                                    let selections = cm.getSelections();
                                    let replacements = [];

                                    if ( selections.length == 1 && selections[0] === "" ) {
                                        replacements[0] = `<${tag}>\n    <li></li>\n</${tag}>`;
                                    } else if ( selections.length == 1 ) {
                                        let lines = selections[0].split( "\n" );
                                        replacements[0] = `<${tag}>\n    <li>` + lines.join( "</li>\n    <li>" ) + `</li>\n</${tag}>`;
                                    } else {
                                        let n = selections.length - 1;
                                        for ( let i = 0; i <= n; i++ ) {
                                            replacements[i] = `    <li>${selections[i]}</li>`;
                                        }
                                        replacements[0] = `<${tag}>\n` + replacements[0];
                                        replacements[n] = replacements[n] + `\n</${tag}>`;
                                    }

                                    cm.replaceSelections( replacements );
                                    
                                    if ( window.innerWidth < 1024 ) {
                                        //ed.querySelector( ".tags-helper" ).click();
                                        let grid = this.closest( ".editor-grid" );
                                        grid.classList.remove( "tags-opened" );
                                    }

                                    cm.focus();
                                } );
                            } );

                            // prevent hide cursor when window resize
                            window.addEventListener( "resize", function() {
                                let cursor = cm.getCursor();
                                cm.scrollIntoView( { line:cursor.line, ch:cursor.ch } );
                            } );
                            

                            // Возврат фокуса редактору при кликах на "Страницы"
                            document.querySelector( "aside a[href='#pages']" ).addEventListener( "click", cm_focus );
                            // Функция описано отдельно чтобы отцеплять ее
                            // Тут возможно множество срабатываний если открыто много редакторов, но ничего страшного
                            function cm_focus( e ) {
                                setTimeout( function( e ) {
                                    cm.focus();
                                }, 50 );
                            }
                            
                        }
                    } );
                }
            } );
        } );

        // Клик по выпадающему списку выбора шаблона (в списке страниц)
        selector.querySelectorAll( ".template-select-grid" ).forEach( function( select ) {
            select.addEventListener( "click", function( e ) {
                e.stopPropagation();
                this.classList.toggle( "open" );
            } );
        } );
        // Клик по опции выбора шаблона
        selector.querySelectorAll( ".field-options .option" ).forEach( function( option ) {
            option.addEventListener( "click", click_select_option );
        } );

        // Транслитерация URL
        selector.querySelectorAll( ".url-translit" ).forEach( function( btn ) {
            btn.addEventListener( "click", function( e ) {
                let url = selector.querySelector( "input[name='title']" ).value;
                let tr_url = url_translit( url );
                this.previousElementSibling.value = tr_url;
            } );
        } );

        // Выбор всех страниц двойным кликом
        let check = selector.querySelector( `:scope > input[type=checkbox]` );
        if ( check ) check.addEventListener( "dblclick", function( e ) {
            let stat = ! this.checked;
            document.querySelectorAll( "#pages .pages-grid > div > input[type=checkbox]" ).forEach( function( chbox ) {
                chbox.checked = stat;
            } );
        } );

    }

    // Клик по опции выбора шаблона
    function click_select_option( e ) {
        let select = this.closest( ".template-select-grid" );
        let value  = this.getAttribute( "value" );
        select_switch_to( select, value );
    }

    // 
    function select_switch_to( select, value ) {
        let field_select = select.querySelector( ".field-select" );
        let old_value = field_select.getAttribute( "data-template" );
        if ( old_value != value ) {
            let old_name = field_select.innerText;
            let field_options = select.querySelector( ".field-options" );
            let option = field_options.querySelector( `[value="${value}"]` );
            field_select.querySelector( ".value" ).innerText = option.innerText;
            field_select.setAttribute( "data-template", value );
            option.remove();
            let option_html = `<div class=option value="${old_value}">${old_name}</div>`;
            field_options.insertAdjacentHTML( "afterbegin", option_html );
            field_options.firstChild.addEventListener( "click", click_select_option );
        }
    }


    // Search page
    let pages_search = document.querySelector( "#pages .page-search" );
    if ( pages_search ) pages_search.addEventListener( "keydown", function( e ) {
        if ( e.keyCode === 13 ) {
            // сохраняем событие целиком чтобы ниже считать Shift, Ctrl, Alt
            cms.search_event = e;
            search_pages();
        }
    } );

    let search_btn = document.querySelector( "#pages .page-search-button" );
    if ( search_btn ) search_btn.addEventListener( "click", function( e ) {
        // клик по кнопке не дает Ctrl, Shift, Alt, запишем это
        cms.search_event = { "ctrlKey": false, "shiftKey": false, "altKey": false };
        search_pages();
        document.querySelector( "#pages .page-search" ).focus();
    } );

    function search_pages() {
        let search_string = document.querySelector( "#pages .page-search" ).value;
        let data = {
            fn: "get_pages_list",
            search: search_string,
            Ctrl: cms.search_event.ctrlKey,
            Shift: cms.search_event.shiftKey,
            Alt: cms.search_event.altKey,
        };
        cms.clear_pages_list = true;
        api( data, set_pages_list );
    }

    // Reset Search
    let reset_btn = document.querySelector( "#pages .reset" );
    if ( reset_btn ) reset_btn.addEventListener( "click", function() {
        document.querySelector( "#pages .page-search" ).value = "";
        document.querySelector( "#pages .page-search-button" ).click();
    } );

    // Удаление страниц
    document.querySelectorAll( "#pages .del-pages-btn" ).forEach( function( button ) {
        button.addEventListener( "click", function( e ) {
            let ids = [];
            document.querySelectorAll( "#pages .pages-grid input[type=checkbox]:checked" ).forEach( function( ch ) {
                let id = ch.closest( "[data-id]" ).getAttribute( "data-id" );
                ids.push( id );
            } );
            if ( ids.length === 0 ) {
                notify( _( "no_selected_pages" ), "info-error", 5000 );
                return;
            }
            let data = {
                fn: "del_pages",
                ids: ids
            };
            api( data, function( r ) {
                if ( r.info_text ) {
                    notify( r.info_text, r.info_class, 15000 );
                    if ( r.info_class == "info-success" ) {
                        data.ids.forEach( function( id ) {
                            document.querySelector( `#pages .pages-grid [data-id="${id}"]` ).remove();
                            localStorage.removeItem( "cursor_page_" + id );
                        } );
                        let count = document.querySelector( "#pages .main-footer .count" );
                        let loaded = document.querySelector( "#pages .main-footer .loaded" );
                        loaded.value = parseInt( loaded.value ) - data.ids.length;
                        count.innerText = parseInt( count.innerText ) - data.ids.length;
                        // load pages
                        let offset = +loaded.getAttribute( "data-offset" ) + document.querySelectorAll( "#pages .pages-grid > *" ).length;
                        let search = document.querySelector( "#pages .page-search" ).value;
                        let data2 = {
                            fn: "get_pages_list",
                            count: data.ids.length,
                            offset: offset,
                            search: search
                        };
                        // Не менять атрибут смещения у пейджера
                        cms.dont_change_offset = true;
                        api( data2, set_pages_list );
                    }
                }
                // update event for menu
                if ( r.update_menu == "true" ) {
                    let event = new Event( "update_menu" );
                    document.body.dispatchEvent( event );
                }
            } );
        } );
    } );


    // transliterate file name
    function __tr_file( str ) {
        let ext = str.match( /\.[^\.]+$/, "" );
        str = str.replace( /\.[^\.]+$/, "" );
        let sp = cms.tr[" "];
        cms.tr[" "] = "_";
        for ( let i in cms.tr ) {
            let re = new RegExp( i, "g" );
            str = str.replace( re, cms.tr[i] );
        }
        if ( sp === undefined ) {
            delete cms.tr[" "];
        } else {
            cms.tr[" "] = sp;
        }
        str = str.replace( /[^-A-Za-z0-9_]+/g, "" );
        if ( ext[0] ) {
            str = str + ext[0];
        }
        str = str.toLowerCase();
        return str;
    }


    // Create Page
    document.querySelectorAll( "#pages .add-page-btn" ).forEach( function( btn ) {
        btn.addEventListener( "click", function ( e ) {
            // Отложенный вызов на случай если нужно очистить поиск
            cms.create_page_fn = function() {
                api( { fn: "create_page" }, function( r ) {
                    if ( r.info_text ) {
                        notify( r.info_text, r.info_class, r.info_time );
                    }
                    if ( r.pages ) {
                        let grid = document.querySelector( "#pages .pages-grid" );
                        grid.insertAdjacentHTML( "afterbegin", r.pages[0].html );
                        // Подкрутить список страниц в начало
                        document.querySelector( "#pages .main-main" ).scrollTop = 0;

                        let page_box = grid.querySelector( `[data-id="${r.pages[0].id}"]` );

                        set_controls( page_box );

                        let counter = document.querySelector( "#pages .main-footer .count" );
                        counter.innerText = +counter.innerText + 1;

                        let showed_pages_el = document.querySelector( "#pages .main-footer .counters input" );
                        if ( showed_pages_el.value === get_cookie( "pages_pager" ) ) {
                            document.querySelector( "#pages .pages-grid > div:last-child" ).remove();
                        } else {
                            showed_pages_el.value = +showed_pages_el.value + 1;
                        }
                    }
                } );
            }
            // Если сейчас не результаты поиска отображены,
            // и если мы видим первый пейджер
            // то сразу выполнить создание страницы
            let empty_search = document.querySelector( "#pages .page-search" ).getAttribute( "data-result-of" ) === "";
            let offset_zero = +document.querySelector( "#pages .main-footer .counters input" ).getAttribute( "data-offset" ) === 0;
            if ( empty_search && offset_zero ) {
                cms.create_page_fn();
                cms.create_page_fn = null;
            } else {
                document.querySelector( "#pages .reset" ).click();
                // Создание страницы произведет функция set_pages_list()
            }
        } );
    } );


    // view in lightbox
    function img_lbox() {
        let src = this.getAttribute( "data-src" );
        let e = src.replace( /.*\./, "" );
        let img = [ "webp", "tiff", "jpeg", "jpg", "png", "svg", "gif", "bmp", "ico" ];
        let mus = [ "mp3", "ogg", "m4a", "flac" ];
        let vid = [ "mp4", "mkv", "webm" ];
        let t;
        if ( document.querySelector( "#lbox-window" ) == null ) {
            if ( img.indexOf( e ) >= 0 ) {
                t = document.createElement( "img" );
            } else if ( mus.indexOf( e ) >= 0 ) {
                t = document.createElement( "audio" );
                t.setAttribute( "controls", true );
            } else if ( vid.indexOf( e ) >= 0 ) {
                t = document.createElement( "video" );
                t.setAttribute( "controls", true );
            }
            if ( t !== undefined ) {
                t.src = src;
                let d = document.createElement( "div" );
                d.id = "lbox-window";
                d.appendChild( t );
                document.body.appendChild( d );
                d.addEventListener( "click", function( e ) {
                    this.remove();
                } );
            }
        }
    }


    // Транслитерация URL
    function url_translit( url ) {
        url = url.toLowerCase();
        for ( let i in cms.tr ) {
            let re = new RegExp( i, "g" );
            url = url.replace( re, cms.tr[i] );
        }
        url = url.replace( / +/g, "-" );
        url = url.replace( /[^-a-z0-9_]+/g, "" );
        url = url.replace( /^[-_]+|[-_]+$/g, "" );
        return url;
    }
    
    // Подсвечивать главную
    function update_home() {
        document.querySelectorAll( `#pages .pages-grid [data-id]` ).forEach( function( page ) {
            if ( page.querySelector( `.page-name[href="${cms.base_path}"]` ) ) {
                page.classList.add( "home" );
            } else {
                page.classList.remove( "home" );
            }
        } );
    }


    // Замена текста на всех страницах
    document.querySelectorAll( "#pages-utils .replace-btn" ).forEach( function( button ) {
        button.addEventListener( "click", function( e ) {
            let data = {
                fn: "replace_in_pages",
                table: document.querySelector( "#pages-utils input[name='table']" ).value,
                id_col: document.querySelector( "#pages-utils input[name='id_col']" ).value,
                column: document.querySelector( "#pages-utils input[name='column']" ).value,
                search_regex: document.querySelector( "#pages-utils input[name='search_regex']" ).value,
                replace: document.querySelector( "#pages-utils input[name='replace']" ).value,
            };
            if ( data.search_regex && confirm( _( "replace_in_pages_confirm" ) ) ) {
                api( data, function( r ) {
                    if ( r.info_text ) {
                        notify( r.info_text, r.info_class, r.info_time );
                    }
                } );
            }
        } );
    } );

} );
