<commit_before><template>

  <CoreBase
    :appBarTitle="currentPageAppBarTitle"
    :immersivePage="currentPageIsImmersive"
    :immersivePagePrimary="immersivePagePrimary"
    :immersivePageRoute="immersivePageRoute"
    :immersivePageIcon="immersivePageIcon"
    :toolbarTitle="currentPageAppBarTitle"
    :showSubNav="canManageContent && !currentPageIsImmersive"
  >
    <DeviceTopNav slot="sub-nav" />

    <transition name="delay-entry">
      <WelcomeModal
        v-if="welcomeModalVisible"
        @submit="hideWelcomeModal"
      />
    </transition>

    <KPageContainer>
      <router-view />
    </KPageContainer>
  </CoreBase>

</template>


<script>

  import { mapState, mapGetters, mapActions } from 'vuex';
  import CoreBase from 'kolibri.coreVue.components.CoreBase';
  import { ContentWizardPages, PageNames } from '../constants';
  import DeviceTopNav from './DeviceTopNav';
  import WelcomeModal from './WelcomeModal';

  export default {
    name: 'DeviceIndex',
    components: {
      CoreBase,
      WelcomeModal,
      DeviceTopNav,
    },
    computed: {
      ...mapGetters(['canManageContent']),
      ...mapState(['pageName', 'welcomeModalVisible']),
      ...mapState('coreBase', ['appBarTitle']),
      ...mapGetters('coreBase', [
        'currentPageIsImmersive',
        'immersivePageIcon',
        'immersivePageRoute',
        'inContentManagementPage',
      ]),
      currentPageAppBarTitle() {
        if (this.pageName === PageNames.USER_PERMISSIONS_PAGE) {
          return this.$tr('permissionsLabel');
        } else {
          return this.appBarTitle || this.$tr('deviceManagementTitle');
        }
      },
      immersivePagePrimary() {
        // When the icon is an arrow, it should true for Primary with one
        // exception: The SELECT_CONTENT page.
        return (
          this.immersivePageIcon === 'arrow_back' &&
          this.pageName !== ContentWizardPages.SELECT_CONTENT
        );<commit_msg>Fix dropdown not flowing over in Device settings page<commit_after><template>

  <CoreBase
    :appBarTitle="currentPageAppBarTitle"
    :immersivePage="currentPageIsImmersive"
    :immersivePagePrimary="immersivePagePrimary"
    :immersivePageRoute="immersivePageRoute"
    :immersivePageIcon="immersivePageIcon"
    :toolbarTitle="currentPageAppBarTitle"
    :showSubNav="canManageContent && !currentPageIsImmersive"
  >
    <DeviceTopNav slot="sub-nav" />

    <transition name="delay-entry">
      <WelcomeModal
        v-if="welcomeModalVisible"
        @submit="hideWelcomeModal"
      />
    </transition>

    <KPageContainer :style="containerStyles">
      <router-view />
    </KPageContainer>
  </CoreBase>

</template>


<script>

  import { mapState, mapGetters, mapActions } from 'vuex';
  import CoreBase from 'kolibri.coreVue.components.CoreBase';
  import { ContentWizardPages, PageNames } from '../constants';
  import DeviceTopNav from './DeviceTopNav';
  import WelcomeModal from './WelcomeModal';

  export default {
    name: 'DeviceIndex',
    components: {
      CoreBase,
      WelcomeModal,
      DeviceTopNav,
    },
    computed: {
      ...mapGetters(['canManageContent']),
      ...mapState(['pageName', 'welcomeModalVisible']),
      ...mapState('coreBase', ['appBarTitle']),
      ...mapGetters('coreBase', [
        'currentPageIsImmersive',
        'immersivePageIcon',
        'immersivePageRoute',
        'inContentManagementPage',
      ]),
      containerStyles() {
        // Need to override overflow rule for setting page
        if (this.$route.name === PageNames.DEVICE_SETTINGS_PAGE) {
          return {
            overflowX: 'inherit',
          };
        }
        return {};
      },
      currentPageAppBarTitle() {
        if (this.pageName === PageNames.USER_PERMISSIONS_PAGE) {
          return this.$tr('permissionsLabel');
        } else {
          return this.appBarTitle || this.$tr('deviceManagementTitle');
        }
      },
      immersivePagePrimary() {
        // When the icon is an arrow, it should true for Primary with one
        // exception: The SELECT_CONTENT page.
        return (
          this.immersivePageIcon === 'arrow_back' &&
          this.pageName !== ContentWizardPages.SELECT_CONTENT
        );
{'fraction_non_alphanumeric': 0.12349752533584728, 'fraction_numerical': 0.0, 'mean_word_length': 2.851179673321234, 'pattern_counts': {'":': 0, '<': 27, '<?xml version=': 0, '>': 27, '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': '6076297', 'n_tokens_mistral': 1252, 'n_tokens_neox': 1235, 'n_words': 223}