<ol class="breadcrumb breadcrumb-arrow font-trirong mm-breadcrumb">
    <li>
        <a href="javascript://" [routerLink]="['/cns-portal/dashboard/order']">
            <clr-icon shape="home"></clr-icon>
        </a>
    </li>
    <li>
        <a href="">
            <clr-icon shape="flag"></clr-icon>{{ 'SEQ_GENERATOR' | translate }}</a>
    </li>
</ol>

<section class="sq-hero">
  <div class="sq-hero__content">
    <div class="sq-hero__icon"><clr-icon shape="number-list"></clr-icon></div>
    <div>
      <h2 class="sq-hero__title">{{ 'SEQ_GENERATOR' | translate }}</h2>
      <p class="sq-hero__subtitle">{{ 'FND' | translate }}</p>
    </div>
  </div>
  <div class="sq-hero__actions">
    <button class="sq-btn sq-btn-outline" (click)="onExport()">
      <clr-icon shape="export"></clr-icon> <span class="sq-btn-text">{{ 'EXPORT' | translate }}</span>
    </button>
    <button id="add" class="sq-btn sq-btn-primary" (click)="goToAdd()">
      <clr-icon shape="plus"></clr-icon><span class="sq-btn-text">{{ 'ADD' | translate }}</span>
    </button>
  </div>
</section>

