{"id":44,"date":"2026-04-29T10:47:15","date_gmt":"2026-04-29T13:47:15","guid":{"rendered":"https:\/\/sites.williarts.com.br\/catedral\/?page_id=44"},"modified":"2026-06-16T16:16:21","modified_gmt":"2026-06-16T19:16:21","slug":"comunidades-setoriais","status":"publish","type":"page","link":"https:\/\/sites.williarts.com.br\/catedral\/comunidades-setoriais\/","title":{"rendered":"Comunidades Setoriais"},"content":{"rendered":"<p>[et_pb_section fb_built=&#8221;1&#8243; _builder_version=&#8221;4.27.6&#8243; _module_preset=&#8221;default&#8221; background_image=&#8221;https:\/\/sites.williarts.com.br\/catedral\/wp-content\/uploads\/2026\/04\/Grupo-1599.jpg&#8221; custom_padding=&#8221;50px||50px||true|&#8221; locked=&#8221;off&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_row _builder_version=&#8221;4.27.6&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;0px||0px||true|&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.27.6&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_text module_class=&#8221;comunity-header&#8221; _builder_version=&#8221;4.27.6&#8243; _module_preset=&#8221;default&#8221; text_font=&#8221;Italianno||||||||&#8221; text_text_color=&#8221;#FFFFFF&#8221; text_font_size=&#8221;80px&#8221; text_line_height=&#8221;1em&#8221; text_orientation=&#8221;center&#8221; custom_padding=&#8221;2px||0px|||&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<p>Comunidades Setoriais<\/p>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=&#8221;1&#8243; _builder_version=&#8221;4.27.6&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;6px|||3px||&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_row _builder_version=&#8221;4.27.6&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.27.6&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_code _builder_version=&#8221;4.27.6&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]\r\n    <div class=\"setorial-comunity-container\"><\/div>\r\n    <div class=\"setorial-map-list-container\"><\/div>\r\n    <div class=\"setorial-comunity-news-container\"><\/div>\r\n        <div id=\"pagination_6a35c36f90b31\" class=\"pagination-container\"><\/div>\r\n\r\n    <script>\r\n        document.addEventListener(\"DOMContentLoaded\", () => {\r\n            const paginationContainer = document.querySelector(\"#pagination_6a35c36f90b31\");\r\n\r\n            const createPagination = (totalPages, currentPage, onPageChange) => {\r\n                paginationContainer.innerHTML = \"\";\r\n\r\n                const createButton = (page) => {\r\n                    const button = document.createElement(\"button\");\r\n                    button.textContent = page;\r\n\r\n                    if (page === currentPage) {\r\n                        button.disabled = true;\r\n                        button.classList.add(\"active\");\r\n                    }\r\n\r\n                    button.addEventListener('click', (e) => {\r\n                        e.preventDefault();\r\n                        onPageChange(page);\r\n                    });\r\n\r\n                    return button;\r\n                };\r\n\r\n                const createDots = () => {\r\n                    const span = document.createElement(\"span\");\r\n                    span.textContent = \"...\";\r\n                    return span;\r\n                };\r\n\r\n                const createNavButton = (text, isPrev, targetPage, disabled) => {\r\n                    const button = document.createElement(\"button\");\r\n                    button.classList.add(\"nav-btn\");\r\n                    if (disabled) {\r\n                        button.disabled = true;\r\n                    }\r\n\r\n                    const container = document.createElement(\"div\");\r\n                    container.classList.add(\"nav-btn-content\");\r\n\r\n                    const icon = document.createElement(\"span\");\r\n                    icon.classList.add(\"nav-btn-icon\");\r\n                    icon.innerHTML = isPrev ?\r\n                        `<svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"19\" y1=\"12\" x2=\"5\" y2=\"12\"><\/line><polyline points=\"12 19 5 12 12 5\"><\/polyline><\/svg>` :\r\n                        `<svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line><polyline points=\"12 5 19 12 12 19\"><\/polyline><\/svg>`;\r\n\r\n                    const spanText = document.createElement(\"span\");\r\n                    spanText.textContent = text;\r\n                    spanText.classList.add(\"nav-btn-text\");\r\n\r\n                    if (isPrev) {\r\n                        container.appendChild(icon);\r\n                        container.appendChild(spanText);\r\n                    } else {\r\n                        container.appendChild(spanText);\r\n                        container.appendChild(icon);\r\n                    }\r\n\r\n                    button.appendChild(container);\r\n\r\n                    if (!disabled) {\r\n                        button.addEventListener('click', (e) => {\r\n                            e.preventDefault();\r\n                            onPageChange(targetPage);\r\n                        });\r\n                    }\r\n\r\n                    return button;\r\n                };\r\n\r\n                \/\/ ANTERIOR\r\n                paginationContainer.appendChild(createNavButton(\"ANTERIOR\", true, currentPage - 1, currentPage === 1));\r\n\r\n                paginationContainer.appendChild(createButton(1));\r\n\r\n                const range = 1;\r\n                let start = Math.max(2, currentPage - range);\r\n                let end = Math.min(totalPages - 1, currentPage + range);\r\n\r\n                if (start > 2) {\r\n                    paginationContainer.appendChild(createDots());\r\n                }\r\n\r\n                for (let i = start; i <= end; i++) {\r\n                    paginationContainer.appendChild(createButton(i));\r\n                }\r\n\r\n                if (end < totalPages - 1) {\r\n                    paginationContainer.appendChild(createDots());\r\n                }\r\n\r\n                if (totalPages > 1) {\r\n                    paginationContainer.appendChild(createButton(totalPages));\r\n                }\r\n\r\n                \/\/ PR\u00d3XIMO\r\n                paginationContainer.appendChild(createNavButton(\"PR\u00d3XIMO\", false, currentPage + 1, currentPage === totalPages || totalPages === 0));\r\n            };\r\n\r\n            \/\/ exp\u00f5e globalmente (pra outros scripts usarem)\r\n            window.createPagination = createPagination;\r\n        });\r\n    <\/script>\r\n\r\n        <template id=\"setorial-comunity-card-template\">\r\n        <div class=\"setorial-comunity-card\">\r\n            <img decoding=\"async\" src=\"\" alt=\"\">\r\n            <p class=\"church-name\"><b><\/b><\/p>\r\n            <a href=\"#\" class=\"church-url\">Ver mapa do setor<\/a>\r\n        <\/div>\r\n    <\/template>\r\n    \r\n    <template id=\"setorial-comunity-info-template\">\r\n        <div class=\"setorial-comunity-info\">\r\n            <div class=\"image-container\">\r\n                <img decoding=\"async\" src=\"\" alt=\"\" class=\"church-img\">\r\n            <\/div>\r\n            <div class=\"mass-info-container\">\r\n                <h2 class=\"mass-title\">Hor\u00e1rios das Missas<\/h2>\r\n                <div class=\"info-container\">\r\n                    <h2 class=\"church-name\" style=\"display:none;\"><\/h2>\r\n                    <div class=\"mass-times\"><\/div>\r\n                    <div class=\"address-container\">\r\n                        <p class=\"address-title\"><b>Endere\u00e7o<\/b><\/p>\r\n                        <p class=\"church-address\"><\/p>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/template>\r\n\r\n    \r\n    <template id=\"setorial-comunity-map-card-template\">\r\n        <div class=\"map-card\">\r\n            <img decoding=\"async\" src=\"\" alt=\"\">\r\n            <span class='map-description'>Titulo<\/span>\r\n        <\/div>\r\n    <\/template>\r\n\r\n        <template id=\"spinner-template\">\r\n        <div class=\"spinner-container\">\r\n            <div class=\"spinner-overlay\">\r\n                <div class=\"spinner\"><\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/template>\r\n\r\n    <div id=\"spinner-container\"><\/div>\r\n\r\n    <script>\r\n        const spinnerContainer = document.querySelector(\"#spinner-container\")\r\n        const spinnerTemplate = document.querySelector(\"#spinner-template\");\r\n\r\n        const createSpinner = () => {\r\n            const fragment = spinnerTemplate.content.cloneNode(true);\r\n            spinnerContainer.appendChild(fragment);\r\n        }\r\n\r\n        const removeSpinner = () => {\r\n            spinnerContainer.innerHTML = '';\r\n        }\r\n    <\/script>\r\n\r\n    <script>\r\n        document.addEventListener(\"DOMContentLoaded\", () => {\r\n            const config = {\r\n                baseUrl: 'https:\/\/sites.williarts.com.br\/catedral',\r\n                baseComunityUrl: '\/catedral\/comunidades-setoriais\/',\r\n                selectors: {\r\n                    container: '.setorial-comunity-container',\r\n                    mapContainer: '.setorial-map-list-container',\r\n                    newsContainer: '.setorial-comunity-news-container',\r\n                    cardTemplate: '#setorial-comunity-card-template',\r\n                    mapCardTemplate: '#setorial-comunity-map-card-template',\r\n                    infoTemplate: '#setorial-comunity-info-template',\r\n                    headerTitle: '.comunity-header div p',\r\n                    paginationContainer: '.pagination-container'\r\n                }\r\n            };\r\n\r\n            class DOMManager {\r\n                \r\n                constructor(selectors) {\r\n                    this.elements = {};\r\n                    for (const [key, selector] of Object.entries(selectors)) {\r\n                        this.elements[key] = document.querySelector(selector);\r\n                    }\r\n                }\r\n\r\n                get(name) {\r\n                    return this.elements[name];\r\n                }\r\n\r\n                clearAll() {\r\n                    if (this.elements.container) this.elements.container.innerHTML = \"\";\r\n                    if (this.elements.mapContainer) this.elements.mapContainer.innerHTML = \"\";\r\n                    if (this.elements.newsContainer) this.elements.newsContainer.innerHTML = \"\";\r\n                    if (this.elements.paginationContainer) this.elements.paginationContainer.innerHTML = \"\";\r\n                }\r\n\r\n                setTitle(title) {\r\n                    const titleEl = this.get('headerTitle');\r\n                    if (titleEl) titleEl.innerHTML = title;\r\n                }\r\n\r\n                hideContainer() {\r\n                    const container = this.get('container');\r\n                    if (container) container.classList.add(\"hidden\");\r\n                }\r\n\r\n                showContainer() {\r\n                    const container = this.get('container');\r\n                    if (container) container.classList.remove(\"hidden\");\r\n                }\r\n            }\r\n\r\n            class SpinnerManager {\r\n                static show() {\r\n                    if (typeof createSpinner === 'function') {\r\n                        createSpinner();\r\n                    } else {\r\n                        console.warn(\"createSpinner function not defined\");\r\n                    }\r\n                }\r\n\r\n                static hide() {\r\n                    if (typeof removeSpinner === 'function') {\r\n                        removeSpinner();\r\n                    } else if (typeof spinnerContainer !== 'undefined' && spinnerContainer) {\r\n                        spinnerContainer.innerHTML = \"\";\r\n                    } else {\r\n                        console.warn(\"removeSpinner function not defined\");\r\n                    }\r\n                }\r\n            }\r\n\r\n            class ModalManager {\r\n                constructor() {\r\n                    this.modalElement = null;\r\n                }\r\n\r\n                init() {\r\n                    if (this.modalElement) return;\r\n\r\n                    const modal = document.createElement('div');\r\n                    modal.classList.add('photo-modal', 'hidden');\r\n                    modal.innerHTML = `\r\n                        <div class=\"photo-modal-overlay\"><\/div>\r\n                        <div class=\"photo-modal-content\">\r\n                            <button class=\"photo-modal-close\" aria-label=\"Fechar\">&times;<\/button>\r\n                            <img decoding=\"async\" src=\"\" alt=\"Mapa ampliado\" \/>\r\n                            <div class=\"photo-modal-caption\"><\/div>\r\n                        <\/div>\r\n                    `;\r\n\r\n                    document.body.appendChild(modal);\r\n\r\n                    modal.querySelector('.photo-modal-close').addEventListener('click', () => this.close());\r\n                    modal.querySelector('.photo-modal-overlay').addEventListener('click', () => this.close());\r\n                    \r\n                    window.addEventListener('keydown', (e) => {\r\n                        if (e.key === 'Escape' && !this.modalElement.classList.contains('hidden')) {\r\n                            this.close();\r\n                        }\r\n                    });\r\n\r\n                    this.modalElement = modal;\r\n                }\r\n\r\n                open(imgSrc, captionText) {\r\n                    this.init();\r\n                    \r\n                    const img = this.modalElement.querySelector('.photo-modal-content img');\r\n                    const caption = this.modalElement.querySelector('.photo-modal-caption');\r\n\r\n                    img.src = imgSrc || '';\r\n                    if (captionText) {\r\n                        caption.innerHTML = captionText;\r\n                        caption.style.display = 'block';\r\n                    } else {\r\n                        caption.style.display = 'none';\r\n                    }\r\n\r\n                    this.modalElement.classList.remove('hidden');\r\n                    document.body.style.overflow = 'hidden';\r\n                }\r\n\r\n                close() {\r\n                    if (!this.modalElement) return;\r\n                    this.modalElement.classList.add('hidden');\r\n                    document.body.style.overflow = '';\r\n\r\n                    const img = this.modalElement.querySelector('.photo-modal-content img');\r\n                    if (img) img.src = '';\r\n                }\r\n            }\r\n\r\n            class ComunityService {\r\n                constructor(baseUrl) {\r\n                    this.baseUrl = baseUrl;\r\n                }\r\n\r\n                async get(churchId = null) {\r\n                    const url = churchId\r\n                        ? `${this.baseUrl}\/wp-json\/api\/v1\/setorial-comunity\/${churchId}`\r\n                        : `${this.baseUrl}\/wp-json\/api\/v1\/setorial-comunity`;\r\n\r\n                    const response = await fetch(url);\r\n                    if (!response.ok) {\r\n                        throw new Error(\"Erro ao buscar comunidades\");\r\n                    }\r\n                    return response.json();\r\n                }\r\n\r\n                async loadNews(comunityName, page = 1) {\r\n                    const url = `${this.baseUrl}\/wp-json\/api\/v1\/setorial-comunity\/news?comunityName=${encodeURIComponent(comunityName)}&page=${page}`;\r\n                    console.log(url)\r\n                    const response = await fetch(url);\r\n                    if (!response.ok) {\r\n                        throw new Error(\"Erro ao buscar not\u00edcias\");\r\n                    }\r\n                    return response.json();\r\n                }\r\n            }\r\n\r\n            class ComunityRenderer {\r\n                constructor(domManager) {\r\n                    this.dom = domManager;\r\n                }\r\n\r\n                renderEmpty() {\r\n                    const container = this.dom.get('container');\r\n                    if (container) {\r\n                        container.innerHTML = `\r\n                            <p style=\"margin:0 auto;width:fit-content;\">\r\n                                Nenhuma comunidade encontrada\r\n                            <\/p>\r\n                        `;\r\n                    }\r\n                }\r\n\r\n                createMassSchedule(schedule) {\r\n                    const wrapper = document.createElement(\"div\");\r\n                    wrapper.innerHTML = `\r\n                        <span>\r\n                            <b class=\"mass-day\">${schedule.mass_day}<\/b>\r\n                        <\/span>\r\n                        <span>\u2022 ${schedule.mass_hour}<\/span>\r\n                    `;\r\n                    return wrapper;\r\n                }\r\n\r\n                createBackButton(onClick) {\r\n                    const button = document.createElement(\"button\");\r\n                    button.classList.add(\"exit-button\");\r\n                    button.innerHTML = \"Voltar\";\r\n                    button.addEventListener(\"click\", onClick);\r\n                    return button;\r\n                }\r\n\r\n                renderMapList(mapItem, onMapClick) {\r\n                    const template = this.dom.get('mapCardTemplate');\r\n                    if (!template) return null;\r\n\r\n                    const fragment = template.content.cloneNode(true);\r\n                    const card = fragment.querySelector('.map-card');\r\n                    if (card) {\r\n                        const img = card.querySelector('img');\r\n                        const desc = card.querySelector('.map-description');\r\n                        if (img) img.src = mapItem.map_img || '';\r\n                        if (desc) desc.innerHTML = mapItem.map_description || '';\r\n                        \r\n                        card.style.cursor = 'pointer';\r\n                        card.addEventListener('click', () => {\r\n                            onMapClick(mapItem.map_img, mapItem.map_description);\r\n                        });\r\n                    }\r\n                    return card;\r\n                }\r\n\r\n                renderCard(comunity, onClick) {\r\n                    const template = this.dom.get('cardTemplate');\r\n                    const container = this.dom.get('container');\r\n                    if (!template || !container) return;\r\n\r\n                    const fragment = template.content.cloneNode(true);\r\n                    const card = fragment.querySelector(\".setorial-comunity-card\");\r\n\r\n                    if (card) {\r\n                        const image = card.querySelector(\"img\");\r\n                        const title = card.querySelector(\".church-name b\");\r\n                        const link = card.querySelector(\".church-url\");\r\n\r\n                        if (image) image.src = comunity.church_img || '';\r\n                        if (title) title.innerHTML = comunity.title || '';\r\n\r\n                        if (link) {\r\n                            link.dataset.id = comunity.id;\r\n                            link.href = \"#\";\r\n                            link.addEventListener(\"click\", (event) => {\r\n                                event.preventDefault();\r\n                                onClick(comunity.id);\r\n                            });\r\n                        }\r\n\r\n                        card.classList.add(\"fade-in\");\r\n                    }\r\n\r\n                    container.appendChild(fragment);\r\n                }\r\n\r\n                renderInfo(comunity, onBack, onMapClick) {\r\n                    this.dom.setTitle(comunity.title);\r\n\r\n                    const template = this.dom.get('infoTemplate');\r\n                    const container = this.dom.get('container');\r\n                    const mapContainer = this.dom.get('mapContainer');\r\n                    const newsContainer = this.dom.get('newsContainer');\r\n\r\n                    if (!template || !container) return;\r\n\r\n                    const fragment = template.content.cloneNode(true);\r\n                    const card = fragment.querySelector(\".setorial-comunity-info\");\r\n\r\n                    if (card) {\r\n                        const img = card.querySelector(\".church-img\");\r\n                        const name = card.querySelector(\".church-name\");\r\n                        const addr = card.querySelector(\".church-address\");\r\n\r\n                        if (img) img.src = comunity.church_img || '';\r\n                        if (name) name.innerHTML = comunity.title || '';\r\n                        if (addr) addr.innerHTML = comunity.address || '';\r\n\r\n                        const massTimes = card.querySelector(\".mass-times\");\r\n                        if (massTimes) {\r\n                            if (comunity.mass_schedule && comunity.mass_schedule.length) {\r\n                                comunity.mass_schedule.forEach(schedule => {\r\n                                    massTimes.appendChild(this.createMassSchedule(schedule));\r\n                                });\r\n                            } else {\r\n                                massTimes.innerHTML = \"<p>Nenhum hor\u00e1rio de missa dispon\u00edvel.<\/p>\";\r\n                            }\r\n                        }\r\n\r\n                        card.classList.add(\"fade-in\");\r\n                    }\r\n\r\n                    if (mapContainer) {\r\n                        mapContainer.innerHTML = \"\";\r\n                        if (comunity.map_location && comunity.map_location.length) {\r\n                            comunity.map_location.forEach((value) => {\r\n                                const mapCard = this.renderMapList(value, onMapClick);\r\n                                if (mapCard) mapContainer.appendChild(mapCard);\r\n                            });\r\n                        } else {\r\n                            mapContainer.innerHTML = \"<p>Nenhum mapa dispon\u00edvel.<\/p>\";\r\n                        }\r\n                    }\r\n\r\n                    const wrapper = document.createElement(\"div\");\r\n                    wrapper.classList.add(\"setorial-comunity-info-wrapper\");\r\n                    wrapper.appendChild(fragment);\r\n\r\n                    let backContainer = document.querySelector('.setorial-comunity-back-container');\r\n                    \r\n                    if (backContainer) {\r\n                        backContainer.remove();\r\n                    }\r\n\r\n                    backContainer = document.createElement(\"div\");\r\n                    backContainer.classList.add(\"setorial-comunity-back-container\");\r\n                    backContainer.appendChild(this.createBackButton(onBack));\r\n\r\n                    container.appendChild(wrapper);\r\n\r\n                    const paginationContainer = this.dom.get('paginationContainer');\r\n                    if (paginationContainer) {\r\n                        paginationContainer.insertAdjacentElement('afterend', backContainer);\r\n                    } else if (newsContainer) {\r\n                        newsContainer.insertAdjacentElement('afterend', backContainer);\r\n                    }\r\n                }\r\n\r\n                renderNewsLoading() {\r\n                    const newsContainer = this.dom.get('newsContainer');\r\n                    if (newsContainer) {\r\n                        newsContainer.innerHTML = `\r\n                            <div class=\"news-loading-wrapper\">\r\n                                <h2 class=\"setorial-news-title\">Not\u00edcias<\/h2>\r\n                                <div class=\"spinner\"><\/div>\r\n                            <\/div>\r\n                        `;\r\n                    }\r\n                }\r\n\r\n                renderNews(htmlContent) {\r\n                    const newsContainer = this.dom.get('newsContainer');\r\n                    if (newsContainer) {\r\n                        newsContainer.innerHTML = `\r\n                            <h2 class=\"setorial-news-title\">Not\u00edcias<\/h2>\r\n                            ${htmlContent}\r\n                        `;\r\n                    }\r\n                }\r\n\r\n                renderNewsError() {\r\n                    const newsContainer = this.dom.get('newsContainer');\r\n                    if (newsContainer) {\r\n                        newsContainer.innerHTML = `\r\n                            <div class=\"news-error-wrapper\">\r\n                                <h2 class=\"setorial-news-title\">Not\u00edcias<\/h2>\r\n                                <p class=\"no-news-message\">Nenhuma not\u00edcia encontrada.<\/p>\r\n                            <\/div>\r\n                        `;\r\n                    }\r\n                }\r\n            }\r\n\r\n            class ComunityController {\r\n                constructor(service, renderer, dom, modal, baseComunityUrl) {\r\n                    this.service = service;\r\n                    this.renderer = renderer;\r\n                    this.dom = dom;\r\n                    this.modal = modal;\r\n                    this.baseComunityUrl = baseComunityUrl;\r\n                }\r\n\r\n                async loadList() {\r\n                    this.dom.setTitle(\"Comunidades Setoriais\");\r\n                    SpinnerManager.show();\r\n                    this.dom.hideContainer();\r\n\r\n                    try {\r\n                        const data = await this.service.get();\r\n                        this.dom.clearAll();\r\n                        let backContainer = document.querySelector('.setorial-comunity-back-container');\r\n\r\n                        if (backContainer) {\r\n                            backContainer.remove();\r\n                        }\r\n\r\n\r\n                        const communities = data?.setorial_comunity;\r\n                        if (!communities || !communities.length) {\r\n                            this.renderer.renderEmpty();\r\n                            return;\r\n                        }\r\n\r\n                        communities.forEach(comunity => {\r\n                            this.renderer.renderCard(\r\n                                comunity,\r\n                                (id) => this.loadInfo(id)\r\n                            );\r\n                        });\r\n                    } catch (error) {\r\n                        console.error(\"Erro ao carregar lista de comunidades:\", error);\r\n                        this.dom.clearAll();\r\n                        const container = this.dom.get('container');\r\n                        if (container) {\r\n                            container.innerHTML = \"<p style='margin:0 auto;width:fit-content;'>Erro ao carregar comunidades. Tente novamente mais tarde.<\/p>\";\r\n                        }\r\n                    } finally {\r\n                        SpinnerManager.hide();\r\n                        this.dom.showContainer();\r\n                    }\r\n                }\r\n\r\n                async loadInfo(id, updateUrl = true) {\r\n                    if (updateUrl) {\r\n                        window.history.pushState(\r\n                            {},\r\n                            '',\r\n                            `${this.baseComunityUrl}${id}`\r\n                        );\r\n                    }\r\n\r\n                    SpinnerManager.show();\r\n                    this.dom.hideContainer();\r\n\r\n                    try {\r\n                        const data = await this.service.get(id);\r\n                        const communities = data?.setorial_comunity;\r\n\r\n                        this.dom.clearAll();\r\n\r\n                        if (!communities || !communities.length) {\r\n                            this.renderer.renderEmpty();\r\n                            return;\r\n                        }\r\n\r\n                        const community = communities[0];\r\n                        this.renderer.renderInfo(\r\n                            community,\r\n                            () => this.handleBack(),\r\n                            (imgSrc, title) => this.modal.open(imgSrc, title)\r\n                        );\r\n\r\n                        this.renderer.renderNewsLoading();\r\n                        this.loadNewsPage(community.title, 1);\r\n                    } catch (error) {\r\n                        console.error(\"Erro ao carregar detalhes da comunidade:\", error);\r\n                        this.dom.clearAll();\r\n                        const container = this.dom.get('container');\r\n                        if (container) {\r\n                            container.innerHTML = \"<p style='margin:0 auto;width:fit-content;'>Erro ao carregar detalhes. Tente novamente mais tarde.<\/p>\";\r\n                        }\r\n                    } finally {\r\n                        SpinnerManager.hide();\r\n                        this.dom.showContainer();\r\n                    }\r\n                }\r\n\r\n                async loadNewsPage(comunityName, page = 1) {\r\n                    this.renderer.renderNewsLoading();\r\n                    \r\n                    const paginationContainer = this.dom.get('paginationContainer');\r\n                    if (paginationContainer) {\r\n                        paginationContainer.innerHTML = \"\";\r\n                    }\r\n\r\n                    try {\r\n                        const data = await this.service.loadNews(comunityName, page);\r\n                        \r\n                        if (!data || !data.html || data.html.trim() === \"\") {\r\n                            this.renderer.renderNewsError();\r\n                            return;\r\n                        }\r\n\r\n                        this.renderer.renderNews(data.html);\r\n\r\n                        if (data.totalPages > 1 && typeof window.createPagination === 'function') {\r\n                            window.createPagination(\r\n                                data.totalPages,\r\n                                data.currentPage,\r\n                                (newPage) => this.loadNewsPage(comunityName, newPage)\r\n                            );\r\n                        }\r\n                    } catch (err) {\r\n                        console.error(\"Erro ao buscar not\u00edcias:\", err);\r\n                        this.renderer.renderNewsError();\r\n                    }\r\n                }\r\n\r\n                handleBack() {\r\n                    window.history.pushState(\r\n                        {},\r\n                        '',\r\n                        this.baseComunityUrl\r\n                    );\r\n                    \r\n                    this.loadList();\r\n                }\r\n            }\r\n\r\n            class Router {\r\n                static init(controller, baseComunityUrl) {\r\n                    const currentPath = window.location.pathname;\r\n                    const normalizedBase = baseComunityUrl.endsWith('\/') ? baseComunityUrl : `${baseComunityUrl}\/`;\r\n\r\n                    if (currentPath === baseComunityUrl || currentPath === normalizedBase) {\r\n                        controller.loadList();\r\n                        return;\r\n                    }\r\n\r\n                    if (currentPath.startsWith(normalizedBase)) {\r\n                        const subPath = currentPath.substring(normalizedBase.length).replace(\/\\\/$\/, \"\");\r\n                        if (subPath) {\r\n                            controller.loadInfo(subPath, false);\r\n                            return;\r\n                        }\r\n                    }\r\n\r\n                    controller.loadList();\r\n                }\r\n            }\r\n\r\n            const dom = new DOMManager(config.selectors);\r\n            const service = new ComunityService(config.baseUrl);\r\n            const renderer = new ComunityRenderer(dom);\r\n            const modal = new ModalManager();\r\n            const controller = new ComunityController(service, renderer, dom, modal, config.baseComunityUrl);\r\n            Router.init(controller, config.baseComunityUrl);\r\n        });\r\n    <\/script>\r\n\r\n[\/et_pb_code][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Comunidades Setoriais\r\n    <div class=\"setorial-comunity-container\"><\/div>\r\n    <div class=\"setorial-map-list-container\"><\/div>\r\n    <div class=\"setorial-comunity-news-container\"><\/div>\r\n        <div id=\"pagination_6a35c36fb138e\" class=\"pagination-container\"><\/div>\r\n\r\n    <script>\r\n        document.addEventListener(\"DOMContentLoaded\", () => {\r\n            const paginationContainer = document.querySelector(\"#pagination_6a35c36fb138e\");\r\n\r\n            const createPagination = (totalPages, currentPage, onPageChange) => {\r\n                paginationContainer.innerHTML = \"\";\r\n\r\n                const createButton = (page) => {\r\n                    const button = document.createElement(\"button\");\r\n                    button.textContent = page;\r\n\r\n                    if (page === currentPage) {\r\n                        button.disabled = true;\r\n                        button.classList.add(\"active\");\r\n                    }\r\n\r\n                    button.addEventListener('click', (e) => {\r\n                        e.preventDefault();\r\n                        onPageChange(page);\r\n                    });\r\n\r\n                    return button;\r\n                };\r\n\r\n                const createDots = () => {\r\n                    const span = document.createElement(\"span\");\r\n                    span.textContent = \"...\";\r\n                    return span;\r\n                };\r\n\r\n                const createNavButton = (text, isPrev, targetPage, disabled) => {\r\n                    const button = document.createElement(\"button\");\r\n                    button.classList.add(\"nav-btn\");\r\n                    if (disabled) {\r\n                        button.disabled = true;\r\n                    }\r\n\r\n                    const container = document.createElement(\"div\");\r\n                    container.classList.add(\"nav-btn-content\");\r\n\r\n                    const icon = document.createElement(\"span\");\r\n                    icon.classList.add(\"nav-btn-icon\");\r\n                    icon.innerHTML = isPrev ?\r\n                        `<svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"19\" y1=\"12\" x2=\"5\" y2=\"12\"><\/line><polyline points=\"12 19 5 12 12 5\"><\/polyline><\/svg>` :\r\n                        `<svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line><polyline points=\"12 5 19 12 12 19\"><\/polyline><\/svg>`;\r\n\r\n                    const spanText = document.createElement(\"span\");\r\n                    spanText.textContent = text;\r\n                    spanText.classList.add(\"nav-btn-text\");\r\n\r\n                    if (isPrev) {\r\n                        container.appendChild(icon);\r\n                        container.appendChild(spanText);\r\n                    } else {\r\n                        container.appendChild(spanText);\r\n                        container.appendChild(icon);\r\n                    }\r\n\r\n                    button.appendChild(container);\r\n\r\n                    if (!disabled) {\r\n                        button.addEventListener('click', (e) => {\r\n                            e.preventDefault();\r\n                            onPageChange(targetPage);\r\n                        });\r\n                    }\r\n\r\n                    return button;\r\n                };\r\n\r\n                \/\/ ANTERIOR\r\n                paginationContainer.appendChild(createNavButton(\"ANTERIOR\", true, currentPage - 1, currentPage === 1));\r\n\r\n                paginationContainer.appendChild(createButton(1));\r\n\r\n                const range = 1;\r\n                let start = Math.max(2, currentPage - range);\r\n                let end = Math.min(totalPages - 1, currentPage + range);\r\n\r\n                if (start > 2) {\r\n                    paginationContainer.appendChild(createDots());\r\n                }\r\n\r\n                for (let i = start; i <= end; i++) {\r\n                    paginationContainer.appendChild(createButton(i));\r\n                }\r\n\r\n                if (end < totalPages - 1) {\r\n                    paginationContainer.appendChild(createDots());\r\n                }\r\n\r\n                if (totalPages > 1) {\r\n                    paginationContainer.appendChild(createButton(totalPages));\r\n                }\r\n\r\n                \/\/ PR\u00d3XIMO\r\n                paginationContainer.appendChild(createNavButton(\"PR\u00d3XIMO\", false, currentPage + 1, currentPage === totalPages || totalPages === 0));\r\n            };\r\n\r\n            \/\/ exp\u00f5e globalmente (pra outros scripts usarem)\r\n            window.createPagination = createPagination;\r\n        });\r\n    <\/script>\r\n\r\n        <template id=\"setorial-comunity-card-template\">\r\n        <div class=\"setorial-comunity-card\">\r\n            <img decoding=\"async\" src=\"\" alt=\"\">\r\n            <p class=\"church-name\"><b><\/b><\/p>\r\n            <a href=\"#\" class=\"church-url\">Ver mapa do setor<\/a>\r\n        <\/div>\r\n    <\/template>\r\n    \r\n    <template id=\"setorial-comunity-info-template\">\r\n        <div class=\"setorial-comunity-info\">\r\n            <div class=\"image-container\">\r\n                <img decoding=\"async\" src=\"\" alt=\"\" class=\"church-img\">\r\n            <\/div>\r\n            <div class=\"mass-info-container\">\r\n                <h2 class=\"mass-title\">Hor\u00e1rios das Missas<\/h2>\r\n                <div class=\"info-container\">\r\n                    <h2 class=\"church-name\" style=\"display:none;\"><\/h2>\r\n                    <div class=\"mass-times\"><\/div>\r\n                    <div class=\"address-container\">\r\n                        <p class=\"address-title\"><b>Endere\u00e7o<\/b><\/p>\r\n                        <p class=\"church-address\"><\/p>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/template>\r\n\r\n    \r\n    <template id=\"setorial-comunity-map-card-template\">\r\n        <div class=\"map-card\">\r\n            <img decoding=\"async\" src=\"\" alt=\"\">\r\n            <span class='map-description'>Titulo<\/span>\r\n        <\/div>\r\n    <\/template>\r\n\r\n        <template id=\"spinner-template\">\r\n        <div class=\"spinner-container\">\r\n            <div class=\"spinner-overlay\">\r\n                <div class=\"spinner\"><\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/template>\r\n\r\n    <div id=\"spinner-container\"><\/div>\r\n\r\n    <script>\r\n        const spinnerContainer = document.querySelector(\"#spinner-container\")\r\n        const spinnerTemplate = document.querySelector(\"#spinner-template\");\r\n\r\n        const createSpinner = () => {\r\n            const fragment = spinnerTemplate.content.cloneNode(true);\r\n            spinnerContainer.appendChild(fragment);\r\n        }\r\n\r\n        const removeSpinner = () => {\r\n            spinnerContainer.innerHTML = '';\r\n        }\r\n    <\/script>\r\n\r\n    <script>\r\n        document.addEventListener(\"DOMContentLoaded\", () => {\r\n            const config = {\r\n                baseUrl: 'https:\/\/sites.williarts.com.br\/catedral',\r\n                baseComunityUrl: '\/catedral\/comunidades-setoriais\/',\r\n                selectors: {\r\n                    container: '.setorial-comunity-container',\r\n                    mapContainer: '.setorial-map-list-container',\r\n                    newsContainer: '.setorial-comunity-news-container',\r\n                    cardTemplate: '#setorial-comunity-card-template',\r\n                    mapCardTemplate: '#setorial-comunity-map-card-template',\r\n                    infoTemplate: '#setorial-comunity-info-template',\r\n                    headerTitle: '.comunity-header div p',\r\n                    paginationContainer: '.pagination-container'\r\n                }\r\n            };\r\n\r\n            class DOMManager {\r\n                \r\n                constructor(selectors) {\r\n                    this.elements = {};\r\n                    for (const [key, selector] of Object.entries(selectors)) {\r\n                        this.elements[key] = document.querySelector(selector);\r\n                    }\r\n                }\r\n\r\n                get(name) {\r\n                    return this.elements[name];\r\n                }\r\n\r\n                clearAll() {\r\n                    if (this.elements.container) this.elements.container.innerHTML = \"\";\r\n                    if (this.elements.mapContainer) this.elements.mapContainer.innerHTML = \"\";\r\n                    if (this.elements.newsContainer) this.elements.newsContainer.innerHTML = \"\";\r\n                    if (this.elements.paginationContainer) this.elements.paginationContainer.innerHTML = \"\";\r\n                }\r\n\r\n                setTitle(title) {\r\n                    const titleEl = this.get('headerTitle');\r\n                    if (titleEl) titleEl.innerHTML = title;\r\n                }\r\n\r\n                hideContainer() {\r\n                    const container = this.get('container');\r\n                    if (container) container.classList.add(\"hidden\");\r\n                }\r\n\r\n                showContainer() {\r\n                    const container = this.get('container');\r\n                    if (container) container.classList.remove(\"hidden\");\r\n                }\r\n            }\r\n\r\n            class SpinnerManager {\r\n                static show() {\r\n                    if (typeof createSpinner === 'function') {\r\n                        createSpinner();\r\n                    } else {\r\n                        console.warn(\"createSpinner function not defined\");\r\n                    }\r\n                }\r\n\r\n                static hide() {\r\n                    if (typeof removeSpinner === 'function') {\r\n                        removeSpinner();\r\n                    } else if (typeof spinnerContainer !== 'undefined' && spinnerContainer) {\r\n                        spinnerContainer.innerHTML = \"\";\r\n                    } else {\r\n                        console.warn(\"removeSpinner function not defined\");\r\n                    }\r\n                }\r\n            }\r\n\r\n            class ModalManager {\r\n                constructor() {\r\n                    this.modalElement = null;\r\n                }\r\n\r\n                init() {\r\n                    if (this.modalElement) return;\r\n\r\n                    const modal = document.createElement('div');\r\n                    modal.classList.add('photo-modal', 'hidden');\r\n                    modal.innerHTML = `\r\n                        <div class=\"photo-modal-overlay\"><\/div>\r\n                        <div class=\"photo-modal-content\">\r\n                            <button class=\"photo-modal-close\" aria-label=\"Fechar\">&times;<\/button>\r\n                            <img decoding=\"async\" src=\"\" alt=\"Mapa ampliado\" \/>\r\n                            <div class=\"photo-modal-caption\"><\/div>\r\n                        <\/div>\r\n                    `;\r\n\r\n                    document.body.appendChild(modal);\r\n\r\n                    modal.querySelector('.photo-modal-close').addEventListener('click', () => this.close());\r\n                    modal.querySelector('.photo-modal-overlay').addEventListener('click', () => this.close());\r\n                    \r\n                    window.addEventListener('keydown', (e) => {\r\n                        if (e.key === 'Escape' && !this.modalElement.classList.contains('hidden')) {\r\n                            this.close();\r\n                        }\r\n                    });\r\n\r\n                    this.modalElement = modal;\r\n                }\r\n\r\n                open(imgSrc, captionText) {\r\n                    this.init();\r\n                    \r\n                    const img = this.modalElement.querySelector('.photo-modal-content img');\r\n                    const caption = this.modalElement.querySelector('.photo-modal-caption');\r\n\r\n                    img.src = imgSrc || '';\r\n                    if (captionText) {\r\n                        caption.innerHTML = captionText;\r\n                        caption.style.display = 'block';\r\n                    } else {\r\n                        caption.style.display = 'none';\r\n                    }\r\n\r\n                    this.modalElement.classList.remove('hidden');\r\n                    document.body.style.overflow = 'hidden';\r\n                }\r\n\r\n                close() {\r\n                    if (!this.modalElement) return;\r\n                    this.modalElement.classList.add('hidden');\r\n                    document.body.style.overflow = '';\r\n\r\n                    const img = this.modalElement.querySelector('.photo-modal-content img');\r\n                    if (img) img.src = '';\r\n                }\r\n            }\r\n\r\n            class ComunityService {\r\n                constructor(baseUrl) {\r\n                    this.baseUrl = baseUrl;\r\n                }\r\n\r\n                async get(churchId = null) {\r\n                    const url = churchId\r\n                        ? `${this.baseUrl}\/wp-json\/api\/v1\/setorial-comunity\/${churchId}`\r\n                        : `${this.baseUrl}\/wp-json\/api\/v1\/setorial-comunity`;\r\n\r\n                    const response = await fetch(url);\r\n                    if (!response.ok) {\r\n                        throw new Error(\"Erro ao buscar comunidades\");\r\n                    }\r\n                    return response.json();\r\n                }\r\n\r\n                async loadNews(comunityName, page = 1) {\r\n                    const url = `${this.baseUrl}\/wp-json\/api\/v1\/setorial-comunity\/news?comunityName=${encodeURIComponent(comunityName)}&page=${page}`;\r\n                    console.log(url)\r\n                    const response = await fetch(url);\r\n                    if (!response.ok) {\r\n                        throw new Error(\"Erro ao buscar not\u00edcias\");\r\n                    }\r\n                    return response.json();\r\n                }\r\n            }\r\n\r\n            class ComunityRenderer {\r\n                constructor(domManager) {\r\n                    this.dom = domManager;\r\n                }\r\n\r\n                renderEmpty() {\r\n                    const container = this.dom.get('container');\r\n                    if (container) {\r\n                        container.innerHTML = `\r\n                            <p style=\"margin:0 auto;width:fit-content;\">\r\n                                Nenhuma comunidade encontrada\r\n                            <\/p>\r\n                        `;\r\n                    }\r\n                }\r\n\r\n                createMassSchedule(schedule) {\r\n                    const wrapper = document.createElement(\"div\");\r\n                    wrapper.innerHTML = `\r\n                        <span>\r\n                            <b class=\"mass-day\">${schedule.mass_day}<\/b>\r\n                        <\/span>\r\n                        <span>\u2022 ${schedule.mass_hour}<\/span>\r\n                    `;\r\n                    return wrapper;\r\n                }\r\n\r\n                createBackButton(onClick) {\r\n                    const button = document.createElement(\"button\");\r\n                    button.classList.add(\"exit-button\");\r\n                    button.innerHTML = \"Voltar\";\r\n                    button.addEventListener(\"click\", onClick);\r\n                    return button;\r\n                }\r\n\r\n                renderMapList(mapItem, onMapClick) {\r\n                    const template = this.dom.get('mapCardTemplate');\r\n                    if (!template) return null;\r\n\r\n                    const fragment = template.content.cloneNode(true);\r\n                    const card = fragment.querySelector('.map-card');\r\n                    if (card) {\r\n                        const img = card.querySelector('img');\r\n                        const desc = card.querySelector('.map-description');\r\n                        if (img) img.src = mapItem.map_img || '';\r\n                        if (desc) desc.innerHTML = mapItem.map_description || '';\r\n                        \r\n                        card.style.cursor = 'pointer';\r\n                        card.addEventListener('click', () => {\r\n                            onMapClick(mapItem.map_img, mapItem.map_description);\r\n                        });\r\n                    }\r\n                    return card;\r\n                }\r\n\r\n                renderCard(comunity, onClick) {\r\n                    const template = this.dom.get('cardTemplate');\r\n                    const container = this.dom.get('container');\r\n                    if (!template || !container) return;\r\n\r\n                    const fragment = template.content.cloneNode(true);\r\n                    const card = fragment.querySelector(\".setorial-comunity-card\");\r\n\r\n                    if (card) {\r\n                        const image = card.querySelector(\"img\");\r\n                        const title = card.querySelector(\".church-name b\");\r\n                        const link = card.querySelector(\".church-url\");\r\n\r\n                        if (image) image.src = comunity.church_img || '';\r\n                        if (title) title.innerHTML = comunity.title || '';\r\n\r\n                        if (link) {\r\n                            link.dataset.id = comunity.id;\r\n                            link.href = \"#\";\r\n                            link.addEventListener(\"click\", (event) => {\r\n                                event.preventDefault();\r\n                                onClick(comunity.id);\r\n                            });\r\n                        }\r\n\r\n                        card.classList.add(\"fade-in\");\r\n                    }\r\n\r\n                    container.appendChild(fragment);\r\n                }\r\n\r\n                renderInfo(comunity, onBack, onMapClick) {\r\n                    this.dom.setTitle(comunity.title);\r\n\r\n                    const template = this.dom.get('infoTemplate');\r\n                    const container = this.dom.get('container');\r\n                    const mapContainer = this.dom.get('mapContainer');\r\n                    const newsContainer = this.dom.get('newsContainer');\r\n\r\n                    if (!template || !container) return;\r\n\r\n                    const fragment = template.content.cloneNode(true);\r\n                    const card = fragment.querySelector(\".setorial-comunity-info\");\r\n\r\n                    if (card) {\r\n                        const img = card.querySelector(\".church-img\");\r\n                        const name = card.querySelector(\".church-name\");\r\n                        const addr = card.querySelector(\".church-address\");\r\n\r\n                        if (img) img.src = comunity.church_img || '';\r\n                        if (name) name.innerHTML = comunity.title || '';\r\n                        if (addr) addr.innerHTML = comunity.address || '';\r\n\r\n                        const massTimes = card.querySelector(\".mass-times\");\r\n                        if (massTimes) {\r\n                            if (comunity.mass_schedule && comunity.mass_schedule.length) {\r\n                                comunity.mass_schedule.forEach(schedule => {\r\n                                    massTimes.appendChild(this.createMassSchedule(schedule));\r\n                                });\r\n                            } else {\r\n                                massTimes.innerHTML = \"<p>Nenhum hor\u00e1rio de missa dispon\u00edvel.<\/p>\";\r\n                            }\r\n                        }\r\n\r\n                        card.classList.add(\"fade-in\");\r\n                    }\r\n\r\n                    if (mapContainer) {\r\n                        mapContainer.innerHTML = \"\";\r\n                        if (comunity.map_location && comunity.map_location.length) {\r\n                            comunity.map_location.forEach((value) => {\r\n                                const mapCard = this.renderMapList(value, onMapClick);\r\n                                if (mapCard) mapContainer.appendChild(mapCard);\r\n                            });\r\n                        } else {\r\n                            mapContainer.innerHTML = \"<p>Nenhum mapa dispon\u00edvel.<\/p>\";\r\n                        }\r\n                    }\r\n\r\n                    const wrapper = document.createElement(\"div\");\r\n                    wrapper.classList.add(\"setorial-comunity-info-wrapper\");\r\n                    wrapper.appendChild(fragment);\r\n\r\n                    let backContainer = document.querySelector('.setorial-comunity-back-container');\r\n                    \r\n                    if (backContainer) {\r\n                        backContainer.remove();\r\n                    }\r\n\r\n                    backContainer = document.createElement(\"div\");\r\n                    backContainer.classList.add(\"setorial-comunity-back-container\");\r\n                    backContainer.appendChild(this.createBackButton(onBack));\r\n\r\n                    container.appendChild(wrapper);\r\n\r\n                    const paginationContainer = this.dom.get('paginationContainer');\r\n                    if (paginationContainer) {\r\n                        paginationContainer.insertAdjacentElement('afterend', backContainer);\r\n                    } else if (newsContainer) {\r\n                        newsContainer.insertAdjacentElement('afterend', backContainer);\r\n                    }\r\n                }\r\n\r\n                renderNewsLoading() {\r\n                    const newsContainer = this.dom.get('newsContainer');\r\n                    if (newsContainer) {\r\n                        newsContainer.innerHTML = `\r\n                            <div class=\"news-loading-wrapper\">\r\n                                <h2 class=\"setorial-news-title\">Not\u00edcias<\/h2>\r\n                                <div class=\"spinner\"><\/div>\r\n                            <\/div>\r\n                        `;\r\n                    }\r\n                }\r\n\r\n                renderNews(htmlContent) {\r\n                    const newsContainer = this.dom.get('newsContainer');\r\n                    if (newsContainer) {\r\n                        newsContainer.innerHTML = `\r\n                            <h2 class=\"setorial-news-title\">Not\u00edcias<\/h2>\r\n                            ${htmlContent}\r\n                        `;\r\n                    }\r\n                }\r\n\r\n                renderNewsError() {\r\n                    const newsContainer = this.dom.get('newsContainer');\r\n                    if (newsContainer) {\r\n                        newsContainer.innerHTML = `\r\n                            <div class=\"news-error-wrapper\">\r\n                                <h2 class=\"setorial-news-title\">Not\u00edcias<\/h2>\r\n                                <p class=\"no-news-message\">Nenhuma not\u00edcia encontrada.<\/p>\r\n                            <\/div>\r\n                        `;\r\n                    }\r\n                }\r\n            }\r\n\r\n            class ComunityController {\r\n                constructor(service, renderer, dom, modal, baseComunityUrl) {\r\n                    this.service = service;\r\n                    this.renderer = renderer;\r\n                    this.dom = dom;\r\n                    this.modal = modal;\r\n                    this.baseComunityUrl = baseComunityUrl;\r\n                }\r\n\r\n                async loadList() {\r\n                    this.dom.setTitle(\"Comunidades Setoriais\");\r\n                    SpinnerManager.show();\r\n                    this.dom.hideContainer();\r\n\r\n                    try {\r\n                        const data = await this.service.get();\r\n                        this.dom.clearAll();\r\n                        let backContainer = document.querySelector('.setorial-comunity-back-container');\r\n\r\n                        if (backContainer) {\r\n                            backContainer.remove();\r\n                        }\r\n\r\n\r\n                        const communities = data?.setorial_comunity;\r\n                        if (!communities || !communities.length) {\r\n                            this.renderer.renderEmpty();\r\n                            return;\r\n                        }\r\n\r\n                        communities.forEach(comunity => {\r\n                            this.renderer.renderCard(\r\n                                comunity,\r\n                                (id) => this.loadInfo(id)\r\n                            );\r\n                        });\r\n                    } catch (error) {\r\n                        console.error(\"Erro ao carregar lista de comunidades:\", error);\r\n                        this.dom.clearAll();\r\n                        const container = this.dom.get('container');\r\n                        if (container) {\r\n                            container.innerHTML = \"<p style='margin:0 auto;width:fit-content;'>Erro ao carregar comunidades. Tente novamente mais tarde.<\/p>\";\r\n                        }\r\n                    } finally {\r\n                        SpinnerManager.hide();\r\n                        this.dom.showContainer();\r\n                    }\r\n                }\r\n\r\n                async loadInfo(id, updateUrl = true) {\r\n                    if (updateUrl) {\r\n                        window.history.pushState(\r\n                            {},\r\n                            '',\r\n                            `${this.baseComunityUrl}${id}`\r\n                        );\r\n                    }\r\n\r\n                    SpinnerManager.show();\r\n                    this.dom.hideContainer();\r\n\r\n                    try {\r\n                        const data = await this.service.get(id);\r\n                        const communities = data?.setorial_comunity;\r\n\r\n                        this.dom.clearAll();\r\n\r\n                        if (!communities || !communities.length) {\r\n                            this.renderer.renderEmpty();\r\n                            return;\r\n                        }\r\n\r\n                        const community = communities[0];\r\n                        this.renderer.renderInfo(\r\n                            community,\r\n                            () => this.handleBack(),\r\n                            (imgSrc, title) => this.modal.open(imgSrc, title)\r\n                        );\r\n\r\n                        this.renderer.renderNewsLoading();\r\n                        this.loadNewsPage(community.title, 1);\r\n                    } catch (error) {\r\n                        console.error(\"Erro ao carregar detalhes da comunidade:\", error);\r\n                        this.dom.clearAll();\r\n                        const container = this.dom.get('container');\r\n                        if (container) {\r\n                            container.innerHTML = \"<p style='margin:0 auto;width:fit-content;'>Erro ao carregar detalhes. Tente novamente mais tarde.<\/p>\";\r\n                        }\r\n                    } finally {\r\n                        SpinnerManager.hide();\r\n                        this.dom.showContainer();\r\n                    }\r\n                }\r\n\r\n                async loadNewsPage(comunityName, page = 1) {\r\n                    this.renderer.renderNewsLoading();\r\n                    \r\n                    const paginationContainer = this.dom.get('paginationContainer');\r\n                    if (paginationContainer) {\r\n                        paginationContainer.innerHTML = \"\";\r\n                    }\r\n\r\n                    try {\r\n                        const data = await this.service.loadNews(comunityName, page);\r\n                        \r\n                        if (!data || !data.html || data.html.trim() === \"\") {\r\n                            this.renderer.renderNewsError();\r\n                            return;\r\n                        }\r\n\r\n                        this.renderer.renderNews(data.html);\r\n\r\n                        if (data.totalPages > 1 && typeof window.createPagination === 'function') {\r\n                            window.createPagination(\r\n                                data.totalPages,\r\n                                data.currentPage,\r\n                                (newPage) => this.loadNewsPage(comunityName, newPage)\r\n                            );\r\n                        }\r\n                    } catch (err) {\r\n                        console.error(\"Erro ao buscar not\u00edcias:\", err);\r\n                        this.renderer.renderNewsError();\r\n                    }\r\n                }\r\n\r\n                handleBack() {\r\n                    window.history.pushState(\r\n                        {},\r\n                        '',\r\n                        this.baseComunityUrl\r\n                    );\r\n                    \r\n                    this.loadList();\r\n                }\r\n            }\r\n\r\n            class Router {\r\n                static init(controller, baseComunityUrl) {\r\n                    const currentPath = window.location.pathname;\r\n                    const normalizedBase = baseComunityUrl.endsWith('\/') ? baseComunityUrl : `${baseComunityUrl}\/`;\r\n\r\n                    if (currentPath === baseComunityUrl || currentPath === normalizedBase) {\r\n                        controller.loadList();\r\n                        return;\r\n                    }\r\n\r\n                    if (currentPath.startsWith(normalizedBase)) {\r\n                        const subPath = currentPath.substring(normalizedBase.length).replace(\/\\\/$\/, \"\");\r\n                        if (subPath) {\r\n                            controller.loadInfo(subPath, false);\r\n                            return;\r\n                        }\r\n                    }\r\n\r\n                    controller.loadList();\r\n                }\r\n            }\r\n\r\n            const dom = new DOMManager(config.selectors);\r\n            const service = new ComunityService(config.baseUrl);\r\n            const renderer = new ComunityRenderer(dom);\r\n            const modal = new ModalManager();\r\n            const controller = new ComunityController(service, renderer, dom, modal, config.baseComunityUrl);\r\n            Router.init(controller, config.baseComunityUrl);\r\n        });\r\n    <\/script>\r\n\r\n<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"class_list":["post-44","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/sites.williarts.com.br\/catedral\/wp-json\/wp\/v2\/pages\/44","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.williarts.com.br\/catedral\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sites.williarts.com.br\/catedral\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sites.williarts.com.br\/catedral\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.williarts.com.br\/catedral\/wp-json\/wp\/v2\/comments?post=44"}],"version-history":[{"count":11,"href":"https:\/\/sites.williarts.com.br\/catedral\/wp-json\/wp\/v2\/pages\/44\/revisions"}],"predecessor-version":[{"id":9574,"href":"https:\/\/sites.williarts.com.br\/catedral\/wp-json\/wp\/v2\/pages\/44\/revisions\/9574"}],"wp:attachment":[{"href":"https:\/\/sites.williarts.com.br\/catedral\/wp-json\/wp\/v2\/media?parent=44"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}