<template>
  <div class="mx-report-summary-container">
    <report-teacher-summary-card class="mx-report-summary-item" :class="{'mx-report-summary-first':idx==0}"
      v-for="(group, idx) in data" :key="idx" :titles="group.titles" :subTitles="group.subTitles" />
  </div>
</template>
<script>
  import reportTeacherSummaryCard from "./reportTeacherSummaryCard.vue";
  export default {
    components: {
      reportTeacherSummaryCard
    },
    props: {
      data: {
        type: Array,
        default: () => [],
      },
    },
    data() {
      return {};
    },
  };
</script>
<style scoped>
  .mx-report-summary-container {
    display: flex;
  }

  .mx-report-summary-item {
    /* flex: 1; */
    padding: 20px 20px 10px 20px;
    width: 25%;
    text-align: center;
  }
  .mx-report-summary-item.mx-report-summary-first {
    text-align: left;
  }
</style>
