<commit_before><template>
  <div class="apos-modal-tabs">
    <ul class="apos-modal-tabs__tabs">
      <li
        class="apos-modal-tabs__tab" v-for="tab in tabs"
        :key="tab.name"
      >
        <button
          :id="tab.name" class="apos-modal-tabs__btn"
          :aria-selected="tab.name === currentTab ? true : false"
          @click="selectTab"
        >
          {{ tab.label }}
          <span v-if="tabErrors[tab.name] && tabErrors[tab.name].length" class="apos-modal-tabs__label apos-modal-tabs__label--error">
            {{ tabErrors[tab.name].length }}
            <span v-if="tabErrors[tab.name].length > 1">
              Errors
            </span>
            <span v-else>
              Error
            </span>
          </span>
        </button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'AposModalTabs',
  props: {
    tabs: {
      required: true,
      type: Array
    },
    current: {
      type: String,
      default: ''
    },
    errors: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  emits: [ 'select-tab' ],
  computed: {
    currentTab() {
      return this.current || this.tabs[0].name;
    },
    tabErrors() {
      const errors = {};
      for (const key in this.errors) {
        errors[key] = [];
        for (const errorKey in this.errors[key]) {
          if (this.errors[key][errorKey]) {
            errors[key].push(key);
          }
        }
      }
      return errors;
    }
  },
  methods: {
    selectTab: function (e) {
      const tab = e.target;
      const id = tab.id;
      this.$emit('select-tab', id);
    }
  }
};
</script>

<style lang="scss" scoped>
.apos-modal-tabs {
  display: flex;
  height: 100%;
}

.apos-modal-tabs__tabs {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: var(--a-base-9);
}

.apos-modal-tabs__tab {
  display: block;
}
<commit_msg>wrap error label into method<commit_after><template>
  <div class="apos-modal-tabs">
    <ul class="apos-modal-tabs__tabs">
      <li
        class="apos-modal-tabs__tab" v-for="tab in tabs"
        :key="tab.name"
      >
        <button
          :id="tab.name" class="apos-modal-tabs__btn"
          :aria-selected="tab.name === currentTab ? true : false"
          @click="selectTab"
        >
          {{ tab.label }}
          <span v-if="tabErrors[tab.name] && tabErrors[tab.name].length" class="apos-modal-tabs__label apos-modal-tabs__label--error">
            {{ tabErrors[tab.name].length }} {{ generateErrorLabel(tabErrors[tab.name].length) }}
          </span>
        </button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'AposModalTabs',
  props: {
    tabs: {
      required: true,
      type: Array
    },
    current: {
      type: String,
      default: ''
    },
    errors: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  emits: [ 'select-tab' ],
  computed: {
    currentTab() {
      return this.current || this.tabs[0].name;
    },
    tabErrors() {
      const errors = {};
      for (const key in this.errors) {
        errors[key] = [];
        for (const errorKey in this.errors[key]) {
          if (this.errors[key][errorKey]) {
            errors[key].push(key);
          }
        }
      }
      return errors;
    }
  },
  methods: {
    generateErrorLabel(errorCount) {
      let label = 'Error';
      if (errorCount > 1) {
        label += 's';
      }
      return label;
    },
    selectTab: function (e) {
      const tab = e.target;
      const id = tab.id;
      this.$emit('select-tab', id);
    }
  }
};
</script>

<style lang="scss" scoped>
.apos-modal-tabs {
  display: flex;
  height: 100%;
}

.apos-modal-tabs__tabs {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: var(--a-base-9);
}

.apos-modal-tabs__tab {
  display: block;
}

{'fraction_non_alphanumeric': 0.16333754740834386, 'fraction_numerical': 0.005562579013906448, 'mean_word_length': 1.8583815028901733, 'pattern_counts': {'":': 0, '<': 37, '<?xml version=': 0, '>': 39, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2142953', 'n_tokens_mistral': 1356, 'n_tokens_neox': 1350, 'n_words': 255}