<template>
  <div class="sources">
    <div :class="['sources__container', 'sources__container-' + sources.length]">
      <div class="sources__container-ring">
        <div
          v-for="(source, idx) in sources"
          :class="['sources__source', 'sources__source-' + idx]"
          :key="source.id"
        >
          {{ source }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['sources'],
}
</script>

<style lang="scss">
.sources {
  position: relative;
  width: 100%;
  height: 100%;

  &__container {
    position: absolute;
    left: 10%;
    top: 10%;
    width: 80%;
    height: 80%;
  }

  &__container-ring {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  &__source {
    position: absolute;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    background-color: #ffffff;
  }

  &__container-4,
  &__container-5,
  &__container-6 {
    .sources__source-0 { top: 20%; left: 100%; }
    .sources__source-1 { top: 80%; left: 100%; }
    .sources__source-2 { top: 80%; left: 0; }
    .sources__source-3 { top: 20%; left: 0; }
    .sources__source-4 { top: 0; left: 50%; }
    .sources__source-5 { top: 100%; left: 50%; }
  }
}
</style>
