<template>
  <div class="block" v-bind:class="{ highlight: highlight }">
    <strong>{{indexName}}</strong> displays videos and channels that match your search but is not the publisher, nor the owner.
    If you notice any problems with a video, report it to the corresponding administrator on the PeerTube website.
  </div>
</template>

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

  .block {
    font-style: italic;
    color: $orange;
  }

  .highlight {
    color: #fff;
    background-color: $orange-darken;
    font-style: normal;
    padding: 20px;
  }

</style>

<script lang="ts">
  import Vue from 'vue'

  export default Vue.extend({
    props: {
      indexName: String,
      highlight: Boolean
    }
  })
</script>