<div class="sq-container">
  <div class="sq-toolbar">
    <div class="sq-toolbar__left">
      <div class="sq-search">
        <clr-icon shape="search"></clr-icon>
        <input class="sq-search__input" type="text" [placeholder]="'SEARCH_ALL_FIELDS' | translate" [(ngModel)]="filterText" />
      </div>
    </div>
    <div class="sq-toolbar__right sq-stats">
      <div class="sq-stat">
        <div class="sq-stat__value">{{ totalSequences }}</div>
        <div class="sq-stat__label">{{ 'TOTAL_SEQUENCES' | translate }}</div>
      </div>
      <div class="sq-view-toggle">
        <button class="sq-btn sq-btn-sm" [class.sq-btn-primary]="viewMode==='cards'" (click)="setViewMode('cards')">
          <clr-icon shape="view-cards"></clr-icon>
        </button>
        <button class="sq-btn sq-btn-sm" [class.sq-btn-primary]="viewMode==='table'" (click)="setViewMode('table')">
          <clr-icon shape="table"></clr-icon>
        </button>
      </div>
    </div>
  </div>

  <clr-datagrid class="sq-grid" [clrDgLoading]="loading" *ngIf="viewMode==='table'" [(clrDgSelected)]="selected">
    <clr-dg-placeholder>
      <ng-template #loadingSpinner>
        <clr-spinner>{{ 'LOADING' | translate }} ... </clr-spinner>
      </ng-template>
      <div *ngIf="error;else loadingSpinner">{{error}}</div>
    </clr-dg-placeholder>
    
    <clr-dg-column [clrDgField]="'current_no'" class="sq-col sq-col--no">
      <ng-container *clrDgHideableColumn="{hidden: false}">
        <span class="sq-col-title">
          <clr-icon shape="hashtag"></clr-icon> {{ 'CURRENT_NO' | translate }}
        </span>
      </ng-container>
    </clr-dg-column>
    
    <clr-dg-column [clrDgField]="'sequence_name'" class="sq-col sq-col--name">
      <ng-container *clrDgHideableColumn="{hidden: false}">
        <span class="sq-col-title">
          <clr-icon shape="tag"></clr-icon> {{ 'NAME' | translate }}
        </span>
      </ng-container>
    </clr-dg-column>
    
    <clr-dg-column [clrDgField]="'prefix'" class="sq-col sq-col--prefix">
      <ng-container *clrDgHideableColumn="{hidden: false}">
        <span class="sq-col-title">
          <clr-icon shape="text"></clr-icon> {{ 'PREFIX' | translate }}
        </span>
      </ng-container>
    </clr-dg-column>

    <clr-dg-column [clrDgField]="'seperator'" class="sq-col sq-col--separator">
      <ng-container *clrDgHideableColumn="{hidden: false}">
        <span class="sq-col-title">
          <clr-icon shape="split-string"></clr-icon> {{ 'SEPARATOR' | translate }}
        </span>
      </ng-container>
    </clr-dg-column>

    <clr-dg-column [clrDgField]="'sequence_size'" class="sq-col sq-col--size">
      <ng-container *clrDgHideableColumn="{hidden: false}">
        <span class="sq-col-title">
          <clr-icon shape="ruler"></clr-icon> {{ 'SEQUENCE_SIZE' | translate }}
        </span>
      </ng-container>
    </clr-dg-column>
    
    <clr-dg-column [clrDgField]="'suffix'" class="sq-col sq-col--suffix">
      <ng-container *clrDgHideableColumn="{hidden: false}">
        <span class="sq-col-title">
          <clr-icon shape="text"></clr-icon> {{ 'SUFFIX' | translate }}
        </span>
      </ng-container>
    </clr-dg-column>
    
    <clr-dg-column [clrDgField]="'starting_no'" class="sq-col sq-col--starting">
      <ng-container *clrDgHideableColumn="{hidden: false}">
        <span class="sq-col-title">
          <clr-icon shape="play"></clr-icon> {{ 'STARTING_NO' | translate }}
        </span>
      </ng-container>
    </clr-dg-column>
    
    <clr-dg-column [clrDgField]="'sequence_code'" class="sq-col sq-col--code">
      <ng-container *clrDgHideableColumn="{hidden: false}">
        <span class="sq-col-title">
          <clr-icon shape="code"></clr-icon> {{ 'SEQUENCE_CODE' | translate }}
        </span>
      </ng-container>
    </clr-dg-column>
    
    <clr-dg-row *clrDgItems="let user of filteredSequences" [clrDgItem]="user">
      <clr-dg-cell>{{user.current_no}}</clr-dg-cell>
      <clr-dg-cell>{{user.sequence_name}}</clr-dg-cell>
      <clr-dg-cell>{{user.prefix}}</clr-dg-cell>
      <clr-dg-cell>{{user.seperator}}</clr-dg-cell>
      <clr-dg-cell>{{user.sequence_size}}</clr-dg-cell>
      <clr-dg-cell>{{user.suffix}}</clr-dg-cell>
      <clr-dg-cell>{{user.starting_no}}</clr-dg-cell>
      <clr-dg-cell>{{user.sequence_code}}</clr-dg-cell>
      <clr-dg-action-overflow>
        <button class="sq-action-item" (click)="goToEdit(user)"> 
          {{ 'EDIT' | translate }} 
          <clr-icon shape="edit"></clr-icon>
        </button>
        <button class="sq-action-item sq-btn-error" (click)="onDelete(user)"> 
          {{ 'DELETE' | translate }}
          <clr-icon shape="trash"></clr-icon>
        </button>
      </clr-dg-action-overflow>
    </clr-dg-row>

    <clr-dg-footer class="sq-grid-footer">
      <clr-dg-pagination #pagination [clrDgPageSize]="10">
        <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">
          {{ 'RECORDS_PER_PAGE' | translate }}
        </clr-dg-page-size>
        {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} 
        {{ 'OF' | translate }} {{pagination.totalItems}} {{ 'RECORDS' | translate }}
      </clr-dg-pagination>
    </clr-dg-footer>
  </clr-datagrid>

  <div class="sq-cards" *ngIf="viewMode==='cards'">
    <div class="sq-card-item" *ngFor="let user of filteredSequences">
      <div class="sq-card-item__header">
        <div class="sq-card-item__icon"><clr-icon shape="number-list"></clr-icon></div>
        <div class="sq-card-item__title">{{user.sequence_name}}</div>
        <div class="sq-card-item__badge">{{user.current_no}}</div>
      </div>
      <div class="sq-card-item__body">
        <div class="sq-kv"><span>{{ 'PREFIX' | translate }}</span><strong>{{user.prefix}}</strong></div>
        <div class="sq-kv"><span>{{ 'SEPARATOR' | translate }}</span><strong>{{user.seperator}}</strong></div>
        <div class="sq-kv"><span>{{ 'SEQUENCE_SIZE' | translate }}</span><strong>{{user.sequence_size}}</strong></div>
        <div class="sq-kv" *ngIf="user.suffix"><span>{{ 'SUFFIX' | translate }}</span><strong>{{user.suffix}}</strong></div>
        <div class="sq-kv" *ngIf="user.starting_no"><span>{{ 'STARTING_NO' | translate }}</span><strong>{{user.starting_no}}</strong></div>
        <div class="sq-kv" *ngIf="user.sequence_code"><span>{{ 'SEQUENCE_CODE' | translate }}</span><strong>{{user.sequence_code}}</strong></div>
        <div class="sq-kv" *ngIf="user.demonstration"><span>{{ 'DEMONSTRATION' | translate }}</span><strong>{{user.demonstration}}</strong></div>
      </div>
      <div class="sq-card-item__footer">
        <button class="sq-btn sq-btn-sm sq-btn-outline" (click)="goToEdit(user)">
          <clr-icon shape="edit"></clr-icon> {{ 'EDIT' | translate }}
        </button>
        <button class="sq-btn sq-btn-sm sq-btn-outline" (click)="onDelete(user)">
          <clr-icon shape="trash"></clr-icon> {{ 'DELETE' | translate }}
        </button>
      </div>
    </div>
  </div>
