<template>
  <div class="form areas-interests">
    <div class="row no-space-xs">
      <div
        v-for="(category, index) in categories"
        :key="category.id"
        class="col-xs-12"
        :class="{ 'col-ms-6': !Number(interests_categories), 'bottom-border-gray': Number(interests_categories) }"
      >
        <div class="content-box vertical-padding-small">
          <label class="checkbox checkbox-medium">
            <input
              type="checkbox"
              :checked="category.checked"
              :name="`categories[${category.id}][status]`"
              :id="category.id"
              class="checkbox-entry js-check-control"
              v-model="categories[index].checked"
              @change="() => parentCheckbox(index)"
            />
            <span class="checkbox-text interests-title text-ellipsis" :class="{ 'text-bold': Number(interests_categories) }">
              {{ category.name }}
            </span>
          </label>
          <div v-if="Number(interests_categories) && typeof category.children != 'undefined' && category.children" class="row no-space-xs middle-xs">
            <div v-for="(children, childrenIndex) in category.children" class="col-xs-12 col-ms-6">
              <div class="content-box">
                <label class="checkbox checkbox-medium">
                  <input
                    type="checkbox"
                    :checked="children.checked || category.checked"
                    :name="`categories[${category.id}][${children.id}]`"
                    :data-parent-id="`${category.id}`"
                    :id="`${children.id}`"
                    class="checkbox-entry js-check-controlled"
                    :class="`${category.id}`"
                    v-model="categories[index].children[childrenIndex].checked"
                    @change="() => childrenCheckbox(index)"
                  />
                  <span class="checkbox-text text-ellipsis">{{ children['name'] }}</span>
                </label>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style src="../../identity.css"></style>
<style scoped src="./styles.css"></style>

<script src="./scripts.js"></script>
