<commit_before><template>
  <div class="lists">
    <div class="row">
      <div class="flex xs12 lg6">
        <va-card class="mb-4">
          <va-list>
            <va-list-label>
              {{ t('lists.customers') }}
            </va-list-label>

            <template v-for="(customer, i) in customers" :key="'item' + customer.id">
              <va-list-item clickable @click="notify(customer.name)">
                <va-list-item-section class="ml-2" avatar>
                  <va-avatar>
                    <img :src="customer.picture" :alt="customer.name" />
                  </va-avatar>
                </va-list-item-section>

                <va-list-item-section>
                  <va-list-item-label>
                    {{ customer.name }}
                  </va-list-item-label>

                  <va-list-item-label caption>
                    {{ customer.address }}
                  </va-list-item-label>
                </va-list-item-section>

                <va-list-item-section icon>
                  <va-icon name="eye" color="gray" />
                </va-list-item-section>
              </va-list-item>

              <va-list-separator v-if="i < customers.length - 1" :key="'separator' + customer.id" />
            </template>
          </va-list>
        </va-card>

        <va-card>
          <va-list>
            <va-list-label>
              {{ t('lists.recentMessages') }}
            </va-list-label>

            <template v-for="(customer, i) in customers" :key="'item' + customer.id">
              <va-list-item clickable @click="toggleStar(customer)">
                <va-list-item-section icon>
                  <va-icon v-if="customer.starred" name="star" color="warning" />
                </va-list-item-section>

                <va-list-item-section avatar>
                  <va-avatar>
                    <img :src="customer.picture" :alt="customer.name" />
                  </va-avatar>
                </va-list-item-section>

                <va-list-item-section>
                  <va-list-item-label>
                    {{ customer.name }}
                  </va-list-item-label>
                </va-list-item-section>

                <va-list-item-section icon>
                  <va-icon :name="getGenderIcon(customer.gender)" :color="getGenderColor(customer.gender)" />
                </va-list-item-section>
              </va-list-item>

              <va-list-separator v-if="i < customers.length - 1" :key="'separator' + customer.id" />
            </template>

            <va-list-separator fit spaced />

            <va-list-label color="gray">
              {{ t('lists.archieved') }}
            </va-list-label>

            <template v-for="(customer, i) in archived" :key="'item' + customer.id">
              <va-list-item>
                <va-list-item-section icon>
                  <va-icon v-if="customer.starred" name="star" color="warning" />
                </va-list-item-section>

                <va-list-item-section avatar>
                  <va-avatar>
                    <img :src="customer.picture" :alt="customer.name" />
                  </va-avatar>
                </va-list-item-section>

                <va-list-item-section>
                  <va-list-item-label>
                    {{ customer.name }}
                  </va-list-item-label>
                </va-list-item-section>
              </va-list-item>

              <va-list-separator v-if="i < archived.length - 1" :key="'separator' + customer.id" />
            </template>
          </va-list>
        </va-card>
      </div>

      <div class="flex xs12 lg6">
        <va-card class="mb-4">
          <va-list>
            <va-list-label>
              {{ t('lists.starterKit') }}
            </va-list-label>

            <va-list-item class="ml-2" clickable>
              <va-list-item-section>
                <va-list-item-label> Add profile images </va-list-item-label>

                <va-list-item-label caption> You can use PNG or JPG files. </va-list-item-label>
              </va-list-item-section>
            </va-list-item>

            <va-list-item class="ml-2" clickable>
              <va-list-item-section>
                <va-list-item-label> Invite friends </va-list-item-label>

                <va-list-item-label caption> You can send invitations via email or any messenger. </va-list-item-label>
              </va-list-item-section>
            </va-list-item>

            <va-list-separator fit spaced />

            <va-list-label>
              {{ t('lists.notifications') }}
            </va-list-label>

            <va-list-item>
              <va-checkbox v-model="appBanners" class="mr-2" />

              <va-list-item-section>
                <va-list-item-label> Application Banners </va-list-item-label>

                <va-list-item-label caption> You can send invitations via email or any messenger. </va-list-item-label>
              </va-list-item-section>
            </va-list-item>

            <va-list-item>
              <va-checkbox v-model="banners" class="mr-2" />

              <va-list-item-section>
                <va-list-item-label> Banners </va-list-item-label>

                <va-list-item-label caption> You can send invitations via email or any messenger. </va-list-item-label>
              </va-list-item-section>
            </va-list-item>

            <va-list-item>
              <va-checkbox v-model="notifications" class="mr-2" />

              <va-list-item-section>
                <va-list-item-label> Midnight Notifications </va-list-item-label>
              </va-list-item-section>
            </va-list-item>
          </va-list>
        </va-card>

        <va-card>
          <va-list>
            <va-list-label>
              {{ t('lists.routerSupport') }}
            </va-list-label>

            <va-list-item :to="{ name: 'maplibre-maps' }">
              <va-list-item-section icon>
                <va-icon name="google" color="danger" />
              </va-list-item-section>

              <va-list-item-section>
                <va-list-item-label>MapLibre Maps</va-list-item-label>
              </va-list-item-section>
            </va-list-item>

            <va-list-item :to="{ name: 'yandex-maps' }">
              <va-list-item-section icon>
                <va-icon name="map" color="danger" />
              </va-list-item-section>

              <va-list-item-section>
                <va-list-item-label>Yandex Maps</va-list-item-label>
              </va-list-item-section>
            </va-list-item>

            <va-list-item :to="{ name: 'leaflet-maps' }">
              <va-list-item-section icon><commit_msg>fix: lists<commit_after><template>
  <div class="lists">
    <div class="row">
      <div class="flex xs12 lg6">
        <va-card class="mb-4 px-3">
          <va-list>
            <va-list-label>
              {{ t('lists.customers') }}
            </va-list-label>

            <template v-for="(customer, i) in customers" :key="'item' + customer.id">
              <va-list-item clickable @click="notify(customer.name)">
                <va-list-item-section avatar>
                  <va-avatar>
                    <img :src="customer.picture" :alt="customer.name" />
                  </va-avatar>
                </va-list-item-section>

                <va-list-item-section>
                  <va-list-item-label>
                    {{ customer.name }}
                  </va-list-item-label>

                  <va-list-item-label caption>
                    {{ customer.address }}
                  </va-list-item-label>
                </va-list-item-section>

                <va-list-item-section icon>
                  <va-icon name="eye" color="gray" />
                </va-list-item-section>
              </va-list-item>

              <va-list-separator v-if="i < customers.length - 1" :key="'separator' + customer.id" class="my-1" fit />
            </template>
          </va-list>
        </va-card>

        <va-card class="px-3">
          <va-list>
            <va-list-label>
              {{ t('lists.recentMessages') }}
            </va-list-label>

            <template v-for="(customer, i) in customers" :key="'item' + customer.id">
              <va-list-item clickable @click="toggleStar(customer)">
                <va-list-item-section icon>
                  <va-icon v-if="customer.starred" name="star" color="warning" />
                </va-list-item-section>

                <va-list-item-section avatar>
                  <va-avatar>
                    <img :src="customer.picture" :alt="customer.name" />
                  </va-avatar>
                </va-list-item-section>

                <va-list-item-section>
                  <va-list-item-label>
                    {{ customer.name }}
                  </va-list-item-label>
                </va-list-item-section>

                <va-list-item-section icon>
                  <va-icon :name="getGenderIcon(customer.gender)" :color="getGenderColor(customer.gender)" />
                </va-list-item-section>
              </va-list-item>

              <va-list-separator v-if="i < customers.length - 1" :key="'separator' + customer.id" class="my-1" fit />
            </template>

            <va-list-separator fit spaced />

            <va-list-label color="gray">
              {{ t('lists.archieved') }}
            </va-list-label>

            <template v-for="(customer, i) in archived" :key="'item' + customer.id">
              <va-list-item disabled>
                <va-list-item-section icon>
                  <va-icon v-if="customer.starred" name="star" color="warning" />
                </va-list-item-section>

                <va-list-item-section avatar>
                  <va-avatar>
                    <img :src="customer.picture" :alt="customer.name" />
                  </va-avatar>
                </va-list-item-section>

                <va-list-item-section>
                  <va-list-item-label>
                    {{ customer.name }}
                  </va-list-item-label>
                </va-list-item-section>
              </va-list-item>

              <va-list-separator v-if="i < archived.length - 1" :key="'separator' + customer.id" class="my-1" fit />
            </template>
          </va-list>
        </va-card>
      </div>

      <div class="flex xs12 lg6">
        <va-card class="mb-4 px-3">
          <va-list>
            <va-list-label>
              {{ t('lists.starterKit') }}
            </va-list-label>

            <va-list-item class="mb-2" clickable>
              <va-list-item-section>
                <va-list-item-label>Add profile images</va-list-item-label>

                <va-list-item-label caption>You can use PNG or JPG files.</va-list-item-label>
              </va-list-item-section>
            </va-list-item>

            <va-list-item clickable>
              <va-list-item-section>
                <va-list-item-label>Invite friends</va-list-item-label>

                <va-list-item-label caption>You can send invitations via email or any messenger.</va-list-item-label>
              </va-list-item-section>
            </va-list-item>

            <va-list-separator fit spaced />

            <va-list-label>
              {{ t('lists.notifications') }}
            </va-list-label>

            <va-list-item class="mb-2">
              <va-checkbox v-model="appBanners" class="mr-2" />

              <va-list-item-section>
                <va-list-item-label>Application Banners</va-list-item-label>

                <va-list-item-label caption>You can send invitations via email or any messenger.</va-list-item-label>
              </va-list-item-section>
            </va-list-item>

            <va-list-item class="mb-2">
              <va-checkbox v-model="banners" class="mr-2" />

              <va-list-item-section>
                <va-list-item-label>Banners</va-list-item-label>

                <va-list-item-label caption>You can send invitations via email or any messenger.</va-list-item-label>
              </va-list-item-section>
            </va-list-item>

            <va-list-item>
              <va-checkbox v-model="notifications" class="mr-2" />

              <va-list-item-section>
                <va-list-item-label>Midnight Notifications</va-list-item-label>
              </va-list-item-section>
            </va-list-item>
          </va-list>
        </va-card>

        <va-card class="px-3">
          <va-list>
            <va-list-label>
              {{ t('lists.routerSupport') }}
            </va-list-label>

            <va-list-item :to="{ name: 'maplibre-maps' }">
              <va-list-item-section icon>
                <va-icon name="public" color="danger" />
              </va-list-item-section>

              <va-list-item-section>
                <va-list-item-label>MapLibre Maps</va-list-item-label>
              </va-list-item-section>
            </va-list-item>

            <va-list-item :to="{ name: 'yandex-maps' }">
              <va-list-item-section icon>
                <va-icon name="map" color="danger" />
              </va-list-item-section>

              <va-list-item-section>
                <va-list-item-label>Yandex Maps</va-list-item-label>
              </va-list-item-section>
            </va-list-item>

            <va-list-item :to="{ name: 'leaflet-maps' }">
              <va-list-item-section icon>
{'fraction_non_alphanumeric': 0.1574423946062088, 'fraction_numerical': 0.003037712084166852, 'mean_word_length': 1.3010569382884418, 'pattern_counts': {'":': 0, '<': 311, '<?xml version=': 0, '>': 305, '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': '2745029', 'n_tokens_mistral': 4233, 'n_tokens_neox': 3945, 'n_words': 617}