<commit_before><div class="container-fluid">
  <app-page-title title="Labs" [breadcrumbItems]="breadCrumbItems"></app-page-title>

  <div class="row">
    <div class="col-lg-12">
      <div class="card">
        <div class="card-body">
          <div class="row mb-2">
            <div class="col-7">
              <div class="search-box mr-2 mb-2 d-inline-block">
                <div class="position-relative">
                  <input class="form-control" [(ngModel)]="queryString" id="search" name="search"
                    placeholder="Search Lab" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Search Lab'" />
                  <i class="bx bx-search-alt search-icon"></i>
                </div>
              </div>
            </div>

            <!-- Load Spinner -->
            <ngx-spinner [fullScreen]="true" type="ball-clip-rotate-multiple" size="medium">
              <p class="loading">Loading, Please Wait...</p>
            </ngx-spinner>

            <div class="col-5">
              <div class="float-right">
                <div class="form-group">
                  <select class="form-control select2-search-disable" placeholder="Select"
                    onfocus="this.placeholder = ''" onblur="this.placeholder = 'Select'" [(ngModel)]="queryLabel">
                    <option value="" selected disabled>All labs</option>
                    <option value="SKF-labs">SKF-labs</option>
                    <option value="juice-shop">juice-shop</option>
                  </select>
                </div>
              </div>
            </div>
          </div>
          <div class="table-responsive mt-3">
            <table class="table table-centered table-nowrap table-hover">
              <thead class="thead-light">
                <tr>
                  <th scope="col" style="width: 50px;">
                    <div class="text-center">#</div>
                  </th>
                  <th scope="col" joyrideStep="nameLabContent" title="Lab Name" [stepContent]="nameLabContent">
                    <div class="text-center">Name</div>
                  </th>
                  <th scope="col" joyrideStep="labelLabContent" title="Lab Label" [stepContent]="labelLabContent">
                    <div class="text-center">Label</div>
                  </th>
                  <th scope="col" joyrideStep="levelLabContent" title="Lab Level" [stepContent]="levelLabContent">
                    <div class="text-center">Level</div>
                  </th>
                  <th *ngIf="kubernetes_enabled == 'True'" scope="col" joyrideStep="statusLabContent" title="Lab Status"
                    [stepContent]="statusLabContent">
                    <div class="text-center">Status</div>
                  </th>
                  <th scope="col" joyrideStep="writeLabContent" title="Lab Writeup" [stepContent]="writeLabContent">
                    <div class="text-center">Write-up</div>
                  </th>
                  <th *ngIf="kubernetes_enabled == 'True'" scope="col" joyrideStep="actionLabContent" title="Lab deploy"
                    [stepContent]="actionLabContent">
                    <div class="text-center">Action</div>
                  </th>
                </tr>
              </thead>
              <tbody
                *ngFor="let item of labData.items | stringfilter:queryString | labelfilter:queryLabel; let myIndex = index">
                <tr>
                  <td>
                    <div class="avatar-xs">
                      <span class="avatar-title rounded-circle bg-soft-primary text-primary">
                        <i class="bx bxs-flask"></i>
                      </span>
                    </div>
                  </td>
                  <td>
                    <div class="text-center">{{item.title}}</div>
                  </td>
                  <td>
                    <div class="text-center">{{item.label}}</div>
                  </td>
                  <td>
                    <div class="text-center">{{item.level}}</div>
                  </td>
                  <td *ngIf="kubernetes_enabled == 'True'">
                    <div class="text-center" *ngFor="let items of status; let myIndex = index">
                      <a *ngIf="item.image_tag == items" href="javascript: void(0);"
                        class="badge badge-success font-size-11 m-1">Lab is Running</a>
                    </div>
                  </td>
                  <td>
                    <div class="text-center"><a href="{{item.link}}" target="_blank">Click here</a></div>
                  </td>
                  <td *ngIf="kubernetes_enabled == 'True'">
                    <ul class="list-inline mb-0 text-center">

                      <li class="list-inline-item" *ngIf="status.includes(item.image_tag); else elseBlock ">
                        <button class="btn btn-danger btn-sm" id="get-address"
                          (click)="stopLabFromRunning(item.image_tag)">Stop</button>
                      </li>
                      <ng-template #elseBlock>
                        <li class="list-inline-item">
                          <button class="btn btn-success btn-sm" id="get-address"
                            (click)="getLabAddress(item.image_tag)">Start</button>
                        </li>
                      </ng-template>
                    </ul>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>

  <ng-template #nameLabContent>
    <div class="card p-0">
      <div class="card-body text-center px-0 mr-2 ml-2">
        <p>These are the labs that are available, based on the name you can see what the type of vulnerability is to
          focus on.
          Also when deployed the lab you can use the name to jump to the Lab again.</p>
      </div>
    </div>
  </ng-template>

  <ng-template #levelLabContent>
    <div class="card p-0">
      <div class="card-body text-center px-0 mr-2 ml-2">
        <p>The labs have a level on how easy or hard it is to identify the vulnerability and to exploit them. Start with
          the Level 1 labs first and work your way up.</p>
      </div>
    </div>
  </ng-template>

  <ng-template #writeLabContent>
    <div class="card p-0">
      <div class="card-body text-center px-0 mr-2 ml-2">
        <p>All of the labs have a write-up page that help you step by step how to identify the vulnerability and what
          steps are needed to exploit them. </p>
      </div>
    </div>
  </ng-template>

  <ng-template #statusLabContent>
    <div class="card p-0">
      <div class="card-body text-center px-0 mr-2 ml-2">
        <p>Here you can keep track of what labs are already deployed and ready to be accessed.</p>
      </div>
    </div>
  </ng-template>

  <ng-template #labelLabContent>
    <div class="card p-0">
      <div class="card-body text-center px-0 mr-2 ml-2">
        <p>This is who provided the Labs, for example SKF-labs or OWASP-Juice Shop</p>
      </div>
    </div>
  </ng-template>

  <ng-template #actionLabContent>
    <div class="card p-0">
      <div class="card-body text-center px-0 mr-2 ml-2">
        <p>Here you can deploy the labs that where not started yet.</p>
      </div>
    </div>
  </ng-template><commit_msg>fix lab filter<commit_after><div class="container-fluid">
  <app-page-title title="Labs" [breadcrumbItems]="breadCrumbItems"></app-page-title>

  <div class="row">
    <div class="col-lg-12">
      <div class="card">
        <div class="card-body">
          <div class="row mb-2">
            <div class="col-7">
              <div class="search-box mr-2 mb-2 d-inline-block">
                <div class="position-relative">
                  <input class="form-control" [(ngModel)]="queryString" id="search" name="search"
                    placeholder="Search Lab" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Search Lab'" />
                  <i class="bx bx-search-alt search-icon"></i>
                </div>
              </div>
            </div>

            <!-- Load Spinner -->
            <ngx-spinner [fullScreen]="true" type="ball-clip-rotate-multiple" size="medium">
              <p class="loading">Loading, Please Wait...</p>
            </ngx-spinner>

            <div class="col-5">
              <div class="float-right">
                <div class="form-group">
                  <select class="form-control select2-search-disable" placeholder="Select"
                    onfocus="this.placeholder = ''" onblur="this.placeholder = 'Select'" [(ngModel)]="queryLabel">
                    <option value="">All labs</option>
                    <option value="SKF-labs">SKF-labs</option>
                    <option value="juice-shop">juice-shop</option>
                  </select>
                </div>
              </div>
            </div>
          </div>
          <div class="table-responsive mt-3">
            <table class="table table-centered table-nowrap table-hover">
              <thead class="thead-light">
                <tr>
                  <th scope="col" style="width: 50px;">
                    <div class="text-center">#</div>
                  </th>
                  <th scope="col" joyrideStep="nameLabContent" title="Lab Name" [stepContent]="nameLabContent">
                    <div class="text-center">Name</div>
                  </th>
                  <th scope="col" joyrideStep="labelLabContent" title="Lab Label" [stepContent]="labelLabContent">
                    <div class="text-center">Label</div>
                  </th>
                  <th scope="col" joyrideStep="levelLabContent" title="Lab Level" [stepContent]="levelLabContent">
                    <div class="text-center">Level</div>
                  </th>
                  <th *ngIf="kubernetes_enabled == 'True'" scope="col" joyrideStep="statusLabContent" title="Lab Status"
                    [stepContent]="statusLabContent">
                    <div class="text-center">Status</div>
                  </th>
                  <th scope="col" joyrideStep="writeLabContent" title="Lab Writeup" [stepContent]="writeLabContent">
                    <div class="text-center">Write-up</div>
                  </th>
                  <th *ngIf="kubernetes_enabled == 'True'" scope="col" joyrideStep="actionLabContent" title="Lab deploy"
                    [stepContent]="actionLabContent">
                    <div class="text-center">Action</div>
                  </th>
                </tr>
              </thead>
              <tbody
                *ngFor="let item of labData.items | stringfilter:queryString | labelfilter:queryLabel; let myIndex = index">
                <tr>
                  <td>
                    <div class="avatar-xs">
                      <span class="avatar-title rounded-circle bg-soft-primary text-primary">
                        <i class="bx bxs-flask"></i>
                      </span>
                    </div>
                  </td>
                  <td>
                    <div class="text-center">{{item.title}}</div>
                  </td>
                  <td>
                    <div class="text-center">{{item.label}}</div>
                  </td>
                  <td>
                    <div class="text-center">{{item.level}}</div>
                  </td>
                  <td *ngIf="kubernetes_enabled == 'True'">
                    <div class="text-center" *ngFor="let items of status; let myIndex = index">
                      <a *ngIf="item.image_tag == items" href="javascript: void(0);"
                        class="badge badge-success font-size-11 m-1">Lab is Running</a>
                    </div>
                  </td>
                  <td>
                    <div class="text-center"><a href="{{item.link}}" target="_blank">Click here</a></div>
                  </td>
                  <td *ngIf="kubernetes_enabled == 'True'">
                    <ul class="list-inline mb-0 text-center">

                      <li class="list-inline-item" *ngIf="status.includes(item.image_tag); else elseBlock ">
                        <button class="btn btn-danger btn-sm" id="get-address"
                          (click)="stopLabFromRunning(item.image_tag)">Stop</button>
                      </li>
                      <ng-template #elseBlock>
                        <li class="list-inline-item">
                          <button class="btn btn-success btn-sm" id="get-address"
                            (click)="getLabAddress(item.image_tag)">Start</button>
                        </li>
                      </ng-template>
                    </ul>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>

  <ng-template #nameLabContent>
    <div class="card p-0">
      <div class="card-body text-center px-0 mr-2 ml-2">
        <p>These are the labs that are available, based on the name you can see what the type of vulnerability is to
          focus on.
          Also when deployed the lab you can use the name to jump to the Lab again.</p>
      </div>
    </div>
  </ng-template>

  <ng-template #levelLabContent>
    <div class="card p-0">
      <div class="card-body text-center px-0 mr-2 ml-2">
        <p>The labs have a level on how easy or hard it is to identify the vulnerability and to exploit them. Start with
          the Level 1 labs first and work your way up.</p>
      </div>
    </div>
  </ng-template>

  <ng-template #writeLabContent>
    <div class="card p-0">
      <div class="card-body text-center px-0 mr-2 ml-2">
        <p>All of the labs have a write-up page that help you step by step how to identify the vulnerability and what
          steps are needed to exploit them. </p>
      </div>
    </div>
  </ng-template>

  <ng-template #statusLabContent>
    <div class="card p-0">
      <div class="card-body text-center px-0 mr-2 ml-2">
        <p>Here you can keep track of what labs are already deployed and ready to be accessed.</p>
      </div>
    </div>
  </ng-template>

  <ng-template #labelLabContent>
    <div class="card p-0">
      <div class="card-body text-center px-0 mr-2 ml-2">
        <p>This is who provided the Labs, for example SKF-labs or OWASP-Juice Shop</p>
      </div>
    </div>
  </ng-template>

  <ng-template #actionLabContent>
    <div class="card p-0">
      <div class="card-body text-center px-0 mr-2 ml-2">
        <p>Here you can deploy the labs that where not started yet.</p>
      </div>
    </div>
  </ng-template>
{'fraction_non_alphanumeric': 0.14294491091542086, 'fraction_numerical': 0.00559765171684074, 'mean_word_length': 1.5535994422171866, 'pattern_counts': {'":': 0, '<': 353, '<?xml version=': 0, '>': 353, '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': '4148129', 'n_tokens_mistral': 4320, 'n_tokens_neox': 4008, 'n_words': 983}