{"id":745,"date":"2026-06-16T05:42:29","date_gmt":"2026-06-16T05:42:29","guid":{"rendered":"https:\/\/hku-iamc.visibleone.dev\/events\/"},"modified":"2026-07-27T05:29:13","modified_gmt":"2026-07-27T05:29:13","slug":"events","status":"publish","type":"page","link":"https:\/\/hku-iamc.visibleone.dev\/tcn\/events\/","title":{"rendered":"\u6d3b\u52d5"},"content":{"rendered":"\n<div block-name=\"event-list\" x-data=\"iamc_events\" class=\"relative\">\n    <div block-name=\"inner-page-banner\" class=\"relative inner-page-banner\">\n                    <img decoding=\"async\" class=\"absolute top-0 left-0 w-full h-full object-cover\" src=\"https:\/\/hku-iamc.visibleone.dev\/wp-content\/uploads\/2026\/07\/D-Events.png\" alt=\"\" \/>\n                <div class=\"absolute top-0 left-0 w-full h-full object-cover bg-overlay\"><\/div>\n\n        <div class=\"relative container mx-auto\">\n            <div class=\"min-h-[300px] flex flex-col justify-end text-white py-[60px] container-lg\">\n                <h1 class=\"heading1 overflow-hidden text-ellipsis\" x-text=\"statusLabel()\">\n                    \u6700\u65b0\u6d3b\u52d5                <\/h1>\n                <div class=\"mt-4 breadcrumbs\">\n                    <ul class=\"flex flex-wrap lg:flex-nowrap items-center text-eyebrow uppercase\">\n                                                                                    <li class=\"lg:min-w-max text-grey transition-all duration-300 hover:text-highlight-orange\">\n                                    <a href=\"https:\/\/hku-iamc.visibleone.dev\/tcn\/\" target=\"_self\">\n                                        \u9996\u9801                                    <\/a>\n                                <\/li>\n                                <span class=\"mx-[10px] inline-flex items-center justify-center\">\n                                    <img decoding=\"async\" src=\"https:\/\/hku-iamc.visibleone.dev\/wp-content\/themes\/hku-iamc\/public\/images\/icons\/breadcrumb-circle.svg\" alt=\"breadcrumbs-arrow\" \/>\n                                <\/span>\n                                                                                                                <li class=\"lg:min-w-max text-grey transition-all duration-300 hover:text-highlight-orange\">\n                                    <a href=\"https:\/\/hku-iamc.visibleone.dev\/tcn\/events\/\" target=\"_self\">\n                                        \u6d3b\u52d5                                    <\/a>\n                                <\/li>\n                                <span class=\"mx-[10px] inline-flex items-center justify-center\">\n                                    <img decoding=\"async\" src=\"https:\/\/hku-iamc.visibleone.dev\/wp-content\/themes\/hku-iamc\/public\/images\/icons\/breadcrumb-circle.svg\" alt=\"breadcrumbs-arrow\" \/>\n                                <\/span>\n                                                                                                                <li class=\"text-white rounded bg-[rgba(255,255,255,0.30)] py-[6px] px-[10px]\">\n                                    <span\n                                        x-text=\"statusLabel()\">\n                                        \u6700\u65b0\u6d3b\u52d5                                    <\/span>\n                                <\/li>\n                                                                        <\/ul>\n                <\/div>\n\n            <\/div>\n        <\/div>\n    <\/div>\n    <div class=\"px-3 bg-[#FAFAFA] flex justify-center gap-6 sm:gap-10 lg:gap-[50px] border-b border-stroke\">\n        <div class=\"bg-[#FAFAFA] flex justify-center gap-6 sm:gap-10 lg:gap-[50px]\">\n            <a href=\"javascript:void(0)\" @click=\"setStatus('upcoming')\"\n                class=\"py-6 heading6 border-b-4\"\n                :class=\"s_status === 'upcoming' ? 'text-secondary-green-01 border-secondary-green-01' : 'text-metalic-dark-02 border-transparent transition-all duration-300 hover:text-secondary-green-01 hover:border-secondary-green-01'\">\n                \u6700\u65b0\u6d3b\u52d5            <\/a>\n            <a href=\"javascript:void(0)\" @click=\"setStatus('past')\"\n                class=\"py-6 heading6 border-b-4\"\n                :class=\"s_status === 'past' ? 'text-secondary-green-01 border-secondary-green-01' : 'text-metalic-dark-02 border-transparent transition-all duration-300 hover:text-secondary-green-01 hover:border-secondary-green-01'\">\n                \u904e\u5f80\u6d3b\u52d5            <\/a>\n        <\/div>\n    <\/div>\n    <div class=\"container mx-auto\">\n        <div class=\"container-lg py-10 xs:py-[60px] xl:py-20\">\n            <!-- when you finish search and filter fileds, i will adjust -->\n            <div class=\"text-body-md text-metalic-dark-02 filter-bar\">\n                <div class=\"flex flex-wrap lg:flex-nowrap items-center justify-between\">\n                    <div class=\"w-full lg:w-auto flex flex-wrap sm:flex-nowrap gap-5 md:gap-6 2xl:gap-8 4xl:gap-10\">\n                        <div class=\"w-full lg:w-[200px]\">\n                            <p class=\"mb-2 heading6 text-metalic-dark-02\">\n                                \u5e74\u4efd                            <\/p>\n                            <div class=\"relative\" x-data=\"iamc_event_year_dropdown\">\n    <input type=\"text\" id=\"s_year\" name=\"s_year\" x-model=\"s_year\" class=\"hidden\"\n        aria-hidden=\"false\" \/>\n\n    <div class=\"iamc_event_year_dropdown px-3 md:px-5 rounded py-2 md:py-2 border-[1px] border-metalic-grey-02 flex items-center h-[50px]\"\n        :class=\"dropdownOpened ? 'border-black-000' : ''\" @click=\"toggleDropdown\">\n        <label for=\"s_year\"\n            class=\"mr-2.5 text-nowrap pointer-events-none text-18 font-normal text-darkPurple\"\n            :class=\"!s_year ? '' : ''\" x-text=\"s_year_label\"><\/label>\n        <span class=\"ml-auto shrink-0\">\n            <img decoding=\"async\" src=\"https:\/\/hku-iamc.visibleone.dev\/wp-content\/themes\/hku-iamc\/resources\/images\/icons\/arrow-down.svg\" alt=\"Down Arrow Svg\"\n                class=\" transition-all pointer-events-none\" :class=\"dropdownOpened ? 'rotate-180' : ''\" \/>\n        <\/span>\n    <\/div>\n\n    <ul class=\"absolute rounded-lg min-w-max w-full -bottom-1.5 left-0 translate-y-full z-[11] bg-white text-18 font-normal text-darkPurple transition-all max-h-0 overflow-hidden border\"\n        :class=\"dropdownOpened ? 'border-black-000' : 'border-white'\" x-ref=\"dropdown\">\n        <li class=\"px-3 md:px-5 py-2 md:py-2.5 cursor-default transition hover:bg-[#1967D2] hover:text-white\"\n            :class=\"s_year_label == '\u5168\u90e8' ? 'text-white bg-[#1967D2] font-bold' : ''\"\n            @click=\"onOptionClick('', '\u5168\u90e8')\">\n            \u5168\u90e8        <\/li>\n                <li class=\"px-3 md:px-5 py-2 md:py-2.5 cursor-default transition hover:bg-[#1967D2] hover:text-white\"\n            :class=\"s_year_label == '2025' ? 'text-white bg-[#1967D2] font-bold' : ''\"\n            @click=\"onOptionClick('137', '2025')\">\n            2025        <\/li>\n                <li class=\"px-3 md:px-5 py-2 md:py-2.5 cursor-default transition hover:bg-[#1967D2] hover:text-white\"\n            :class=\"s_year_label == '2026' ? 'text-white bg-[#1967D2] font-bold' : ''\"\n            @click=\"onOptionClick('136', '2026')\">\n            2026        <\/li>\n                <li class=\"px-3 md:px-5 py-2 md:py-2.5 cursor-default transition hover:bg-[#1967D2] hover:text-white\"\n            :class=\"s_year_label == '2027' ? 'text-white bg-[#1967D2] font-bold' : ''\"\n            @click=\"onOptionClick('135', '2027')\">\n            2027        <\/li>\n                <li class=\"px-3 md:px-5 py-2 md:py-2.5 cursor-default transition hover:bg-[#1967D2] hover:text-white\"\n            :class=\"s_year_label == '2028' ? 'text-white bg-[#1967D2] font-bold' : ''\"\n            @click=\"onOptionClick('134', '2028')\">\n            2028        <\/li>\n            <\/ul>\n<\/div>\n<script>\n(function() {\n    document.addEventListener('alpine:init', function() {\n        Alpine.data('iamc_event_year_dropdown', () => ({\n            handleClickAwayBound: null,\n            dropdownOpened: false,\n            toggleDropdown: function() {\n                if (this.dropdownOpened) {\n                    this.dropdownOpened = false;\n                    this.hideDropdown();\n                } else {\n                    this.dropdownOpened = true;\n                    this.showDropdown();\n                }\n            },\n            showDropdown: function() {\n                const dropdown = this.$refs.dropdown;\n                let maxHeight = 0;\n                Array.from(dropdown.children).forEach(child => {\n                    maxHeight += child.clientHeight;\n                });\n                dropdown.style.setProperty('max-height', maxHeight + 'px');\n                dropdown.style.setProperty('z-index', 12);\n                this.handleClickAwayBound = this.handleClickAway.bind(\n                    this\n                ); \/\/ using extra var to make function in state when removing listener\n                document.addEventListener('click', this.handleClickAwayBound);\n            },\n            hideDropdown: function() {\n                const dropdown = this.$refs.dropdown;\n                dropdown.style.removeProperty('max-height');\n                dropdown.style.removeProperty('z-index');\n                document.removeEventListener('click', this.handleClickAwayBound);\n            },\n            onOptionClick: function(search, display) {\n                this['s_year'] = search;\n                this['s_year_label'] = display;\n                this.toggleDropdown();\n                this.getPosts();\n            },\n            handleClickAway: function(e) {\n                if (!e.target.closest('.iamc_event_year_dropdown') && this.dropdownOpened) {\n                    this.toggleDropdown();\n                }\n            },\n        }));\n    });\n})();\n<\/script>\n                        <\/div>\n\n                        <div class=\"w-full lg:w-[200px]\">\n                            <p class=\"mb-2 heading6 text-metalic-dark-02\">\n                                \u6d3b\u52d5\u985e\u578b                            <\/p>\n                            <div class=\"relative\" x-data=\"iamc_event_type_dropdown\">\n    <input type=\"text\" id=\"s_category\" name=\"s_category\" x-model=\"s_category\" class=\"hidden\"\n        aria-hidden=\"false\" \/>\n\n    <div class=\"iamc_event_type_dropdown px-3 md:px-5 rounded py-2 md:py-2 border-[1px] border-metalic-grey-02 flex items-center h-[50px]\"\n        :class=\"dropdownOpened ? 'border-black-000' : ''\" @click=\"toggleDropdown\">\n        <label for=\"s_category\"\n            class=\"mr-2.5 text-nowrap pointer-events-none text-18 font-normal text-darkPurple\"\n            :class=\"!s_category ? '' : ''\" x-text=\"s_category_label\"><\/label>\n        <span class=\"ml-auto shrink-0\">\n            <img decoding=\"async\" src=\"https:\/\/hku-iamc.visibleone.dev\/wp-content\/themes\/hku-iamc\/resources\/images\/icons\/arrow-down.svg\" alt=\"Down Arrow Svg\"\n                class=\" transition-all pointer-events-none\" :class=\"dropdownOpened ? 'rotate-180' : ''\" \/>\n        <\/span>\n    <\/div>\n\n    <ul class=\"absolute rounded-lg min-w-max w-full -bottom-1.5 left-0 translate-y-full z-[11] bg-white text-18 font-normal text-darkPurple transition-all max-h-0 overflow-hidden border\"\n        :class=\"dropdownOpened ? 'border-black-000' : 'border-white'\" x-ref=\"dropdown\">\n        <li class=\"px-3 md:px-5 py-2 md:py-2.5 cursor-default transition hover:bg-[#1967D2] hover:text-white\"\n            :class=\"s_category_label == '\u5168\u90e8' ? 'text-white bg-[#1967D2] font-bold' : ''\"\n            @click=\"onOptionClick('', '\u5168\u90e8')\">\n            \u5168\u90e8        <\/li>\n                <li class=\"px-3 md:px-5 py-2 md:py-2.5 cursor-default transition hover:bg-[#1967D2] hover:text-white\"\n            :class=\"s_category_label == '\u516c\u958b\u6f14\u8b1b' ? 'text-white bg-[#1967D2] font-bold' : ''\"\n            @click=\"onOptionClick('131', '\u516c\u958b\u6f14\u8b1b')\">\n            \u516c\u958b\u6f14\u8b1b        <\/li>\n                <li class=\"px-3 md:px-5 py-2 md:py-2.5 cursor-default transition hover:bg-[#1967D2] hover:text-white\"\n            :class=\"s_category_label == '\u6703\u8b70' ? 'text-white bg-[#1967D2] font-bold' : ''\"\n            @click=\"onOptionClick('51', '\u6703\u8b70')\">\n            \u6703\u8b70        <\/li>\n                <li class=\"px-3 md:px-5 py-2 md:py-2.5 cursor-default transition hover:bg-[#1967D2] hover:text-white\"\n            :class=\"s_category_label == '\u7814\u8a0e\u6703' ? 'text-white bg-[#1967D2] font-bold' : ''\"\n            @click=\"onOptionClick('47', '\u7814\u8a0e\u6703')\">\n            \u7814\u8a0e\u6703        <\/li>\n            <\/ul>\n<\/div>\n<script>\n(function() {\n    document.addEventListener('alpine:init', function() {\n        Alpine.data('iamc_event_type_dropdown', () => ({\n            handleClickAwayBound: null,\n            dropdownOpened: false,\n            toggleDropdown: function() {\n                if (this.dropdownOpened) {\n                    this.dropdownOpened = false;\n                    this.hideDropdown();\n                } else {\n                    this.dropdownOpened = true;\n                    this.showDropdown();\n                }\n            },\n            showDropdown: function() {\n                const dropdown = this.$refs.dropdown;\n                let maxHeight = 0;\n                Array.from(dropdown.children).forEach(child => {\n                    maxHeight += child.clientHeight;\n                });\n                dropdown.style.setProperty('max-height', maxHeight + 'px');\n                dropdown.style.setProperty('z-index', 12);\n                this.handleClickAwayBound = this.handleClickAway.bind(\n                    this\n                ); \/\/ using extra var to make function in state when removing listener\n                document.addEventListener('click', this.handleClickAwayBound);\n            },\n            hideDropdown: function() {\n                const dropdown = this.$refs.dropdown;\n                dropdown.style.removeProperty('max-height');\n                dropdown.style.removeProperty('z-index');\n                document.removeEventListener('click', this.handleClickAwayBound);\n            },\n            onOptionClick: function(search, display) {\n                this['s_category'] = search;\n                this['s_category_label'] = display;\n                this.toggleDropdown();\n                this.getPosts();\n            },\n            handleClickAway: function(e) {\n                if (!e.target.closest('.iamc_event_type_dropdown') && this.dropdownOpened) {\n                    this.toggleDropdown();\n                }\n            },\n        }));\n    });\n})();\n<\/script>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"w-full lg:w-auto mt-5 lg:mt-0 lg:ml-5\">\n                        <div class=\"w-full lg:w-[250px] xl:w-[300px]\">\n                            <p class=\"hidden lg:block mb-2 heading6 text-metalic-dark-02\">&nbsp;<\/p>\n\n                            <div class=\"search-filter-base search-filter-field relative\">\n                                <div class=\"search-filter-input-text search-filter-input-text h-[50px] search-filter-field__input\">\n                                    <input x-model=\"s_term\" type=\"text\" id=\"search-filter-input-text-0\" aria-label=\"New field\" autocomplete=\"off\" placeholder=\"\u6309\u95dc\u9375\u5b57\u641c\u5c0b\" class=\"search-filter-input-text__input\"\n                                        @input.debounce.500ms=\"getPosts\">\n                                    <button type=\"submit\" class=\"absolute right-3 top-1\/2 -translate-y-1\/2\">\n                                        <img decoding=\"async\" src=\"https:\/\/hku-iamc.visibleone.dev\/wp-content\/themes\/hku-iamc\/resources\/images\/icons\/search-icon.svg\" alt=\"search icon\"\n                                            class=\"w-4 h-4\">\n                                    <\/button>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"mt-8 xs:mt-10 xl:mt-[60px]\">\n                <div class=\"search-results\">\n                    <div x-show=\"loading\" x-cloak class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 3xl:gap-10\">\n                        <template x-for=\"n in 6\" :key=\"n\">\n                            <div class=\"flex flex-col gap-4 animate-pulse\">\n                                <div class=\"w-full aspect-[1\/0.58] bg-gray-200 rounded\"><\/div>\n                                <div class=\"h-3 w-1\/3 bg-gray-200 rounded\"><\/div>\n                                <div class=\"h-5 w-3\/4 bg-gray-200 rounded\"><\/div>\n                                <div class=\"h-3 w-1\/2 bg-gray-200 rounded\"><\/div>\n                            <\/div>\n                        <\/template>\n                    <\/div>\n                    <div x-show=\"!loading\" class=\"event-list grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 3xl:gap-10\">\n                            <a href=\"https:\/\/hku-iamc.visibleone.dev\/tcn\/event\/international-conference-on-modular-construction-2026\/\" class=\"group flex flex-col gap-4\">\n        <div class=\"overflow-hidden flex relative\">\n            <img decoding=\"async\" class=\"w-full object-cover aspect-[1\/0.58] transition-all duration-500 group-hover:scale-[1.1]\" src=\"https:\/\/hku-iamc.visibleone.dev\/wp-content\/uploads\/2026\/07\/FLyer.jpg\" alt=\"director image\" \/>\n        <\/div>\n        <div>\n            <p class=\"mb-1 text-eyebrow uppercase text-primary-blue-01\">\n                \u6703\u8b70            <\/p>\n            <h6 class=\"heading6 text-metalic-dark-01 line-clamp-3 text-ellipsis\">\n                2026\u5e74\u6a21\u7d44\u5316\u5efa\u9020\u570b\u969b\u6703\u8b70            <\/h6>\n            <p class=\"mt-[10px] flex gap-[10px] text-body-sm text-metalic-dark-02\">\n                <img decoding=\"async\" class=\"max-w-5 2xl:max-w-6 max-h-5 2xl:max-h-6\" src=\"https:\/\/hku-iamc.visibleone.dev\/wp-content\/themes\/hku-iamc\/public\/images\/icons\/calendar-icon.svg\" alt=\"\" \/>\n                <span>2026\u5e7411\u670821\u65e5<\/span>\n            <\/p>\n            <p class=\"mt-[10px] flex gap-[10px] text-body-sm text-metalic-dark-02\">\n                <img decoding=\"async\" class=\"max-w-5 2xl:max-w-6 max-h-5 2xl:max-h-6\" src=\"https:\/\/hku-iamc.visibleone.dev\/wp-content\/themes\/hku-iamc\/public\/images\/icons\/location-icon.svg\" alt=\"\" \/>\n                <span>\u9999\u6e2f\u6703\u8b70\u5c55\u89bd\u4e2d\u5fc3<\/span>\n            <\/p>\n        <\/div>\n    <\/a>\n                    <\/div>\n                    <div class=\"mt-8 xs:mt-10 xl:mt-[60px] paginations\" x-data=\"iamc_events_pagination\" x-show=\"totalPages\" x-cloak>\n    <ul class=\"flex justify-center items-center gap-[10px] xs:gap-3\">\n        <li @click=\"onPrev\" class=\"pg-item prev\" :class=\"current === 1 ? 'disabled' : ''\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"7\" height=\"12\" viewBox=\"0 0 7 12\" fill=\"none\">\n                <path d=\"M6 1L1 6L6 11\" stroke=\"#24353B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path>\n            <\/svg>\n        <\/li>\n\n        <template x-for=\"pageNumber in visiblePages\">\n            <li @click=\"onPaginate(pageNumber)\" :disabled=\"!parseInt(pageNumber)\" class=\"pg-item\"\n                :class=\"pageNumber === current ? 'active' : ''\">\n                <span x-text=\"pageNumber\"><\/span>\n            <\/li>\n        <\/template>\n\n        <li @click=\"onNext\" class=\"pg-item next\" :class=\"current === totalPages ? 'disabled' : ''\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"7\" height=\"12\" viewBox=\"0 0 7 12\" fill=\"none\">\n                <path d=\"M1 1L6 6L1 11\" stroke=\"#24353B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path>\n            <\/svg>\n        <\/li>\n    <\/ul>\n<\/div>\n<script>\n    (function() {\n        document.addEventListener('alpine:init', function() {\n            Alpine.data('iamc_events_pagination', () => ({\n\n                onPrev: function() {\n                    if (this.current - 1) {\n                        this.current -= 1;\n                    } else {\n                        this.current = 1;\n                    }\n                    this.getPosts(false);\n                },\n                onNext: function() {\n                    if (this.current + 1 <= this.totalPages) {\n                        this.current += 1;\n                    } else {\n                        this.current = this.totalPages;\n                    }\n                    this.getPosts(false);\n                },\n                onPaginate: function(index) {\n                    this.current = index;\n                    this.getPosts(false);\n                },\n                get visiblePages() {\n                    const range = 2;\n                    const visible = [];\n\n                    \/\/ Handle single page or no pages\n                    if (this.totalPages <= 1) {\n                        if (this.totalPages === 1) visible.push(1);\n                        return visible;\n                    }\n\n                    visible.push(1);\n\n                    if (this.current - range > 2) {\n                        if (this.current - range < this.totalPages) {\n                            visible.push('...');\n                        }\n                    }\n\n                    for (let i = Math.max(2, this.current - range); i < this.current; i++) {\n                        if (i < this.totalPages) {\n                            visible.push(i);\n                        }\n                    }\n\n                    if (this.current < this.totalPages) {\n                        if (this.current !== 1) {\n                            if (this.current !== this.totalPages) {\n                                visible.push(this.current);\n                            }\n                        }\n                    }\n\n                    for (let i = this.current + 1; i <= Math.min(this.totalPages - 1, this.current + range); i++) {\n                        if (i < this.totalPages) {\n                            visible.push(i);\n                        }\n                    }\n\n                    if (this.current + range < this.totalPages - 1) {\n                        visible.push('...');\n                    }\n\n                    visible.push(this.totalPages);\n\n                    return visible;\n                }\n            }));\n        })\n    })();\n<\/script>\n\n                <\/div>\n\n            <\/div>\n        <\/div>\n    <\/div>\n\n<\/div>\n<script>\n    (function() {\n        document.addEventListener('alpine:init', function() {\n            Alpine.data('iamc_events', () => ({\n                s_term: \"\",\n                s_year: \"0\",\n                s_year_label: \"\\u5168\\u90e8\",\n                s_order: \"DESC\",\n                s_category: \"0\",\n                s_category_label: \"\\u5168\\u90e8\",\n                current: 1,\n                per_page: 12,\n                upcomingLabel: \"\\u6700\\u65b0\\u6d3b\\u52d5\",\n                pastLabel: \"\\u904e\\u5f80\\u6d3b\\u52d5\",\n                eventsLabel: \"Events\",\n                s_status: \"upcoming\",\n                showPagination: true,\n                totalPages: Math.ceil(1 \/ 12),\n                loading: false,\n                statusLabel: function() {\n                    if (this.s_status === 'upcoming') return this.upcomingLabel;\n                    if (this.s_status === 'past') return this.pastLabel;\n                    return this.eventsLabel;\n                },\n                setStatus: function(status) {\n                    this.s_status = status;\n                    this.getPosts();\n                },\n                getPosts: async function(resetCurrent = true) {\n                    if (resetCurrent) this.current = 1;\n                    this.loading = true;\n\n                    const baseUrl = 'https:\/\/hku-iamc.visibleone.dev\/tcn\/wp-json\/iamc\/v1\/events';\n                    const param = {\n                        s_term: this.s_term,\n                        s_year: this.s_year,\n                        s_category: this.s_category,\n                        s_order: this.s_order,\n                        current: this.current,\n                        s_status: this.s_status,\n                    };\n                    const fetchUrl = baseUrl + \"?\" + this.objectToQueryString(param);\n\n                    try {\n                        const res = await fetch(fetchUrl);\n                        const data = await res.json();\n\n                        if (!res.ok) {\n                            throw new Error(data.message || 'Unable to load events.');\n                        }\n\n                        this.totalPosts = data.total;\n                        this.totalPages = data.total_pages;\n\n                        const content = document.querySelector('.event-list');\n                        content.innerHTML = data.html;\n\n                        \/\/ update URL\n                        const hrefParams = {\n                            s_term: this.s_term,\n                            s_year: this.s_year,\n                            s_category: this.s_category,\n                            s_order: this.s_order,\n                            current: this.current,\n                            s_status: this.s_status,\n                        };\n                        const newUrl = window.location.href.split(\"?\")[0] + \"?\" + this.objectToQueryString(hrefParams);\n                        window.history.replaceState({}, document.title, newUrl);\n                    } catch (e) {\n                        console.log(e);\n                    } finally {\n                        this.loading = false;\n                    }\n                },\n                objectToQueryString: function(obj) {\n                    for (let key in obj) {\n                        if (!obj[key]) delete obj[key];\n                    }\n\n                    return Object.keys(obj).map(key => encodeURIComponent(key) + '=' +\n                        encodeURIComponent(obj[key])).join('&');\n                },\n            }));\n        });\n    })();\n<\/script>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-745","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/hku-iamc.visibleone.dev\/tcn\/wp-json\/wp\/v2\/pages\/745","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hku-iamc.visibleone.dev\/tcn\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hku-iamc.visibleone.dev\/tcn\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hku-iamc.visibleone.dev\/tcn\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hku-iamc.visibleone.dev\/tcn\/wp-json\/wp\/v2\/comments?post=745"}],"version-history":[{"count":5,"href":"https:\/\/hku-iamc.visibleone.dev\/tcn\/wp-json\/wp\/v2\/pages\/745\/revisions"}],"predecessor-version":[{"id":1116,"href":"https:\/\/hku-iamc.visibleone.dev\/tcn\/wp-json\/wp\/v2\/pages\/745\/revisions\/1116"}],"wp:attachment":[{"href":"https:\/\/hku-iamc.visibleone.dev\/tcn\/wp-json\/wp\/v2\/media?parent=745"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}