<template>
  <div class="job-item">
    <h6>{{ title }}</h6>
    <p v-if="state">Started: {{ state }}</p>
    <b-progress :value="progress" />
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      required: true
    },
    state: {
      type: String,
      required: true
    },
    progress: {
      // type: Number,
      required: false,
      default: 0
    }
  }
}
</script>

<style lang="sass" scoped>
p
  font-size: 0.8em
  color: $secondary-text-color
  margin-bottom: 0.7em

h6
  font-size: 0.95em
  color: $primary-text-color
  margin-bottom: 0.2em

.job-item
  padding: 1em 1em 1.5em
  &:hover
    background: #f5f5f5
</style>