</div>

<clr-modal class="sq-modal" [(clrModalOpen)]="modaldelete" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
  <div class="modal-body">
    <div class="sq-delete-header">
      <div class="sq-delete-icon">
        <clr-icon shape="exclamation-triangle" size="48"></clr-icon>
      </div>
      <h1 class="sq-delete-title">{{ 'ARE_YOU_SURE_WANT_TO_DELETE' | translate }}?</h1>
      <p class="sq-delete-subtitle">{{ 'THIS_ACTION_CANNOT_BE_UNDONE' | translate }}</p>
    </div>
    <div class="sq-delete-details" *ngIf="rowSelected.id">
      <div class="sq-delete-detail-item">
        <span class="sq-delete-detail-label">{{ 'SEQUENCE_ID' | translate }}:</span>
        <span class="sq-delete-detail-value">{{rowSelected.id}}</span>
      </div>
      <div class="sq-delete-detail-item">
        <span class="sq-delete-detail-label">{{ 'SEQUENCE_NAME' | translate }}:</span>
        <span class="sq-delete-detail-value">{{rowSelected.sequence_name}}</span>
      </div>
    </div>
    <div class="modal-footer">
      <button type="button" class="sq-btn sq-btn-outline" (click)="modaldelete = false">
        <clr-icon shape="times"></clr-icon>
        <span>{{ 'CANCEL' | translate }}</span>
      </button>
      <button type="submit" (click)="delete(rowSelected.id)" class="sq-btn sq-btn-error">
        <clr-icon shape="trash"></clr-icon>
        <span>{{ 'DELETE' | translate }}</span>
      </button>
    </div>
  </div>
</clr-modal>

