<script>
import { s__ } from '~/locale';

export default {
  props: {
    illustrationPath: {
      type: String,
      required: true,
    },
    helpPath: {
      type: String,
      required: true,
    },
  },
  computed: {
    paragraphText: () =>
      s__(
        `SecurityDashboard|
         The security dashboard displays the latest security report.
         Use it to find and fix vulnerabilities.`,
      ),
  },
};
</script>
<template>
  <div class="row empty-state">
    <div class="col-12">
      <div class="svg-content"><img :src="illustrationPath" /></div>
    </div>
    <div class="col-12">
      <div class="text-content text-center">
        <h4>{{ s__('SecurityDashboard|Monitor vulnerabilities in your code') }}</h4>
        <p>{{ paragraphText }}</p>
        <a :href="helpPath" class="btn btn-success" rel="nofollow"> {{ __('Learn more') }} </a>
      </div>
    </div>
  </div>
</template>
