<script>
  window.currentEvent = [{
    id: "$eventId",
    title: "$event.title",
    coordinates: "$event.locationCoordinates"
  }];
</script>

#if($event.title)
<div class="event-page">
  <div class="main-container">

    <h1 class="heading">$event.title</h1>

    <div class="jk-event-page-info jk-event-page-info__image-facts-row sv-row sv-use-margins">
      <button class="env-button env-button--secondary button--save" data-type="event" data-object="$eventId">
        $translationSave
      </button>

      <div class="jk-event-page-info__hero-image-container sv-column-8">
        #if(!$event.imageUri.empty)
          <img class="jk-event-page-info__hero-image jk-event-page-info__hero-image--mobile" src="$event.imageUrl" alt="$event.imageAltText">
        #else
          <div class="jk-event-page-info__hero-image-placeholder">&nbsp;</div>
        #end
      </div>
    </div>

    ## Title + preamble + text
    <div class="text-container">
      <h2>$event.title</h2>

      #if(!$event.ingress.empty)
        #set($cleanIngress = $event.ingress.replaceAll("(\r\n|\r|\n)", "<br />"))
        <p class="preamble">$cleanIngress</p>
      #end

      #if(!$event.text.empty)
        #set($cleanText = $event.text.replaceAll("(\r\n|\r|\n)", "<br />"))
        <p class="normal">$cleanText</p>
      #end
    </div>

   #set($expectedLang = "sv")
   #if($locale == "en_GB")
     #set($expectedLang = "en")
   #end

   #set($otherOccasionCount = 0)
   #if($event.upcomingOccasions && $event.upcomingOccasions.size() > 0)
      #foreach($occasion in $event.upcomingOccasions)
        #if("$!occasion.id" != "$eventId"
            && $occasion.hasPassed == false
            && "$!occasion.language" == $expectedLang)
          #set($otherOccasionCount = $otherOccasionCount + 1)
        #end
      #end
    #end

    #if($otherOccasionCount > 0)
      <h2 class="upcoming-occasions__title">
        #if($locale == "en_GB")
          More opportunities
        #else
          Fler tillfällen
        #end
      </h2>

      <div class="upcoming-occasions">
        #foreach($occasion in $event.upcomingOccasions)
          #if("$!occasion.id" != "$eventId" && $occasion.hasPassed == false && "$!occasion.language" == $expectedLang)
            <div class="upcoming-occasion-item">
              <ul class="upcoming-occasion__facts">
                <li>
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                    <path d="M17 3H21C21.2652 3 21.5196 3.10536 21.7071 3.29289C21.8946 3.48043 22 3.73478 22 4V20C22 20.2652 21.8946 20.5196 21.7071 20.7071C21.5196 20.8946 21.2652 21 21 21H3C2.73478 21 2.48043 20.8946 2.29289 20.7071C2.10536 20.5196 2 20.2652 2 20V4C2 3.73478 2.10536 3.48043 2.29289 3.29289C2.48043 3.10536 2.73478 3 3 3H7V1H9V3H15V1H17V3ZM15 5H9V7H7V5H4V9H20V5H17V7H15V5ZM20 11H4V19H20V11Z" fill="black"/>
                  </svg>
                  <span>
                    #set($rawDate = "$occasion.date")
                    #set($d = $rawDate.toLowerCase())

                    #if($locale == "en_GB")
                      #set($d = $d.replace("jan","Jan"))
                      #set($d = $d.replace("feb","Feb"))
                      #set($d = $d.replace("mar","Mar"))
                      #set($d = $d.replace("apr","Apr"))
                      #set($d = $d.replace("maj","May"))
                      #set($d = $d.replace("jun","Jun"))
                      #set($d = $d.replace("jul","Jul"))
                      #set($d = $d.replace("aug","Aug"))
                      #set($d = $d.replace("sep","Sep"))
                      #set($d = $d.replace("okt","Oct"))
                      #set($d = $d.replace("nov","Nov"))
                      #set($d = $d.replace("dec","Dec"))
                    #end

                    $d
                  </span>
                </li>

                <li>
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                    <path d="M12 22C6.477 22 2 17.523 2 12C2 6.477 6.477 2 12 2C17.523 2 22 6.477 22 12C22 17.523 17.523 22 12 22ZM12 20C14.1217 20 16.1566 19.1571 17.6569 17.6569C19.1571 16.1566 20 14.1217 20 12C20 9.87827 19.1571 7.84344 17.6569 6.34315C16.1566 4.84285 14.1217 4 12 4C9.87827 4 7.84344 4.84285 6.34315 6.34315C4.84285 7.84344 4 9.87827 4 12C4 14.1217 4.84285 16.1566 6.34315 17.6569C7.84344 19.1571 9.87827 20 12 20ZM13 12H17V14H11V7H13V12Z" fill="black"/>
                  </svg>
                  $occasion.time
                </li>

                <li>
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                    <mask id="mask0_2812_2791" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
                      <rect width="24" height="24" fill="#D9D9D9"/>
                    </mask>
                    <g mask="url(#mask0_2812_2791)">
                      <path d="M12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22ZM12 17.5C12.75 16.75 13.4167 15.975 14 15.175C14.5 14.4917 14.9583 13.7417 15.375 12.925C15.7917 12.1083 16 11.3 16 10.5C16 9.4 15.6083 8.45833 14.825 7.675C14.0417 6.89167 13.1 6.5 12 6.5C10.9 6.5 9.95833 6.89167 9.175 7.675C8.39167 8.45833 8 9.4 8 10.5C8 11.3 8.20833 12.1083 8.625 12.925C9.04167 13.7417 9.5 14.4917 10 15.175C10.5833 15.975 11.25 16.75 12 17.5ZM12 12C11.5833 12 11.2292 11.8542 10.9375 11.5625C10.6458 11.2708 10.5 10.9167 10.5 10.5C10.5 10.0833 10.6458 9.72917 10.9375 9.4375C11.2292 9.14583 11.5833 9 12 9C12.4167 9 12.7708 9.14583 13.0625 9.4375C13.3542 9.72917 13.5 10.0833 13.5 10.5C13.5 10.9167 13.3542 11.2708 13.0625 11.5625C12.7708 11.8542 12.4167 12 12 12Z" fill="black"/>
                    </g>
                  </svg>
                  $occasion.location
                </li>
              </ul>

              #set($datePart = "")
              #if($occasion.structuredStartDate)
                #set($s = "$!occasion.structuredStartDate")
                #if($s.length() >= 10)
                  #set($datePart = $s.substring(0, 10))
                #end
              #end

              #set($titleForSlug = "")
              #if($occasion.title)
                #set($titleForSlug = "$!occasion.title")
              #else
                #set($titleForSlug = "$!event.title")
              #end

              #set($slug = $titleForSlug.toLowerCase())
              #set($slug = $slug.replaceAll("&", " och "))
              #set($slug = $slug.replaceAll("å", "a"))
              #set($slug = $slug.replaceAll("ä", "a"))
              #set($slug = $slug.replaceAll("ö", "o"))
              #set($slug = $slug.replaceAll("ü", "u"))
              #set($slug = $slug.replaceAll("æ", "ae"))
              #set($slug = $slug.replaceAll("ø", "o"))
              #set($slug = $slug.replaceAll("ß", "ss"))
              #set($slug = $slug.replaceAll("[^a-z0-9]+", "-"))
              #set($slug = $slug.replaceAll("(^-+|-+$)", ""))
              #if($slug.length() > 80)
                #set($slug = $slug.substring(0,80))
                #set($slug = $slug.replaceAll("(^-+|-+$)", ""))
              #end

              #set($prettyTail = $slug)
              #if($datePart && $slug)
                #set($prettyTail = "${datePart}-${slug}")
              #elseif($datePart)
                #set($prettyTail = $datePart)
              #end

              #if($locale == "en_GB")
                #set($prettyPath = "/en/events/event/$prettyTail")
              #else
                #set($prettyPath = "/alla-evenemang/evenemang/$prettyTail")
              #end

              #if($locale == "en_GB")
                <a class="button--blue button--arrow env-button env-button--secondary" href="$prettyPath?id=$occasion.id">
                  <span>Visit the event</span>
                  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
                    <path d="M12.129 8.74952L8.106 4.72652L9.1665 3.66602L15 9.49952L9.1665 15.333L8.106 14.2725L12.129 10.2495H3V8.74952H12.129Z" fill="white"/>
                  </svg>
                </a>
              #else
                <a class="button--blue button--arrow env-button env-button--secondary" href="$prettyPath?id=$occasion.id">
                  <span>Till evenemanget</span>
                  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
                    <path d="M12.129 8.74952L8.106 4.72652L9.1665 3.66602L15 9.49952L9.1665 15.333L8.106 14.2725L12.129 10.2495H3V8.74952H12.129Z" fill="white"/>
                  </svg>
                </a>
              #end

            </div>
          #end
        #end
      </div>
    #end

  </div>
</div>

#else
  <p>
    #if($locale == "en_GB")
      The event could not be found.
    #else
      Evenemanget kan inte hittas.
    #end
  </p>
#end
