<commit_before><template>
  <ApolloQuery
    :query="require('../../graphql/queries/genres/find.graphql')"
    :variables="{ id }"
    notifyOnNetworkStatusChange
  >
    <template slot-scope="{ result: { loading, error, data } }">
      <section class="uk-section">
        <div class="uk-container">
          <ul class="uk-breadcrumb uk-margin-small-bottom">
            <li><router-link to="/browse">Browse</router-link></li>
            <li><router-link to="/browse/genres">Genres</router-link></li>
            <li>
              {{ (data ? data.genre.description : 'Loading...')  }}
            </li>
          </ul>

          <h3 class="uk-margin-remove-top">
            {{ (data ? data.genre.description : 'Loading...') }}
          </h3>

          <div v-if="loading" class="uk-text-center">
            <div uk-spinner />
          </div>

          <div v-else-if="error" class="uk-width-1-1">
            <div class="uk-alert-danger" uk-alert>
              <a class="uk-alert-close" uk-close></a>
              <p>An error occurred: {{ error.message }}</p>
            </div>
          </div>

          <div v-else-if="data.genre.groups.length !== 0">
            <div class="uk-grid-medium@m uk-grid-small@s" uk-grid>
              <div
                v-for="group in data.genre.groups"
                :key="group.id"
                class="uk-width-1-2 uk-width-1-3@s uk-width-1-4@m uk-width-1-5@l"
              >
                <GroupCard :group="group" />
              </div>
            </div>
          </div>

          <div v-else class="uk-width-1-1">
            <div class="uk-alert-primary" uk-alert>
              <a class="uk-alert-close" uk-close></a>
              <p>No results. <u><a class="uk-link-text" @click="$router.go(-1)">Go back</a></u></p>
            </div>
          </div>
        </div>
      </section>
    </template>
  </ApolloQuery>
</template>

<script>
import GroupCard from '@/components/GroupCard.vue';

export default {
  name: 'Genre',
  props: {
    id: String,<commit_msg>Move container out of ApolloQuery<commit_after><template>
  <section class="uk-section">
    <div class="uk-container">
      <ApolloQuery
        :query="require('../../graphql/queries/genres/find.graphql')"
        :variables="{ id }"
        notifyOnNetworkStatusChange
      >
        <template slot-scope="{ result: { loading, error, data } }">
          <ul class="uk-breadcrumb uk-margin-small-bottom">
            <li><router-link to="/browse">Browse</router-link></li>
            <li><router-link to="/browse/genres">Genres</router-link></li>
            <li>
              {{ (data ? data.genre.description : 'Loading...')  }}
            </li>
          </ul>

          <h3 class="uk-margin-remove-top">
            {{ (data ? data.genre.description : 'Loading...') }}
          </h3>

          <div v-if="loading" class="uk-text-center">
            <div uk-spinner />
          </div>

          <div v-else-if="error" class="uk-width-1-1">
            <div class="uk-alert-danger" uk-alert>
              <a class="uk-alert-close" uk-close></a>
              <p>An error occurred: {{ error.message }}</p>
            </div>
          </div>

          <div v-else-if="data.genre.groups.length !== 0">
            <div class="uk-grid-medium@m uk-grid-small@s" uk-grid>
              <div
                v-for="group in data.genre.groups"
                :key="group.id"
                class="uk-width-1-2 uk-width-1-3@s uk-width-1-4@m uk-width-1-5@l"
              >
                <GroupCard :group="group" />
              </div>
            </div>
          </div>

          <div v-else class="uk-width-1-1">
            <div class="uk-alert-primary" uk-alert>
              <a class="uk-alert-close" uk-close></a>
              <p>No results. <u><a class="uk-link-text" @click="$router.go(-1)">Go back</a></u></p>
            </div>
          </div>
        </template>
      </ApolloQuery>
    </div>
  </section>
</template>

<script>
import GroupCard from '@/components/GroupCard.vue';

export default {
  name: 'Genre',
  props: {
    id: String,
{'fraction_non_alphanumeric': 0.186284046692607, 'fraction_numerical': 0.007782101167315175, 'mean_word_length': 1.648422408242112, 'pattern_counts': {'":': 0, '<': 113, '<?xml version=': 0, '>': 113, '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': '1054526', 'n_tokens_mistral': 1366, 'n_tokens_neox': 1327, 'n_words': 227}