<clr-modal class="sq-modal" [(clrModalOpen)]="modaladd" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
  <h3 class="modal-title sq-modal-title">
    <clr-icon shape="plus"></clr-icon> {{ 'ADD_SEQUENCE_GENERATOR' | translate }}
  </h3>
  <div class="modal-body">
    <form [formGroup]="entryForm" (ngSubmit)="onSubmit()" class="sq-form">
      <div class="clr-row">
        <div class="clr-col-md-6 clr-col-sm-12">
          <label for="sequence_name" class="sq-form-label">
            {{ 'NAME' | translate }}<span class="required-field">*</span>
          </label>
          <input type="text" id="sequence_name" class="sq-form-input" name="sequence_name" formControlName="sequence_name">
          <div *ngIf="submitted && entryForm.controls.sequence_name.errors" class="sq-error-message">
            <div *ngIf="submitted && entryForm.controls.sequence_name.errors.required">
              {{ 'THIS_FIELD_IS_REQUIRED' | translate }}
            </div>
          </div>
        </div>
        
        <div class="clr-col-md-6 clr-col-sm-12">
          <label for="sequence_code" class="sq-form-label">
            {{ 'SEQUENCE_CODE' | translate }}
          </label>
          <input type="text" id="sequence_code" class="sq-form-input" name="sequence_code" formControlName="sequence_code">
        </div>
        
        <div class="clr-col-md-6 clr-col-sm-12">
          <label for="demonstration" class="sq-form-label">
            {{ 'DEMONSTRATION' | translate }}
          </label>
          <input type="text" id="demonstration" class="sq-form-input" formControlName="demonstration">
        </div>
        
        <div class="clr-col-md-6 clr-col-sm-12">
          <label for="prefix" class="sq-form-label">
            {{ 'PREFIX' | translate }}<span class="required-field">*</span>
          </label>
          <input type="text" id="prefix" class="sq-form-input" formControlName="prefix" name="prefix">
          <div *ngIf="submitted && entryForm.controls.prefix.errors" class="sq-error-message">
            <div *ngIf="submitted && entryForm.controls.prefix.errors.required">
              {{ 'THIS_FIELD_IS_REQUIRED' | translate }}
            </div>
          </div>
        </div>
        
        <div class="clr-col-md-6 clr-col-sm-12">
          <label for="suffix" class="sq-form-label">
            {{ 'SUFFIX' | translate }}
          </label>
          <input type="text" id="suffix" class="sq-form-input" name="suffix" formControlName="suffix">
        </div>
        
        <div class="clr-col-md-6 clr-col-sm-12">
          <label for="seperator" class="sq-form-label">
            {{ 'SEPARATOR' | translate }}
          </label>
          <input type="text" id="seperator" class="sq-form-input" name="seperator" formControlName="seperator">
        </div>
        
        <div class="clr-col-md-6 clr-col-sm-12">
          <label for="starting_no" class="sq-form-label">
            {{ 'STARTING_NO' | translate }}
          </label>
          <input type="number" id="starting_no" class="sq-form-input" name="starting_no" formControlName="starting_no">
        </div>
        
        <div class="clr-col-md-6 clr-col-sm-12">
          <label for="current_no" class="sq-form-label">
            {{ 'CURRENT_NO' | translate }}
          </label>
          <input type="number" id="current_no" class="sq-form-input" formControlName="current_no">
        </div>
        
        <div class="clr-col-md-6 clr-col-sm-12">
          <label for="sequence_size" class="sq-form-label">
            {{ 'SEQUENCE_SIZE' | translate }}
          </label>
          <input type="number" id="sequence_size" class="sq-form-input" name="sequence_size" formControlName="sequence_size">
        </div>
      </div>
      
      <div class="sq-form-actions">
        <button type="button" class="sq-btn sq-btn-outline" (click)="modaladd = false">
          <clr-icon shape="times"></clr-icon>
          <span>{{ 'CANCEL' | translate }}</span>
        </button>
        <button type="submit" class="sq-btn sq-btn-primary">
          <clr-icon shape="check"></clr-icon>
          <span>{{ 'ADD' | translate }}</span>
        </button>
      </div>
    </form>
  </div>
</clr-modal>

