<commit_before><template>
  <q-card flat bordered v-bind:class="['panel-service-details', {'panel-service-details-dense':isDense}]">
    <q-scroll-area :thumb-style="appThumbStyle" style="height:100%;">
      <q-card-section>
        <div class="row items-start no-wrap">
          <div class="col" v-if="data.type">
            <div class="text-subtitle2">TYPE</div>
            <q-chip
              dense
              class="app-chip app-chip-entry-points">
              {{ data.type }}
            </q-chip>
          </div>
          <div class="col">
            <div class="text-subtitle2">PROVIDER</div>
            <div class="block-right-text">
              <q-avatar class="provider-logo">
                <q-icon :name="`img:statics/providers/${data.provider}.svg`" />
              </q-avatar>
              <div class="block-right-text-label">{{data.provider}}</div>
            </div>
          </div>
        </div>
      </q-card-section>
      <q-card-section>
        <div class="row items-start no-wrap">
          <div class="col">
            <div class="text-subtitle2">STATUS</div>
            <div class="block-right-text">
              <avatar-state :state="data.status | status "/>
              <div v-bind:class="['block-right-text-label', `block-right-text-label-${data.status}`]">{{data.status | statusLabel}}</div>
            </div>
          </div>
        </div>
      </q-card-section>
      <q-card-section v-if="data.mirroring">
        <div class="row items-start no-wrap">
          <div class="col">
            <div class="text-subtitle2">Main Service</div>
            <q-chip
              dense
              class="app-chip app-chip-name">
              {{ data.mirroring.service }}
            </q-chip>
          </div>
        </div>
      </q-card-section>
      <q-card-section v-if="data.loadBalancer && $route.meta.protocol !== 'tcp'">
        <div class="row items-start no-wrap">
          <div class="col">
            <div class="text-subtitle2">Pass Host Header</div>
            <boolean-state :value="data.loadBalancer.passHostHeader"/>
          </div>
        </div>
      </q-card-section>

      <q-card-section v-if="data.loadBalancer.terminationDelay"><commit_msg>Use valid condition in the service details panel UI<commit_after><template>
  <q-card flat bordered v-bind:class="['panel-service-details', {'panel-service-details-dense':isDense}]">
    <q-scroll-area :thumb-style="appThumbStyle" style="height:100%;">
      <q-card-section>
        <div class="row items-start no-wrap">
          <div class="col" v-if="data.type">
            <div class="text-subtitle2">TYPE</div>
            <q-chip
              dense
              class="app-chip app-chip-entry-points">
              {{ data.type }}
            </q-chip>
          </div>
          <div class="col">
            <div class="text-subtitle2">PROVIDER</div>
            <div class="block-right-text">
              <q-avatar class="provider-logo">
                <q-icon :name="`img:statics/providers/${data.provider}.svg`" />
              </q-avatar>
              <div class="block-right-text-label">{{data.provider}}</div>
            </div>
          </div>
        </div>
      </q-card-section>
      <q-card-section>
        <div class="row items-start no-wrap">
          <div class="col">
            <div class="text-subtitle2">STATUS</div>
            <div class="block-right-text">
              <avatar-state :state="data.status | status "/>
              <div v-bind:class="['block-right-text-label', `block-right-text-label-${data.status}`]">{{data.status | statusLabel}}</div>
            </div>
          </div>
        </div>
      </q-card-section>
      <q-card-section v-if="data.mirroring">
        <div class="row items-start no-wrap">
          <div class="col">
            <div class="text-subtitle2">Main Service</div>
            <q-chip
              dense
              class="app-chip app-chip-name">
              {{ data.mirroring.service }}
            </q-chip>
          </div>
        </div>
      </q-card-section>
      <q-card-section v-if="data.loadBalancer && $route.meta.protocol !== 'tcp'">
        <div class="row items-start no-wrap">
          <div class="col">
            <div class="text-subtitle2">Pass Host Header</div>
            <boolean-state :value="data.loadBalancer.passHostHeader"/>
          </div>
        </div>
      </q-card-section>

      <q-card-section v-if="data.loadBalancer && data.loadBalancer.terminationDelay">
{'fraction_non_alphanumeric': 0.1756129887342611, 'fraction_numerical': 0.0035343494588027393, 'mean_word_length': 1.7985166872682323, 'pattern_counts': {'":': 0, '<': 117, '<?xml version=': 0, '>': 117, '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': '132108', 'n_tokens_mistral': 1406, 'n_tokens_neox': 1391, 'n_words': 220}