{"id":7433,"date":"2025-06-09T19:16:51","date_gmt":"2025-06-09T18:16:51","guid":{"rendered":"https:\/\/ninalynn.nl\/?page_id=7433"},"modified":"2025-06-09T19:21:09","modified_gmt":"2025-06-09T18:21:09","slug":"flat-mountain","status":"publish","type":"page","link":"https:\/\/ninalynn.nl\/de\/flat-mountain\/","title":{"rendered":"flat mountain"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"7433\" class=\"elementor elementor-7433\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-7b96eba elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"7b96eba\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-ac35f34\" data-id=\"ac35f34\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-7be81cb elementor-widget elementor-widget-html\" data-id=\"7be81cb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- Filters + Evenementen Blok -->\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Archivo&display=swap\" rel=\"stylesheet\" \/>\n\n<style>\n  \/* Algemene basisstijlen *\/\n  body {\n    margin: 0;\n    font-family: 'Archivo', sans-serif;\n    color: #000;\n    background-color: #f0f0f0; \/* Een neutrale achtergrond voor de body *\/\n  }\n\n  .event-container-wrapper {\n    background-color: #ffcf5a;\n    padding: 2rem;\n    max-width: 900px;\n    margin: 2rem auto;\n    border-radius: 12px;\n    box-sizing: border-box; \/* Zorgt dat padding en border binnen de opgegeven breedte vallen *\/\n  }\n\n  \/* Filters *\/\n  .filters-group {\n    display: flex;\n    gap: 1rem;\n    flex-wrap: wrap;\n    margin-bottom: 2rem;\n    justify-content: flex-start; \/* Zorgt ervoor dat items links beginnen *\/\n  }\n\n  .filters-group label {\n    display: flex;\n    flex-direction: column;\n    font-size: 0.9rem;\n  }\n\n  .filters-group select {\n    padding: 0.6rem; \/* Grotere padding voor makkelijkere touch *\/\n    border: 1px solid #000;\n    background: transparent;\n    border-radius: 4px;\n    font-size: 1rem; \/* Grotere lettergrootte *\/\n    min-width: 120px; \/* Minimale breedte voor selectboxen *\/\n  }\n\n  \/* Evenementenlijst items *\/\n  .event-item-flex {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 1rem;\n    margin: 1.5rem 0;\n    padding-bottom: 1rem;\n    border-bottom: 1px solid #000;\n    flex-wrap: wrap; \/* Zorgt ervoor dat items op kleinere schermen onder elkaar kunnen vallen *\/\n  }\n\n  .event-item-info {\n    display: flex;\n    align-items: center;\n    gap: 1rem;\n    flex: 1; \/* Neemt beschikbare ruimte in *\/\n    min-width: 0; \/* Voorkomt overflow bij lange teksten *\/\n  }\n\n  .event-artist-image {\n    width: 50px;\n    height: 50px;\n    border-radius: 50%;\n    object-fit: cover;\n  }\n\n  .event-details-text {\n    flex: 1; \/* Laat tekst de resterende ruimte innemen *\/\n    min-width: 0; \/* Voorkomt overflow *\/\n  }\n\n  .event-artist-name {\n    font-weight: bold;\n    font-size: 1.1rem;\n  }\n\n  .event-date-venue {\n    font-size: 0.95rem;\n    word-wrap: break-word; \/* Voorkomt overflow van lange strings *\/\n    min-width: 0;\n  }\n\n  .event-buttons-group {\n    display: flex;\n    gap: 0.5rem;\n    flex-shrink: 0; \/* Voorkomt dat knoppen kleiner worden dan hun inhoud *\/\n    margin-top: 0; \/* Op grotere schermen *\/\n  }\n\n  .more-info-button-list,\n  .tickets-button-list {\n    display: inline-block;\n    padding: 8px 14px; \/* Grotere padding voor makkelijkere touch *\/\n    border: 1px solid #000;\n    border-radius: 4px;\n    background: transparent;\n    cursor: pointer;\n    text-decoration: none; \/* Verwijdert onderstreping voor knoppen *\/\n    color: black;\n    font-size: 0.9rem; \/* Lettergrootte voor knoppen *\/\n    white-space: nowrap; \/* Voorkomt dat de tekst van de knop afbreekt *\/\n  }\n\n  .tickets-button-list:hover, .more-info-button-list:hover {\n    background-color: rgba(0, 0, 0, 0.05); \/* Lichte hover-effect *\/\n  }\n\n  \/* Laadspinner *\/\n  .spinner-overlay {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background-color: rgba(0, 0, 0, 0.5);\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    z-index: 1000;\n    visibility: hidden;\n    opacity: 0;\n    transition: visibility 0s, opacity 0.3s linear;\n  }\n\n  .spinner-overlay.show {\n    visibility: visible;\n    opacity: 1;\n  }\n\n  .spinner {\n    border: 8px solid #f3f3f3;\n    border-top: 8px solid #ffcf5a;\n    border-radius: 50%;\n    width: 60px;\n    height: 60px;\n    animation: spin 1s linear infinite;\n  }\n\n  @keyframes spin {\n    0% { transform: rotate(0deg); }\n    100% { transform: rotate(360deg); }\n  }\n\n  \/* Modaal Venster *\/\n  .modal-overlay {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background-color: rgba(0, 0, 0, 0.7); \/* Iets donkerder overlay voor leesbaarheid *\/\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    z-index: 1001;\n    visibility: hidden;\n    opacity: 0;\n    transition: visibility 0s, opacity 0.3s linear;\n    padding: 1rem; \/* Ruimte aan de randen op kleine schermen *\/\n    box-sizing: border-box;\n  }\n\n  .modal-overlay.show {\n    visibility: visible;\n    opacity: 1;\n  }\n\n  .modal-content {\n    background-color: #358180; \/* Aangepaste achtergrondkleur *\/\n    color: #ffffff; \/* Witte tekst *\/\n    padding: 2rem;\n    border-radius: 12px;\n    max-width: 700px;\n    width: 100%; \/* Neemt volledige breedte op kleine schermen *\/\n    max-height: 90vh; \/* Zorgt voor scrollbaarheid van de hele modal *\/\n    overflow-y: auto; \/* Scrollbaar maken als inhoud groter is dan max-height *\/\n    position: relative;\n    box-sizing: border-box;\n    display: flex; \/* Flexbox voor inhoud van modal *\/\n    flex-direction: column;\n  }\n\n  .modal-close-button {\n    position: absolute;\n    top: 1rem;\n    right: 1rem;\n    background: none;\n    border: none;\n    font-size: 2rem;\n    cursor: pointer;\n    color: #ffffff;\n    padding: 0.5rem; \/* Groter tapple-gebied *\/\n  }\n\n  \/* Ticketknop in de modal: Styling zoals eerst *\/\n  .modal-tickets-button {\n    display: inline-block;\n    padding: 6px 12px;\n    font-size: 0.9rem;\n    color: white;\n    text-decoration: underline;\n    border: 1px solid white;\n    border-radius: 4px;\n    background: transparent;\n    cursor: pointer;\n    white-space: nowrap;\n    margin-top: 1rem; \/* Ruimte boven de knop *\/\n  }\n\n  .modal-header {\n    display: flex;\n    align-items: center;\n    margin-bottom: 1rem;\n    flex-direction: row; \/* Standaard op \u00e9\u00e9n rij voor desktop *\/\n    padding-right: 0;\n  }\n\n  .modal-artist-image {\n    width: 100px;\n    height: 100px;\n    border-radius: 50%;\n    object-fit: cover;\n    margin-right: 1.5rem;\n    flex-shrink: 0;\n  }\n\n  .modal-text-details {\n    flex-grow: 1;\n  }\n\n  \/* Desktop font-sizes voor modal teksten (hersteld naar eerdere waarden) *\/\n  .modal-event-artist {\n    margin: 0;\n    font-size: 1.8rem; \/* Hersteld naar originele desktopwaarde *\/\n    line-height: 1.2;\n  }\n\n  .modal-event-date,\n  .modal-event-venue {\n    margin: 0.2rem 0;\n    font-size: 1.1rem; \/* Hersteld naar originele desktopwaarde *\/\n  }\n\n  .modal-body {\n    margin-bottom: 1.5rem;\n  }\n\n  \/* Heading van beschrijving is nu verwijderd *\/\n  .modal-body p {\n    font-size: 1.1rem; \/* Hersteld naar originele desktopwaarde *\/\n    line-height: 1.5;\n  }\n\n  \/* Hoofdingen van maanden in de lijst (niet in de modal) *\/\n  #fmc-events h2 {\n    margin-top: 2rem;\n    font-size: 1.4rem;\n    border-bottom: 2px solid #000;\n  }\n\n  \/* --- MEDIA QUERIES VOOR RESPONSIVITEIT --- *\/\n\n  \/* Voor schermen kleiner dan 768px (typisch tablets in portret en telefoons) *\/\n  @media (max-width: 767px) {\n    .event-container-wrapper {\n      margin: 1rem;\n      padding: 1rem;\n      border-radius: 8px;\n    }\n\n    .filters-group {\n      flex-direction: column;\n      gap: 0.8rem;\n    }\n\n    .filters-group label {\n      width: 100%;\n    }\n\n    .filters-group select {\n      width: 100%;\n      font-size: 0.9rem;\n      padding: 0.5rem;\n    }\n\n    .event-item-flex {\n      flex-direction: column;\n      align-items: flex-start;\n      gap: 0.8rem;\n      padding-bottom: 0.8rem;\n      margin: 1rem 0;\n    }\n\n    .event-item-info {\n      flex-direction: row;\n      align-items: center;\n      gap: 0.8rem;\n      width: 100%;\n      margin-bottom: 0.5rem;\n    }\n\n    .event-artist-image {\n      width: 40px;\n      height: 40px;\n    }\n\n    .event-artist-name {\n      font-size: 1rem;\n    }\n\n    .event-date-venue {\n      font-size: 0.85rem;\n    }\n\n    .event-buttons-group {\n      width: 100%;\n      justify-content: flex-start;\n      margin-top: 0.5rem;\n    }\n\n    .more-info-button-list,\n    .tickets-button-list {\n      padding: 7px 12px;\n      font-size: 0.8rem;\n    }\n\n    .modal-content {\n      padding: 1.5rem;\n      border-radius: 8px;\n    }\n\n    .modal-close-button {\n      font-size: 1.8rem;\n      top: 0.8rem;\n      right: 0.8rem;\n    }\n\n    \/* Mobiele styling voor ticketknop in modal *\/\n    .modal-tickets-button {\n      position: static; \/* Mobiel: geen absolute positionering *\/\n      margin-top: 1rem; \/* Ruimte boven de knop op mobiel *\/\n      margin-bottom: 0; \/* Geen extra marge onderop mobiel *\/\n      width: 100%; \/* Volledige breedte *\/\n      text-align: center;\n      padding: 10px 15px;\n      font-size: 1rem;\n      align-self: center; \/* Centreer de knop als de container een kolom is *\/\n    }\n\n    .modal-header {\n      flex-direction: column; \/* Afbeelding en tekst boven elkaar in modal header *\/\n      align-items: flex-start;\n      margin-bottom: 1rem;\n      padding-right: 0;\n    }\n\n    .modal-artist-image {\n      margin-right: 0;\n      margin-bottom: 1rem;\n    }\n\n    \/* Grotere font-sizes voor mobiel in modal *\/\n    .modal-event-artist {\n      font-size: 1.4rem;\n    }\n\n    .modal-event-date,\n    .modal-event-venue {\n      font-size: 1rem;\n    }\n\n    .modal-body h3 { \/* De heading voor beschrijving is nu weg, dus deze stijl kan vervallen *\/\n      font-size: 1.1rem;\n      margin-top: 1rem;\n      margin-bottom: 0.6rem;\n    }\n\n    .modal-body p {\n      font-size: 1rem;\n    }\n  }\n\n  \/* Voor schermen kleiner dan 480px (typisch smartphones) *\/\n  @media (max-width: 480px) {\n    .event-container-wrapper {\n      margin: 0.5rem;\n      padding: 0.8rem;\n    }\n\n    .filters-group select {\n      font-size: 0.85rem;\n      padding: 0.4rem;\n    }\n\n    .event-artist-name {\n      font-size: 0.95rem;\n    }\n\n    .event-date-venue {\n      font-size: 0.8rem;\n    }\n\n    .more-info-button-list,\n    .tickets-button-list {\n      padding: 6px 10px;\n      font-size: 0.75rem;\n    }\n\n    .modal-content {\n      padding: 1rem;\n    }\n  }\n<\/style>\n\n<div class=\"event-container-wrapper\">\n  \n  <div class=\"filters-group\">\n    <label>\n      Artiest:\n      <select id=\"artist-filter\">\n        <option value=\"all\">Alle artiesten<\/option>\n      <\/select>\n    <\/label>\n    <label>\n      Maand:\n      <select id=\"month-filter\">\n        <option value=\"all\">Alle maanden<\/option>\n      <\/select>\n    <\/label>\n    <label>\n      Land:\n      <select id=\"location-filter\">\n        <option value=\"all\">Alle landen<\/option>\n      <\/select>\n    <\/label>\n  <\/div>\n\n  <div id=\"fmc-events\">\n    <p style=\"text-align: center;\">Evenementen laden...<\/p>\n  <\/div>\n<\/div>\n\n<div id=\"loading-spinner-overlay\" class=\"spinner-overlay\">\n  <div class=\"spinner\"><\/div>\n<\/div>\n\n<div id=\"event-modal-overlay\" class=\"modal-overlay\">\n  <div class=\"modal-content\">\n    <button class=\"modal-close-button\" id=\"modal-close-button\">&times;<\/button>\n    \n    <div class=\"modal-header\">\n      <img id=\"modal-artist-image\" class=\"modal-artist-image\" alt=\"Artiest afbeelding\" \/>\n      <div class=\"modal-text-details\">\n        <h2 id=\"modal-event-artist\" class=\"modal-event-artist\"><\/h2>\n        <p id=\"modal-event-date\" class=\"modal-event-date\"><\/p>\n        <p id=\"modal-event-venue\" class=\"modal-event-venue\"><\/p>\n      <\/div>\n    <\/div>\n\n    <div class=\"modal-body\">\n      <!-- De heading voor 'Beschrijving' is verwijderd -->\n      <p id=\"modal-event-description\"><\/p>\n      <!-- Ticketknop nu onder de beschrijving -->\n      <a id=\"modal-tickets-button\" class=\"modal-tickets-button\" href=\"#\" target=\"_blank\">Tickets<\/a>\n    <\/div>\n  <\/div>\n<\/div>\n\n<script>\n  const artists = [\n    { name: \"Ninalynn\", apiKey: \"0771e1a17bf250a1117c0f015a3150c8\" },\n    { name: \"The Lasses\", apiKey: \"9bf6a853c76ba999011d80da9b8f280a\" }\n  ];\n\n  let allEventsRaw = []; \n\n  const loadingSpinnerOverlay = document.getElementById('loading-spinner-overlay');\n  const eventModalOverlay = document.getElementById('event-modal-overlay');\n  const modalCloseButton = document.getElementById('modal-close-button');\n\n  function showSpinner() {\n    loadingSpinnerOverlay.classList.add('show');\n  }\n\n  function hideSpinner() {\n    loadingSpinnerOverlay.classList.remove('show');\n  }\n\n  function showModal(eventData) {\n    document.getElementById('modal-artist-image').src = eventData.image || 'https:\/\/placehold.co\/100x100\/cccccc\/ffffff?text=NA';\n    document.getElementById('modal-artist-image').alt = eventData.artist;\n    document.getElementById('modal-event-artist').textContent = eventData.artist;\n    \n    const eventDate = new Date(eventData.datetime);\n    document.getElementById('modal-event-date').textContent = eventDate.toLocaleDateString(\"nl-NL\", { weekday: \"long\", day: \"numeric\", month: \"long\", year: \"numeric\", hour: \"2-digit\", minute: \"2-digit\" });\n    document.getElementById('modal-event-venue').textContent = `${eventData.venue.name}, ${eventData.venue.city} (${eventData.country})`;\n    \n    document.getElementById('modal-event-description').textContent = eventData.description || 'Geen beschrijving beschikbaar.';\n\n    const ticketUrl = eventData.offers?.[0]?.url || eventData.url;\n    const ticketsButton = document.getElementById('modal-tickets-button');\n    if (ticketUrl) {\n        ticketsButton.href = ticketUrl;\n        ticketsButton.style.display = 'inline-block';\n    } else {\n        ticketsButton.style.display = 'none';\n    }\n\n    eventModalOverlay.classList.add('show');\n  }\n\n  function hideModal() {\n    eventModalOverlay.classList.remove('show');\n  }\n\n  modalCloseButton.addEventListener('click', hideModal);\n  eventModalOverlay.addEventListener('click', (e) => {\n    if (e.target === eventModalOverlay) {\n      hideModal();\n    }\n  });\n\n  async function fetchEvents(artist) {\n    const eventsUrl = `https:\/\/rest.bandsintown.com\/artists\/${encodeURIComponent(artist.name)}\/events?app_id=${artist.apiKey}`;\n    const artistInfoUrl = `https:\/\/rest.bandsintown.com\/artists\/${encodeURIComponent(artist.name)}?app_id=${artist.apiKey}`;\n\n    try {\n      const [eventsRes, artistInfoRes] = await Promise.all([\n        fetch(eventsUrl),\n        fetch(artistInfoUrl)\n      ]);\n\n      const rawEvents = await eventsRes.json();\n      const artistInfo = await artistInfoRes.json();\n\n      if (!Array.isArray(rawEvents)) {\n        console.warn(`Bandsintown API respons voor ${artist.name} was geen array.`);\n        return [];\n      }\n\n      return rawEvents.map(e => ({\n        ...e,\n        artist: artist.name,\n        image: artistInfo.image_url || '',\n        country: e.venue.country || '',\n        description: e.description || '' \n      }));\n    } catch (e) {\n      console.error(`Fout bij het ophalen van evenementen of artiestinfo voor ${artist.name}:`, e);\n      return [];\n    }\n  }\n\n  function groupByMonth(events) {\n    const groups = {};\n    events.forEach(event => {\n      const date = new Date(event.datetime);\n      const key = date.toLocaleString('nl-NL', { month: 'long', year: 'numeric' });\n      if (!groups[key]) groups[key] = [];\n      groups[key].push(event);\n    });\n    return groups;\n  }\n\n  function renderFilters(events) {\n    const artistFilter = document.getElementById(\"artist-filter\");\n    const monthFilter = document.getElementById(\"month-filter\");\n    const countryFilter = document.getElementById(\"location-filter\");\n\n    artistFilter.innerHTML = '<option value=\"all\">Alle artiesten<\/option>';\n    monthFilter.innerHTML = '<option value=\"all\">Alle maanden<\/option>';\n    countryFilter.innerHTML = '<option value=\"all\">Alle landen<\/option>';\n\n    const artistSet = new Set(events.map(e => e.artist));\n    const monthSet = new Set(events.map(e => {\n      const date = new Date(e.datetime);\n      return date.toLocaleString('nl-NL', { month: 'long', year: 'numeric' });\n    }));\n    const countrySet = new Set(events.map(e => e.country).filter(c => c));\n\n    Array.from(artistSet).sort((a, b) => a.localeCompare(b)).forEach(artist => {\n      const opt = document.createElement(\"option\");\n      opt.value = artist;\n      opt.textContent = artist;\n      artistFilter.appendChild(opt);\n    });\n\n    Array.from(monthSet).sort((a, b) => {\n        const dateA = new Date(`1 ${a.split(' ')[0]} ${a.split(' ')[1]}`); \n        const dateB = new Date(`1 ${b.split(' ')[0]} ${b.split(' ')[1]}`);\n        return dateA - dateB;\n    }).forEach(month => {\n      const opt = document.createElement(\"option\");\n      opt.value = month;\n      opt.textContent = month.charAt(0).toUpperCase() + month.slice(1);\n      monthFilter.appendChild(opt);\n    });\n\n    Array.from(countrySet).sort((a, b) => a.localeCompare(b)).forEach(country => {\n      const opt = document.createElement(\"option\");\n      opt.value = country;\n      opt.textContent = country;\n      countryFilter.appendChild(opt);\n    });\n\n    artistFilter.addEventListener(\"change\", renderFilteredEvents);\n    monthFilter.addEventListener(\"change\", renderFilteredEvents);\n    countryFilter.addEventListener(\"change\", renderFilteredEvents);\n  }\n\n  function renderFilteredEvents() {\n    const artistVal = document.getElementById(\"artist-filter\").value;\n    const monthVal = document.getElementById(\"month-filter\").value;\n    const countryVal = document.getElementById(\"location-filter\").value;\n\n    const filtered = allEventsRaw.filter(e => {\n      const dateStr = new Date(e.datetime).toLocaleString('nl-NL', { month: 'long', year: 'numeric' });\n      return (artistVal === \"all\" || e.artist === artistVal) &&\n             (monthVal === \"all\" || monthVal === dateStr) &&\n             (countryVal === \"all\" || e.country === countryVal);\n    });\n\n    renderEvents(filtered);\n  }\n\n  function renderEvents(events) {\n    const container = document.getElementById(\"fmc-events\");\n    if (!events.length) {\n      container.innerHTML = \"<p style='text-align:center;'>Geen evenementen gevonden voor deze selectie.<\/p>\";\n      return;\n    }\n\n    events.sort((a, b) => new Date(a.datetime) - new Date(b.datetime));\n    const grouped = groupByMonth(events);\n    let html = \"\";\n\n    for (const month in grouped) {\n      \/\/ Herstel de inline styles voor de maand-headings voor desktop\n      html += `<h2 style=\"margin-top: 2rem; font-size: 1.4rem; border-bottom: 2px solid #000;\">${month}<\/h2>`;\n      grouped[month].forEach(e => {\n        const date = new Date(e.datetime);\n        const ticketUrl = e.offers?.[0]?.url || e.url;\n\n        html += `\n          <div class=\"event-item-flex\">\n            <div class=\"event-item-info\">\n              <img decoding=\"async\" src=\"${e.image}\" alt=\"${e.artist}\" class=\"event-artist-image\" onerror=\"this.onerror=null;this.src='https:\/\/placehold.co\/50x50\/cccccc\/ffffff?text=NA';\"\/>\n              <div class=\"event-details-text\">\n                <div class=\"event-artist-name\">${e.artist}<\/div>\n                <div class=\"event-date-venue\">${date.toLocaleDateString(\"nl-NL\", { weekday: \"long\", day: \"numeric\", month: \"long\", year: \"numeric\" })}<\/div>\n                <div class=\"event-date-venue\">${e.venue.name}, ${e.venue.city} (${e.country})<\/div>\n              <\/div>\n            <\/div>\n            <div class=\"event-buttons-group\">\n              <button class=\"more-info-button-list\" data-event-id=\"${e.id}\">\n                Meer info\n              <\/button>\n              <a href=\"${ticketUrl}\" target=\"_blank\" class=\"tickets-button-list\" onclick=\"event.stopPropagation();\">\n                Tickets\n              <\/a>\n            <\/div>\n          <\/div>\n        `;\n      });\n    }\n\n    container.innerHTML = html;\n\n    const moreInfoButtons = document.querySelectorAll('.more-info-button-list');\n    moreInfoButtons.forEach(button => {\n      button.addEventListener('click', (e) => {\n        const eventId = e.target.dataset.eventId;\n        const clickedEvent = allEventsRaw.find(event => event.id === eventId);\n        if (clickedEvent) {\n          showModal(clickedEvent);\n        }\n      });\n    });\n  }\n\n  async function loadAllEvents() {\n    showSpinner();\n    \/\/ Verwijder deze regel niet, de initi\u00eble tekst staat al in de HTML\n    \/\/ document.getElementById(\"fmc-events\").innerHTML = \"\";\n\n    try {\n      const all = (await Promise.all(artists.map(fetchEvents))).flat();\n      allEventsRaw = all;\n      \n      if (all.length === 0) {\n        document.getElementById(\"fmc-events\").innerHTML = \"<p style='text-align:center;'>Geen evenementen gevonden.<\/p>\";\n      } else {\n        renderFilters(all);\n        renderEvents(all);\n      }\n    } catch (error) {\n      console.error(\"Fout bij het laden van alle evenementen:\", error);\n      document.getElementById(\"fmc-events\").innerHTML = \"<p style='text-align:center; color: red;'>Er is een fout opgetreden bij het laden van de evenementen. Probeer het later opnieuw.<\/p>\";\n    } finally {\n      hideSpinner();\n    }\n  }\n\n  loadAllEvents();\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Artiest: Alle artiesten Maand: Alle maanden Land: Alle landen Evenementen laden&#8230; &times; Tickets<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-7433","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/ninalynn.nl\/de\/wp-json\/wp\/v2\/pages\/7433","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ninalynn.nl\/de\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ninalynn.nl\/de\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ninalynn.nl\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ninalynn.nl\/de\/wp-json\/wp\/v2\/comments?post=7433"}],"version-history":[{"count":7,"href":"https:\/\/ninalynn.nl\/de\/wp-json\/wp\/v2\/pages\/7433\/revisions"}],"predecessor-version":[{"id":7441,"href":"https:\/\/ninalynn.nl\/de\/wp-json\/wp\/v2\/pages\/7433\/revisions\/7441"}],"wp:attachment":[{"href":"https:\/\/ninalynn.nl\/de\/wp-json\/wp\/v2\/media?parent=7433"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}