extends /template.pug

block vars
  - const title = 'Meetups'
  - const description = 'Eine Liste von Bitcoin-Meetups und Einundzwanzig-Treffen im D/A/CH-Raum.'
  - const filterOfficial = (list, official) => list.filter(meetup => meetup.name.startsWith('Einundzwanzig Meetup ') === official)
  - let j = 0

block main
  #meetups.wrap
    section
      h1= title
      p= description

      :markdown-it(html linkify typographer)
        Neue Meetups können gerne [per Pull Request](https://github.com/Einundzwanzig-Podcast/einundzwanzig.space/edit/master/content/meetups.json) hinzugefügt werden.

        Die Vorlage für das Telegram-Gruppenbild findest du im [Media Kit](/media).

      #map
        h2 Einundzwanzig Meetups
        ul.meetups
          each m in filterOfficial(meetups, true)
            li.official(style=`top:${m.top}%;left:${m.left}%;`)
              a(href=m.url target="_blank" rel="nofollow noopener")
                .dot(style=`animation-delay:${((j*2000) + random(3000))}ms;animation-duration:${meetups.length*2}s;`)
                = m.name.replace('Einundzwanzig Meetup ', '')
              - j++

        h2 Weitere Meetups
        ul.meetups
          each m in filterOfficial(meetups, false)
            li(style=`top:${m.top}%;left:${m.left}%;`)
              a(href=m.url target="_blank" rel="nofollow noopener")
                .dot(style=`animation-delay:${((j*2000) + random(3000))}ms;animation-duration:${meetups.length*2}s;`)
                = m.name
              - j++

        img(src=assetPath('/img/dach.svg') alt="DE, AT, CH")