<clr-modal class="sq-modal" [(clrModalOpen)]="modaledit" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
  <h3 class="modal-title sq-modal-title">
    <clr-icon shape="edit"></clr-icon> {{ 'UPDATE_SEQUENCE_GENERATOR' | translate }}
  </h3>
  <div class="modal-body" *ngIf="rowSelected.id">
    <div class="sq-form-help">
      {{ 'SEQUENCE_ID' | translate }}: <code class="clr-code">{{rowSelected.id}}</code>
    </div>
    
    <form (ngSubmit)="onUpdate(rowSelected.id)" class="sq-form">
      <div class="clr-row">
        <div class="clr-col-md-6 clr-col-sm-12">
          <label for="sequence_name" class="sq-form-label">
            {{ 'NAME' | translate }}<span class="required-field">*</span>
          </label>
          <input type="text" id="sequence_name" class="sq-form-input" name="sequence_name" [(ngModel)]="rowSelected.sequence_name">
          <div class="sq-error-message" *ngIf="!rowSelected.sequence_name">
            {{ 'THIS_FIELD_IS_REQUIRED' | translate }}
          </div>
        </div>
        
        <div class="clr-col-md-6 clr-col-sm-12">
          <label for="sequence_code" class="sq-form-label">
            {{ 'SEQUENCE_CODE' | translate }}
          </label>
          <input type="text" id="sequence_code" class="sq-form-input" name="sequence_code" [(ngModel)]="rowSelected.sequence_code">
        </div>
        
        <div class="clr-col-md-6 clr-col-sm-12">
          <label for="demonstration" class="sq-form-label">
            {{ 'DEMONSTRATION' | translate }}
          </label>
          <input type="text" id="demonstration" class="sq-form-input" name="demonstration" [(ngModel)]="rowSelected.demonstration" readonly>
        </div>
        
        <div class="clr-col-md-6 clr-col-sm-12">
          <label for="prefix" class="sq-form-label">
            {{ 'PREFIX' | translate }}<span class="required-field">*</span>
          </label>
          <input type="text" id="prefix" class="sq-form-input" name="prefix" [(ngModel)]="rowSelected.prefix">
          <div class="sq-error-message" *ngIf="!rowSelected.prefix">
            {{ 'THIS_FIELD_IS_REQUIRED' | translate }}
          </div>
        </div>
        
        <div class="clr-col-md-6 clr-col-sm-12">
          <label for="suffix" class="sq-form-label">
            {{ 'SUFFIX' | translate }}
          </label>
          <input type="text" id="suffix" class="sq-form-input" name="suffix" [(ngModel)]="rowSelected.suffix">
        </div>
        
        <div class="clr-col-md-6 clr-col-sm-12">
          <label for="seperator" class="sq-form-label">
            {{ 'SEPARATOR' | translate }}
          </label>
          <input type="text" id="seperator" class="sq-form-input" name="seperator" [(ngModel)]="rowSelected.seperator">
        </div>
        
        <div class="clr-col-md-6 clr-col-sm-12">
          <label for="starting_no" class="sq-form-label">
            {{ 'STARTING_NO' | translate }}
          </label>
          <input type="number" id="starting_no" class="sq-form-input" name="starting_no" [(ngModel)]="rowSelected.starting_no">
        </div>
        
        <div class="clr-col-md-6 clr-col-sm-12">
          <label for="current_no" class="sq-form-label">
            {{ 'CURRENT_NO' | translate }}
          </label>
          <input type="number" id="current_no" class="sq-form-input" name="current_no" [(ngModel)]="rowSelected.current_no" readonly>
        </div>
        
        <div class="clr-col-md-6 clr-col-sm-12">
          <label for="sequence_size" class="sq-form-label">
            {{ 'SEQUENCE_SIZE' | translate }}
          </label>
          <input type="number" id="sequence_size" class="sq-form-input" name="sequence_size" [(ngModel)]="rowSelected.sequence_size">
        </div>
      </div>
      
      <div class="sq-form-actions">
        <button type="button" class="sq-btn sq-btn-outline" (click)="modaledit = false">
          <clr-icon shape="times"></clr-icon>
          <span>{{ 'CANCEL' | translate }}</span>
        </button>
        <button type="submit" class="sq-btn sq-btn-primary">
          <clr-icon shape="check"></clr-icon>
          <span>{{ 'UPDATE' | translate }}</span>
        </button>
      </div>
    </form>
  </div>
</clr-modal>