<commit_before><template>
  <header>
    <div class="header-ctrl">
      <router-link
        v-if="back"
        :to="backPath"
        :class="{ 'link-wrapper': true, 'backdrop': isWhite(color) }">
        <span hidden>Back</span>
        <feather-arrow-left :stroke="color" />
      </router-link>
      <slot name="custom-action-left"></slot>
    </div>

    <slot name="title"></slot>

    <div class="header-ctrl">
      <router-link
        v-if="settings"
        :to="{ path: '/settings' }"
        :class="{ 'link-wrapper': true, 'backdrop': isWhite(color) }">
        <span hidden>Settings</span>
        <feather-settings class="header-settings-icon" />
      </router-link>
      <slot name="custom-action-right"></slot>
    </div>
  </header>
</template>

<script>
  export default {
    name: 'AppHeader',

    props: {
      backPath: { type: [String, Object], default: '/' },
      back: { type: Boolean, default: false },
      settings: { type: Boolean, default: false },
      color: { type: String, default: 'black' }
    },

    components: {
      'feather-arrow-left': () =>
        import('vue-feather-icon/components/arrow-left' /* webpackChunkName: "general" */),
      'feather-settings': () =>
        import('vue-feather-icon/components/settings' /* webpackChunkName: "general" */)
    },

    methods: {
      isWhite (color) {
        return color === 'white'
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "~styles/z-index";

  header {
    box-shadow: 0 0 22px rgba(0, 0, 0, 0.05);
    background: var(--background-primary);
    display: flex;
    justify-content: space-between;<commit_msg>:lipstick: (header) Updated box shadow in header<commit_after><template>
  <header>
    <div class="header-ctrl">
      <router-link
        v-if="back"
        :to="backPath"
        :class="{ 'link-wrapper': true, 'backdrop': isWhite(color) }">
        <span hidden>Back</span>
        <feather-arrow-left :stroke="color" />
      </router-link>
      <slot name="custom-action-left"></slot>
    </div>

    <slot name="title"></slot>

    <div class="header-ctrl">
      <router-link
        v-if="settings"
        :to="{ path: '/settings' }"
        :class="{ 'link-wrapper': true, 'backdrop': isWhite(color) }">
        <span hidden>Settings</span>
        <feather-settings class="header-settings-icon" />
      </router-link>
      <slot name="custom-action-right"></slot>
    </div>
  </header>
</template>

<script>
  export default {
    name: 'AppHeader',

    props: {
      backPath: { type: [String, Object], default: '/' },
      back: { type: Boolean, default: false },
      settings: { type: Boolean, default: false },
      color: { type: String, default: 'black' }
    },

    components: {
      'feather-arrow-left': () =>
        import('vue-feather-icon/components/arrow-left' /* webpackChunkName: "general" */),
      'feather-settings': () =>
        import('vue-feather-icon/components/settings' /* webpackChunkName: "general" */)
    },

    methods: {
      isWhite (color) {
        return color === 'white'
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "~styles/z-index";

  header {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    background: var(--background-primary);
    display: flex;
    justify-content: space-between;
{'fraction_non_alphanumeric': 0.18477279566656635, 'fraction_numerical': 0.005416792055371652, 'mean_word_length': 2.5026343519494203, 'pattern_counts': {'":': 0, '<': 57, '<?xml version=': 0, '>': 61, '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': '4124340', 'n_tokens_mistral': 1111, 'n_tokens_neox': 1072, 'n_words': 217}