<template>
  <!-- eslint-disable vue/no-v-html -->
  <div class="instrument-widget">
    <div
      class="instrument-widget__description"
      v-html="value.description"
    />
    <router-link
      :to="{ name: 'instrument', params: { slug: value.slug }, query: { hideCloseButton: true } }"
      class="instrument-widget__button button"
      :style="{
        borderColor: value.foreground,
      }"
      target="_blank"
    >
      {{ $flavor.textInstrument }} anzeigen
    </router-link>
  </div>
</template>

<script>
// todo: use dynamic css class with v-bind once we're on Vue 3: https://vuejs.org/api/sfc-css-features.html#v-bind-in-css
export default {
  props: ['value'],
};
</script>

<style scoped lang="scss">
@import 'styles/_variables.scss';

.instrument-widget {
  margin-bottom: $small-spacing;

  &__description {
    margin-bottom: 25px;
  }

  &__button {
  }
}
</style>
