<template>
  <div class="container">
    <div class="hero-content">
      <br>

      <div class="row">
        <div class="col-lg-8">
          <div v-for="(category, heading) in members" :key="category">
            <!-- Main categories -->
            <h5 :id="heading" class="wow fadeInUp" data-wow-delay="1.2s">
              # {{ heading }}
            </h5>

            <!-- If category is an array... -->
            <ul v-if="Array.isArray(category)">
              <li v-for="item in category" :key="item">
                {{ item }}
              </li>
            </ul>
            <!-- If the category is an object... -->
            <ul v-for="(sub_category, sub_heading) in category" v-else :key="sub_category">
              <!-- Sub categories -->
              <h6 :id="sub_heading">
                ## {{ sub_heading }}
              </h6>

              <!-- If category is an array... -->
              <ul v-if="Array.isArray(sub_category)">
                <li v-for="item in sub_category" :key="item">
                  {{ item }}
                </li>
              </ul>
              <!-- If the category is an object... -->
              <ul v-for="(subsub_category, subsub_heading) in sub_category" v-else :key="subsub_category">
                <h6 :id="subsub_heading">
                  ### {{ subsub_heading }}
                </h6>

                <!-- If category is an array... -->
                <ul v-if="Array.isArray(subsub_category)">
                  <li v-for="item in subsub_category" :key="item">
                    {{ item }}
                  </li>
                </ul>

                <!-- If the current iterated item is the last of the currently
                     iterated object, add a line-break... -->
                <br
                  v-if="(Object.keys(sub_category).length - 1)
                    !== Object.keys(sub_category).indexOf(subsub_heading)"
                >
              </ul>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import members from 'assets/json/members.json'

export default {
  name: 'MembersListing',
  data: () => {
    return {
      members
    }
  }
}
</script>
