<template>
  <slide-template title="problem__title">
    <div
      class="fit row"
      >
      <div class="col-sm-6 col-xs-12 q-pa-lg"
        v-for="(item, idx) in problems"
        :key="idx"
        >
        <problem-section-item
          :icon="item.icon"
          :title="item.title"
          :description="item.description"
        />
      </div>
    </div>
  </slide-template>
</template>

<script setup lang="ts">
  import SlideTemplate from 'components/SlideTemplate.vue'
  import ProblemSectionItem from 'components/ProblemSectionItem.vue'

  const problems = [
    { id: 1, icon: 'mdi-folder-multiple-outline', title: 'problem__1', description: 'problem__1_description' },
    { id: 2, icon: 'mdi-account-group-outline', title: 'problem__2', description: 'problem__2_description' },
    { id: 3, icon: 'mdi-chat-processing-outline', title: 'problem__3', description: 'problem__3_description' },
    { id: 4, icon: 'mdi-lock-check-outline', title: 'problem__4', description: 'problem__4_description' },
  ]
  
</script>

<style scoped>
</style>
