extends ../templates/default-page.pug

block vars
  - var noLogo=true
  - var title='Technologies Overview'

block content
  .js--filter(
    data-index=JSON.stringify(groupByFirstLetter(radar))
  )
    .headline-group
      .hero-headline
        | Technologies Overview
    .filter
      .nav
        .nav__item
          a.badge.badge--big(
            href='#'
            v-on:click="setRing('all')"
            v-bind:class=`ring === 'all' ? 'badge--neutral' : ''`
          ) all
        each items, ringName in groupByRing(radar)
          .nav__item
            a.badge.badge--big.badge--empty(
              href='#'
              v-on:click=`setRing('${ringName}')`
              v-bind:class=`ring === '${ringName}' ? 'badge--${ringName}' : ''`
            )= ringName

    div.letter-index
      each items, letter in groupByFirstLetter(radar)
        .letter-index__group(
          v-if=`isGroupVisible('${letter}')`
        )
          .letter-index__letter= letter
          .letter-index__items
            .item-list
              .item-list__list
                each item in items
                  a.item.item--big.item--no-leading-border.item--no-trailing-border(
                    href=`/${item.quadrant}/${item.name}.html`
                    v-if=`isRingVisible('${item.attributes.ring}')`
                  )
                    .split.split--align-top
                      .split__left
                        .item__title
                          = item.attributes.title
                          if item.isNew
                            = ' '
                            span.is-new new
                        if item.attributes.info
                          .item__info= item.attributes.info
                      .split__right
                        .nav
                          .nav__item
                            = translate(item.quadrant)
                          .nav__item
                            span(class=`badge badge--${item.attributes.ring}`)
                              = item.attributes.ring