25/lib/mse25_web/controllers/page_html/events.html.heex

<div class="head">
  <h1><%= @page_title %></h1>
  <%= raw(@contents) %>
  <p>
    <%= if @nosearch? do %>
      Gå direkt till:
    <% end %>
  </p>
  <ul class="months">
    <%= for {year, events} <- @events do %>
      <li>
        <a href={"#y" <> year}><%= year %></a> (<%= Enum.count(events) %>)
      </li>
    <% end %>
  </ul>
  <form method="get" action="/evenemang">
    <p>
      <%= if @nosearch? do %>
        Eller
      <% end %>
      <label for="q">sök innehåll</label>:
      <input type="search" value={@q} name="q" id="q" size="7" />
      <button>Sök</button>
    </p>
  </form>
</div>

<section id="map">
  <h2>Geografisk utspridning</h2>
  <figure>
    <div id="leaflet" class="interactive-map"></div>
  </figure>
</section>

<div class="bookmarks">
  <%= for {year, events} <- @events do %>
    <section class="card" id={"y" <> year}>
      <h2 class="sticky bookmark-date"><%= year %></h2>
      <div class="events">
        <%= for event <- events do %>
          <article class="event" vocab="https://schema.org/" typeof="Event">
            <h3>
              <a property="name" href={"/" <> event["slug"]}><%= event["title"] %></a>
            </h3>
            <div>
              <p property="description"><%= event["lead"] %></p>
              <%= if hilights?(event) do %>
                <p>
                  Personliga höjdpunkter: <%= rdfa_bandlist(event["bands"]) |> raw %>
                </p>
              <% end %>
              <%= if missed?(event) do %>
                <p>
                  Band jag missade: <%= bandlist(event["mia"]) %>
                </p>
              <% end %>
              <%= if opening_acts?(event) do %>
                <p>
                  Förband: <%= event["bands"] |> Enum.drop(1) |> rdfa_bandlist() |> raw %>
                </p>
              <% end %>
            </div>
            <%= if event["poster"] do %>
              <img
                property="thumbnail"
                loading="lazy"
                src={"https://n.madr.se/assets/" <> event["poster"] <> "?key=poster"}
                alt="affisch"
                width="150"
              />
            <% end %>
          </article>
        <% end %>
      </div>
    </section>
  <% end %>
</div>