// модуль с логикой

    import { hideUpdateModal, showUpdateModal } from "./lines-modal";
    import {
        // getAllItemTypes,
        createLine, deleteLine, getAllLines, updateLine,
    } from "./lines-rest-api";
    import {
        // createItemsOption,
        cntrls, createTableRow, createAnchor, imagePlaceholder,
    } from "./lines-ui";


    async function drawLinesTable() {
        console.info("Try to load data");
        if (!cntrls.table) {
            return;
        }
        // вызов метода REST API для получения всех записей
        const data = await getAllLines();
        // очистка содержимого table
        // удаляется все, что находится между тегами <table></table>
        // но не атрибуты
        cntrls.table.innerHTML = "";
        // цикл по результату ответа от сервера
        // используется лямбда-выражение
        // (item, index) => {} аналогично function(item, index) {}
        data.forEach((item, index) => {
            cntrls.table.appendChild(
                createTableRow(
                    item,
                    index,
                    // функции передаются в качестве параметра
                    // это очень удобно, так как аргументы функций доступны только
                    // в данном месте кода и не передаются в сервисные модули
                    () => showUpdateModal(item),
                    () => removeLine(item.id),
                ),
            );
        });
    }

    async function addLine(itemName, description, image) { // + imageAvatar
        console.info("Try to add item");
        // вызов метода REST API для добавления записи
        const data = await createLine(itemName, description, image);
        console.info("Added");
        console.info(data);
        // загрузка и заполнение table
        drawLinesTable();
        console.info(window.location.pathname);
        if (window.location.pathname === "/index.html") {
            UpdateVideos();
        }
    }

    async function editLine(id, itemName, description, image) { // imageAvatar
        console.info("Try to update item");
        // вызов метода REST API для обновления записи
        const data = await updateLine(id, itemName, description, image);
        console.info("Updated");
        console.info(data);
        // загрузка и заполнение table
        drawLinesTable();
        console.info(window.location.pathname);
        if (window.location.pathname.toLowerCase() === "/index.html") {
            UpdateVideos();
        }
    }

    async function removeLine(id) {
        if (!confirm("Do you really want to remove this item?")) {
            console.info("Canceled");
            return;
        }
        console.info("Try to remove item");
        // вызов метода REST API для удаления записи
        const data = await deleteLine(id);
        console.info(data);
        // загрузка и заполнение table
        drawLinesTable();
        console.info(window.location.pathname);
        if (window.location.pathname === "/index.html") {
            UpdateVideos();
        }
    }

    // функция для получения содержимого файла в виде base64 строки
    // https://ru.wikipedia.org/wiki/Base64
    async function readFile(file) {
        const reader = new FileReader();

        // создание Promise-объекта для использования функции
        // с помощью await (асинхронно) без коллбэков (callback)
        // https://learn.javascript.ru/promise
        return new Promise((resolve, reject) => {
            // 2. "Возвращаем" содержимое когда файл прочитан
            // через вызов resolve
            // Если не использовать Promise, то всю работу по взаимодействию
            // с REST API пришлось бы делать в обработчике (callback) функции
            // onloadend
            reader.onloadend = () => {
                const fileContent = reader.result;
                // Здесь могла бы быть работа с REST API
                // Чтение заканчивает выполняться здесь
                resolve(fileContent);
            };
            // 3. Возвращаем ошибку
            reader.onerror = () => {
                // Или здесь в случае ошибки
                reject(new Error("oops, something went wrong with the file reader."));
            };
            // Шаг 1. Сначала читаем файл
            // Чтение начинает выполняться здесь
            reader.readAsDataURL(file);
        });
    }

    // функция для обновления блока с превью выбранного изображения
    async function updateImagePreview() {
        // получение выбранного файла
        // возможен выбор нескольких файлов, поэтому необходимо получить только первый
        const file = cntrls.itemImage.files[0];
        // чтение содержимого файла в виде base64 строки
        const fileContent = await readFile(file);
        console.info("base64 ", fileContent);
        // обновление атрибута src для тега img с id image-preview
        cntrls.imagePreview.src = fileContent;
    }
    // // функция для обновления блока с превью выбранного изображения для аватара
    // async function updateImageAvatarPreview() {
    //     // получение выбранного файла
    //     // возможен выбор нескольких файлов, поэтому необходимо получить только первый
    //     const file = cntrls.itemImageAvatar.files[0];
    //     // чтение содержимого файла в виде base64 строки
    //     const fileContent = await readFile(file);
    //     console.info("base64 ", fileContent);
    //     // обновление атрибута src для тега img с id image-preview
    //     cntrls.imageAvatar.src = fileContent;
    // }

    // Функция для обработки создания и редактирования элементов таблицы через модальное окно
    // Если хотите делать через страницу, то удалите эту функцию
    export function linesForm() {
        console.info("linesForm");

        // загрузка и заполнение select со списком товаров
        // drawItemsSelect();
        // загрузка и заполнение table
        drawLinesTable();

        // Вызов функции обновления превью изображения при возникновении
        // события oncahnge в тэге input с id image
        cntrls.itemImage.addEventListener("change", () => updateImagePreview());
        // cntrls.itemImageAvatar.addEventListener("change", () => updateImageAvatarPreview());
        
        //  обработчик события нажатия на кнопку для показа модального окна
        cntrls.button.addEventListener("click", () => showUpdateModal(null));

        // обработчик события отправки формы
        // возникает при нажатии на кнопку (button) с типом submit
        // кнопка должна находится внутри тега form
        cntrls.form.addEventListener("submit", async (event) => {
            console.info("Form onSubmit");
            // отключение стандартного поведения формы при отправке
            // при отправке страница обновляется и JS перестает работать
            event.preventDefault();
            event.stopPropagation();
            // если форма не прошла валидацию, то ничего делать не нужно
            if (!cntrls.form.checkValidity()) {
                return;
            }

            let imageBase64 = "";
            // Получение выбранного пользователем изображения в виде base64 строки
            // Если пользователь ничего не  выбрал, то не нужно сохранять в БД
            // дефолтное изображение
            if (cntrls.imagePreview.src !== imagePlaceholder) {
                // Загрузка содержимого атрибута src тэга img с id image-preview
                // Здесь выполняется HTTP запрос с типом GET
                console.info("imagePreview.src");
                console.info(cntrls.imagePreview.src);
                const result = await fetch(cntrls.imagePreview.src);
                // Получение из HTTP-ответа бинарного содержимого
                const blob = await result.blob();
                // Получение base64 строки для файла
                // Здесь выполняется Promise из функции readFile
                // Promise позволяет писать линейный код для работы с асинхронными методами
                // без использования обработчиков (callback) с помощью await
                imageBase64 = await readFile(blob);
            }

            // получение id строки для редактирования
            // это значение содержится в скрытом input
            const currentId = cntrls.lineId.value;
            // если значение id не задано,
            // то необходимо выполнить добавление записи
            // иначе обновление записи
            if (!currentId) {
                await addLine(
                    cntrls.itemName.value,
                    cntrls.itemDescription.value,
                    imageBase64,
                );
            } else {
                await editLine(
                    currentId,
                    cntrls.itemName.value,
                    cntrls.itemDescription.value,
                    imageBase64,
                );
            }

            // после выполнения добавления/обновления модальное окно скрывается
            hideUpdateModal();
        });
    }
    /* <div class = "row">
            <div class = "col mt-4">
                <div class = "rectNews d-flex flex-column">
                    <img class ="imageNew1" src = "./images/New1.png" alt = "New1" width = "100%">
                    <div class = "rectNewsTextBox">
                    <span class = "rectNewsText">
                        <b>УлГТУ вошёл в топ-250 лучших вузов</b>
                    </span>
                </div>
                </div>
            </div>
            <div class = "col mt-4">
                <div class = "rectNews d-flex flex-column position-relative">
                    <img src = "./images/New2.png" alt = "New2" width="100%">
                    <div class = "rectNewsTextBox">
                    <span class = "rectNewsText">
                        <b>“Мосты в будущее” будут видны из УлГТУ</b>
                    </span>
                </div>
                </div>
            </div>
        </div>
        <div class ="row">
            <div class ="col mt-5">
                <div class = "rectNews d-flex flex-column position-relative">
                    <img src = "./images/New3.png" alt = "New3" width="100%">
                    <div class = "rectNewsTextBox">
                    <span class = "rectNewsText">
                        <b>Поправки в системе работы приёмной комиссии</b>
                    </span>
                </div>
                </div>
            </div>
            <div class = "col mt-5">
                <div class = "rectNews d-flex flex-column position-relative">
                    <img src = "./images/New4.png" alt = "New4" width="100%">
                    <div class = "rectNewsTextBox">
                    <span class = "rectNewsText">
                        <b>Студенты возвращаются к учёбе после зимней сессии позже, чем раньше</b>
                    </span>
                </div>
                </div>
                <span class = "d-flex"><p></p></span>
            </div>
        </div> */

        // <div class="full-page-div"> 
        //       <div class="p-5 text-center">
        //         <h1 class="display-4 fw-bold">Welcome to our streaming service</h1>
        //           <p class="fs-5">Explore the whole streaming world!</p>
        //           <a class="btn btn-outline-danger btn-lg" href="page1.html" role="button">Главная страница</a>
        //         </div>

        //       <div class="p-5 text-bg-dark rounded-3">
        //         <h2>Популярные трансляции</h2>
        //         <div class="row">
        //         <div class="col-md-4">
        //           <div class="card mb-4 shadow-sm">
        //               <img src="png/streamer1.png" class="card-img-top" alt="Video 1">
        //               <div class="card-body">
        //                 <div class="container">
        //                   <div class="row">
        //                       <div class="col-md-6">
        //                         <p class="h-4 m-0 text-nowrap font-italic font-weight-bold" href="page5channel.html">Streamer1</p>
        //                         <p class="fs-5 text-nowrap text-secondary">CS-3</p>
        //                       </div>
        //                       <div class="col-md-6 p-3 text-nowrap align-items-end d-flex">
        //                           <a class="btn btn-secondary ms-auto" href="page5channel.html">Subscribe</a>
        //                       </div>
        //                   </div>
        //                 </div>
        //               </div>
        //           </div>
        //         </div>

    function clearVideos() {
        const newsElements = document.querySelectorAll(".mainRow"); //mainRow
        newsElements.forEach((element) => element.remove());
    }
    async function UpdateNews(div1, item) {
        // const main2 = document.createElement("main");
        // main2.setAttribute("class", "col-md-9 ml-sm-auto col-lg-10 px-4");
        // const div2 = document.createElement("div");
        // div2.setAttribute("class", "container-fluid d-flex justify-content-center");
        // const div3 = document.createElement("div");
        // div3.setAttribute("class", "full-page-div");
        // const div4 = document.createElement("div");
        // div4.setAttribute("class", "p-5 text-bg-dark rounded-3");
        // const div5 = document.createElement("div");
        // div5.setAttribute("class", "row");
        // const div6 = document.createElement("div");
        // div6.setAttribute("class", "col-md-4");
        // const div7 = document.createElement("div");
        // div7.setAttribute("class", "card mb-4 shadow-sm");

        // const div8 = document.createElement("div");
        // div8.setAttribute("class", "card-body");
        // const div9= document.createElement("div");
        // div9.setAttribute("class", "container");
        // const div10 = document.createElement("div");
        // div10.setAttribute("class", "col-md-6");

        // const image = document.createElement("img");
        // image.setAttribute("class", "card-img-top");
        // image.setAttribute("src", item.image);
        // image.setAttribute("width", "100%");
        // image.setAttribute("alt", item.name);

        // const span1 = document.createElement("p1");
        // p1.setAttribute("class", "h-4 m-0 text-nowrap font-italic font-weight-bold");
        // p1.textContent = item.description;
        // const span2 = document.createElement("p2");
        // p2.setAttribute("class", "fs-5 text-nowrap text-secondary");
        const div2 = document.createElement("div");
        div2.setAttribute("class", "col mb-4");
        const div21 = document.createElement("div");
        div21.setAttribute("class", "card mb-4 shadow-sm");

        const div3 = document.createElement("div");
        div3.setAttribute("class", "rectNews d-flex flex-column");

        const image = document.createElement("img");
        image.setAttribute("class", "rectNew");
        image.setAttribute("src", item.image);
        image.setAttribute("width", "100%");
        image.setAttribute("alt", item.name);
        const div4 = document.createElement("div");
        div4.setAttribute("class", "rectNewsTextBox text-center");
        const span1 = document.createElement("span");
        span1.setAttribute("class", "rectNewsText");
        span1.textContent = item.description;
        div1.appendChild(div2);
        div2.appendChild(div21);
        div4.appendChild(createAnchor("fa-pencil", () => showUpdateModal(item)));
        div4.appendChild(createAnchor("fa-trash", () => removeLine(item.id)));
        div21.appendChild(div3);
        div3.appendChild(image);
        div3.appendChild(div4);
        div4.appendChild(span1);



        // div1.appendChild(div6);
        // div6.appendChild(div7);
        // p2.appendChild(createAnchor("fa-pencil", () => showUpdateModal(item)));
        // p2.appendChild(createAnchor("fa-trash", () => removeLine(item.id)));
        //div6.appendChild(image);
        //div6.appendChild(div8);
        //div8.appendChild(div9);
        //div9.appendChild(div10);

        //div10.appendChild(p2);
        //div10.appendChild(p1);
    }
    // async function UpdateNew(div1, item) {
    //     const div2 = document.createElement("div");
    //     div2.setAttribute("class", "col mb-4");
    //     const div3 = document.createElement("div");
    //     div3.setAttribute("class", "rectNews d-flex flex-column");
    //     const image = document.createElement("img");
    //     image.setAttribute("class", "rectNew");
    //     image.setAttribute("src", item.image);
    //     image.setAttribute("width", "100%");
    //     image.setAttribute("alt", item.name);
    //     const div4 = document.createElement("div");
    //     div4.setAttribute("class", "rectNewsTextBox text-center");
    //     const span1 = document.createElement("span");
    //     span1.setAttribute("class", "rectNewsText");
    //     span1.textContent = item.description;
    //     div1.appendChild(div2);
    //     div4.appendChild(createAnchor("fa-pencil", () => showUpdateModal(item)));
    //     div4.appendChild(createAnchor("fa-trash", () => removeLine(item.id)));
    //     div2.appendChild(div3);
    //     div3.appendChild(image);
    //     div3.appendChild(div4);
    //     div4.appendChild(span1);
    // }
    export async function UpdateVideos() {
        clearVideos();
        console.info("UpdateVideos");
        
        const data = await getAllLines();
    
        const main2 = document.querySelector("main"); // Get the main element
        main2.setAttribute("class", "mainDiv col-md-9 ml-sm-auto col-lg-10 px-4");
        // const main3 = document.querySelector("div"); 
        // main3.setAttribute("class", "p-5 text-bg-dark rounded-3");

        // Create a single row for all videos
        const div10 = document.createElement("div");
        div10.setAttribute("class", "mainRow row");
        // main2.appendChild(main3);
        data.forEach((item) => {
            // Create new elements for each item
            const div11 = document.createElement("div");
            div11.setAttribute("class", "col-md-4 mb-4"); // Adjusted class for better spacing
    
            const div21 = document.createElement("div");
            div21.setAttribute("class", "card mb-4 shadow-sm");
    
            const image = document.createElement("img");
            image.setAttribute("class", "card-img-top");
            image.setAttribute("src", item.image);
            image.setAttribute("alt", item.name);
    
            const div3 = document.createElement("div");
            div3.setAttribute("class", "card-body");
    
            const container = document.createElement("div");
            container.setAttribute("class", "container");
    
            const row = document.createElement("div");
            row.setAttribute("class", "row");
                // Создаем тег для аватарки
            // const avatarImage = document.createElement("img");
            // avatarImage.setAttribute("class", "avatar-img");
            // avatarImage.setAttribute("src", item.imageAvatar); 
            // avatarImage.setAttribute("alt", item.name);


            const colLeft = document.createElement("div");
            colLeft.setAttribute("class", "col-md-4");
            const colCenter = document.createElement("div");
            colCenter.setAttribute("class", "col-md-4");
            const colRight = document.createElement("div");
            colRight.setAttribute("class", "col-md-4 p-3 text-nowrap align-items-end d-flex");
    
            const streamerName = document.createElement("p");
            streamerName.setAttribute("class", "h-4 m-0 text-nowrap font-italic font-weight-bold");
            streamerName.textContent = item.name;
    
            const streamerDetails = document.createElement("p");
            streamerDetails.setAttribute("class", "fs-5 text-nowrap text-secondary");
            streamerDetails.textContent = item.description;

            const subscribeButton = document.createElement("a");
            subscribeButton.setAttribute("class", "btn btn-secondary ms-auto");
            subscribeButton.setAttribute("href", "page5channel.html");
            subscribeButton.textContent = "Subscribe";
    
            //colLeft.appendChild(avatarImage);
            colLeft.appendChild(streamerName); // center с аватаром
            colLeft.appendChild(streamerDetails);
            colLeft.appendChild(createAnchor("fa-pencil", () => showUpdateModal(item)));
            colLeft.appendChild(createAnchor("fa-trash", () => removeLine(item.id)));

            colRight.appendChild(subscribeButton);

            row.appendChild(colLeft);
            row.appendChild(colLeft);
            row.appendChild(colCenter);
            row.appendChild(colRight);
            container.appendChild(row);
            
            div3.appendChild(image);
            div3.appendChild(container);
            div21.appendChild(div3);
            div11.appendChild(div21);
    
            // Append the new elements to the row
            div10.appendChild(div11);
        });

        // Append the row to the main content area
        main2.appendChild(div10);
        //console.info("UpdatedVideosSUccsesful");

    }
    
    // export async function UpdateVideos() {
    //     clearVideos();
    //     console.info("UpdateVideos");
    
    //     const data = await getAllLines();
    
    //     const main2 = document.querySelector("main"); // Get the main element
    //     main2.setAttribute("class", "col-md-9 ml-sm-auto col-lg-10 px-4");

    //     const div13 = document.querySelector("div");
    //     div13.setAttribute("class", "container-fluid d-flex justify-content-center");
        
    //     const div12 = document.createElement("div");
    //     div12.setAttribute("class", "full-page-div");
    //     const div11 = document.createElement("div");
    //     div11.setAttribute("class", "p-5 text-bg-dark rounded-3");
    //     const div10 = document.createElement("div");
    //     div10.setAttribute("class", "row");


    //     data.forEach((item) => {
    //         const div13 = document.createElement("div");
    //         div13.setAttribute("class", "container-fluid d-flex justify-content-center");
            
    //         const div12 = document.createElement("div");
    //         div12.setAttribute("class", "full-page-div");
    //         const div11 = document.createElement("div");
    //         div11.setAttribute("class", "p-5 text-bg-dark rounded-3");
    //         const div10 = document.createElement("div");
    //         div10.setAttribute("class", "row");
    
    //         main2.appendChild(div13);
    //         div13.appendChild(div12);
    //         div12.appendChild(div11);
    //         //div11.appendChild(div10);

    //         cntrls.form.addEventListener("submit", async (event) => {
    //             event.preventDefault();
    //             event.stopPropagation();
    //         });
    
    //         UpdateNew(div10, item);
            
    //         // Append the new elements to the main content area
    //         div11.appendChild(div10);
    //     });
    // }
    
    // export async function UpdateVideos() {
    //     clearVideos();
    //     console.info("UpdateVideos");

    //     const data = await getAllLines();

    //     const main2 = document.createElement("main");
    //     main2.setAttribute("class", "mainDiv col-md-9 ml-sm-auto col-lg-10 px-4");
        
    //     const div13 = document.createElement("div");
    //     div13.setAttribute("class", "container-fluid d-flex justify-content-center");
        
    //     const div12 = document.createElement("div");
    //     div12.setAttribute("class", "full-page-div");
    //     const div11 = document.createElement("div");
    //     div11.setAttribute("class", "p-5 text-bg-dark rounded-3");
    //     const div10 = document.createElement("div");
    //     div10.setAttribute("class", "row");

    //     document.body.appendChild(main2);
    //     main2.appendChild(div13);
    //     div13.appendChild(div12);
    //     div12.appendChild(div11);
    //     //div11.appendChild(div10);

    //     data.forEach((item) => {
    //         cntrls.form.addEventListener("submit", async (event) => {
    //             event.preventDefault();
    //             event.stopPropagation();
    //         });
    //         UpdateNew(div10, item);
    //         div11.appendChild(div10);
    // });
    // }


    // async function drawItemsSelect() {
    //     // вызов метода REST API для получения списка типов товаров
    //     const data = await getAllItemTypes();
    //     // очистка содержимого select
    //     // удаляется все, что находится между тегами <select></select>
    //     // но не атрибуты
    //     cntrls.itemsType.innerHTML = "";
    //     // пустое значение
    //     cntrls.itemsType.appendChild(createItemsOption("Выберите значение", "", true));
    //     // цикл по результату ответа от сервера
    //     // используется лямбда-выражение
    //     // (item) => {} аналогично function(item) {}
    //     data.forEach((item) => {
    //         cntrls.itemsType.appendChild(createItemsOption(item.name, item.id));
    //     });
    // }

    // async function drawLinesTable() {
    //     console.info("Try to load data");
    //     if (!cntrls.table) {
    //         return;
    //     }
    //     // вызов метода REST API для получения всех записей
    //     const data = await getAllLines();
    //     // очистка содержимого table
    //     // удаляется все, что находится между тегами <table></table>
    //     // но не атрибуты
    //     cntrls.table.innerHTML = "";
    //     // цикл по результату ответа от сервера
    //     // используется лямбда-выражение
    //     // (item, index) => {} аналогично function(item, index) {}
    //     data.forEach((item, index) => {
    //         cntrls.table.appendChild(
    //             createTableRow(
    //                 item,
    //                 index,
    //                 // функции передаются в качестве параметра
    //                 // это очень удобно, так как аргументы функций доступны только
    //                 // в данном месте кода и не передаются в сервисные модули
    //                 () => showUpdateModal(item),
    //                 () => location.assign(`page-edit.html?id=${item.id}`),
    //                 () => removeLine(item.id),
    //             ),
    //         );
    //     });
    // }

    // async function addLine(item, price, views, image) {
    //     console.info("Try to add item");
    //     // вызов метода REST API для добавления записи
    //     const data = await createLine(item, price, views, image);
    //     console.info("Added");
    //     console.info(data);
    //     // загрузка и заполнение table
    //     drawLinesTable();
    // }

    // async function editLine(id, item, price, views, image) {
    //     console.info("Try to update item");
    //     // вызов метода REST API для обновления записи
    //     const data = await updateLine(id, item, price, views, image);
    //     console.info("Updated");
    //     console.info(data);
    //     // загрузка и заполнение table
    //     drawLinesTable();
    // }

    // async function removeLine(id) {
    //     if (!confirm("Do you really want to remove this item?")) {
    //         console.info("Canceled");
    //         return;
    //     }
    //     console.info("Try to remove item");
    //     // вызов метода REST API для удаления записи
    //     const data = await deleteLine(id);
    //     console.info(data);
    //     // загрузка и заполнение table
    //     drawLinesTable();
    // }

    // // функция для получения содержимого файла в виде base64 строки
    // // https://ru.wikipedia.org/wiki/Base64
    // async function readFile(file) {
    //     const reader = new FileReader();

    //     // создание Promise-объекта для использования функции
    //     // с помощью await (асинхронно) без коллбэков (callback)
    //     // https://learn.javascript.ru/promise
    //     return new Promise((resolve, reject) => {
    //         // 2. "Возвращаем" содержимое когда файл прочитан
    //         // через вызов resolve
    //         // Если не использовать Promise, то всю работу по взаимодействию
    //         // с REST API пришлось бы делать в обработчике (callback) функции
    //         // onloadend
    //         reader.onloadend = () => {
    //             const fileContent = reader.result;
    //             // Здесь могла бы быть работа с REST API
    //             // Чтение заканчивает выполняться здесь
    //             resolve(fileContent);
    //         };
    //         // 3. Возвращаем ошибку
    //         reader.onerror = () => {
    //             // Или здесь в случае ошибки
    //             reject(new Error("oops, something went wrong with the file reader."));
    //         };
    //         // Шаг 1. Сначала читаем файл
    //         // Чтение начинает выполняться здесь
    //         reader.readAsDataURL(file);
    //     });
    // }

    // // функция для обновления блока с превью выбранного изображения
    // async function updateImagePreview() {
    //     // получение выбранного файла
    //     // возможен выбор нескольких файлов, поэтому необходимо получить только первый
    //     const file = cntrls.image.files[0];
    //     // чтение содержимого файла в виде base64 строки
    //     const fileContent = await readFile(file);
    //     console.info("base64 ", fileContent);
    //     // обновление атрибута src для тега img с id image-preview
    //     cntrls.imagePreview.src = fileContent;
    // }

    // // Функция для обработки создания и редактирования элементов таблицы через модальное окно
    // // Если хотите делать через страницу, то удалите эту функцию
    // export function linesForm() {
    //     console.info("linesForm");

    //     // загрузка и заполнение select со списком товаров
    //     drawItemsSelect();
    //     // загрузка и заполнение table
    //     drawLinesTable();

    //     // Вызов функции обновления превью изображения при возникновении
    //     // события oncahnge в тэге input с id image
    //     cntrls.image.addEventListener("change", () => updateImagePreview());

    //     //  обработчик события нажатия на кнопку для показа модального окна
    //     cntrls.button.addEventListener("click", () => showUpdateModal(null));

    //     // обработчик события отправки формы
    //     // возникает при нажатии на кнопку (button) с типом submit
    //     // кнопка должна находится внутри тега form
    //     cntrls.form.addEventListener("submit", async (event) => {
    //         console.info("Form onSubmit");
    //         // отключение стандартного поведения формы при отправке
    //         // при отправке страница обновляется и JS перестает работать
    //         event.preventDefault();
    //         event.stopPropagation();
    //         // если форма не прошла валидацию, то ничего делать не нужно
    //         if (!cntrls.form.checkValidity()) {
    //             return;
    //         }

    //         let imageBase64 = "";
    //         // Получение выбранного пользователем изображения в виде base64 строки
    //         // Если пользователь ничего не выбрал, то не нужно сохранять в БД
    //         // дефолтное изображение
    //         if (cntrls.imagePreview.src !== imagePlaceholder) {
    //             // Загрузка содержимого атрибута src тэга img с id image-preview
    //             // Здесь выполняется HTTP запрос с типом GET
    //             const result = await fetch(cntrls.imagePreview.src);
    //             // Получение из HTTP-ответа бинарного содержимого
    //             const blob = await result.blob();
    //             // Получение base64 строки для файла
    //             // Здесь выполняется Promise из функции readFile
    //             // Promise позволяет писать линейный код для работы с асинхронными методами
    //             // без использования обработчиков (callback) с помощью await
    //             imageBase64 = await readFile(blob);
    //         }

    //         // получение id строки для редактирования
    //         // это значение содержится в скрытом input
    //         const currentId = cntrls.lineId.value;
    //         // если значение id не задано,
    //         // то необходимо выполнить добавление записи
    //         // иначе обновление записи
    //         if (!currentId) {
    //             await addLine(
    //                 cntrls.itemsType.value,
    //                 cntrls.price.value,
    //                 cntrls.views.value,
    //                 imageBase64,
    //             );
    //         } else {
    //             await editLine(
    //                 currentId,
    //                 cntrls.itemsType.value,
    //                 cntrls.price.value,
    //                 cntrls.views.value,
    //                 imageBase64,
    //             );
    //         }

    //         // после выполнения добавления/обновления модальное окно скрывается
    //         hideUpdateModal();
    //     });
    // }

    // // Функция для обработки создания и редактирования элементов таблицы через страницу page-edit.html
    // // Если хотите делать через модальное окно, то удалите эту функцию
    // export async function linesPageForm() {
    //     console.info("linesPageForm");

    //     // загрузка и заполнение select со списком товаров
    //     drawItemsSelect();

    //     // func1 = (id) => {} аналогично function func1(id) {}
    //     const goBack = () => location.assign("/page6admin.html");

    //     // Вызов функции обновления превью изображения при возникновении
    //     // события onchange в тэге input с id image
    //     cntrls.image.addEventListener("change", () => updateImagePreview());

    //     // получение параметров GET-запроса из URL
    //     // параметры перечислены после символа ? (?id=1&color=black&...)
    //     const urlParams = new URLSearchParams(location.search);

    //     // получение значения конкретного параметра (id)
    //     // указан только при редактировании
    //     const currentId = urlParams.get("id");
    //     // если id задан
    //     if (currentId) {
    //         try {
    //             // вызов метода REST API для получения записи по первичному ключу(id)
    //             const line = await getLine(currentId);
    //             // заполнение формы для редактирования
    //             cntrls.itemsType.value = line.itemsId;
    //             cntrls.price.value = line.price;
    //             cntrls.views.value = line.views;
    //             // заполнение превью
    //             // Если пользователь выбрал изображение, то оно загружается
    //             // в тэг image с id image - preview
    //             // иначе устанавливается заглушка, адрес которой указан в imagePlaceholder
    //             cntrls.imagePreview.src = line.image ? line.image : imagePlaceholder;
    //         } catch {
    //             // в случае ошибки происходит возврат к page4
    //             goBack();
    //         }
    //     }

    //     // обработчик события отправки формы
    //     // возникает при нажатии на кнопку (button) с типом submit
    //     // кнопка должна находится внутри тега form
    //     cntrls.form.addEventListener("submit", async (event) => {
    //         console.info("Form onSubmit");
    //         // отключение стандартного поведения формы при отправке
    //         // при отправке страница обновляется и JS перестает работать
    //         event.preventDefault();
    //         event.stopPropagation();
    //         // если форма не прошла валидацию, то ничего делать не нужно
    //         if (!cntrls.form.checkValidity()) {
    //             return;
    //         }

    //         let imageBase64 = "";
    //         // Получение выбранного пользователем изображения в виде base64 строки
    //         // Если пользователь ничего не выбрал, то не нужно сохранять в БД
    //         // дефолтное изображение
    //         if (cntrls.imagePreview.src !== imagePlaceholder) {
    //             // Загрузка содержимого атрибута src тэга img с id image-preview
    //             // Здесь выполняется HTTP запрос с типом GET
    //             const result = await fetch(cntrls.imagePreview.src);
    //             // Получение из HTTP-ответа бинарного содержимого
    //             const blob = await result.blob();
    //             // Получение base64 строки для файла
    //             // Здесь выполняется Promise из функции readFile
    //             // Promise позволяет писать линейный код для работы с асинхронными методами
    //             // без использования обработчиков (callback) с помощью await
    //             imageBase64 = await readFile(blob);
    //         }

    //         // если значение параметра запроса не задано,
    //         // то необходимо выполнить добавление записи
    //         // иначе обновление записи
    //         if (!currentId) {
    //             await addLine(
    //                 cntrls.itemsType.value,
    //                 cntrls.price.value,
    //                 cntrls.views.value,
    //                 imageBase64,
    //             );
    //         } else {
    //             await editLine(
    //                 currentId,
    //                 cntrls.itemsType.value,
    //                 cntrls.price.value,
    //                 cntrls.views.value,
    //                 imageBase64,
    //             );
    //         }
    //         // возврат к странице page4 (page6admin)
    //         goBack();
    //     });
    // }