
<ol class="breadcrumb breadcrumb-arrow font-trirong">
  <li><a href="javascript://" [routerLink]="['/']">Home</a></li>
  <li><a href="javascript://">Document Reference</a></li>

</ol>


<div class="dg-wrapper">
  <div class="clr-row">

    <div class="clr-col-12" style="text-align: right;">
      <button class="btn btn-outline" (click)="onExport()">
        <clr-icon shape="export"></clr-icon> xlsx
      </button>
      <button id="add" class="btn btn-primary" (click)="goToAdd()">
        <clr-icon shape="plus"></clr-icon>ADD
      </button>
    </div>
  </div>







  <clr-datagrid [clrDgLoading]="loading">
    <clr-dg-placeholder> data not found!</clr-dg-placeholder>

    <clr-dg-column [clrDgField]="'no'"> <ng-container *clrDgHideableColumn="{hidden: false}">
    NO
    </ng-container></clr-dg-column>
    <clr-dg-column [clrDgField]="'Document Code'"> <ng-container *clrDgHideableColumn="{hidden: false}">
      Document Code
    </ng-container></clr-dg-column>
    <clr-dg-column [clrDgField]="'Pad Zero'"><ng-container *clrDgHideableColumn="{hidden: false}">
      Pad Zero
      </ng-container></clr-dg-column >
    <clr-dg-column [clrDgField]="'Start With'"> <ng-container *clrDgHideableColumn="{hidden: false}">
      Start With
    </ng-container></clr-dg-column>
    <clr-dg-column [clrDgField]="'Last Number'"> <ng-container *clrDgHideableColumn="{hidden: false}">
      Last Number
    </ng-container></clr-dg-column>
    <clr-dg-column [clrDgField]="'Max Length'"><ng-container *clrDgHideableColumn="{hidden: false}">
      Max Length
      </ng-container></clr-dg-column >
    <clr-dg-column [clrDgField]="'Structure ID'"> <ng-container *clrDgHideableColumn="{hidden: false}">
      Structure ID
    </ng-container></clr-dg-column>


    <clr-dg-row *clrDgItems="let user of givendata;let i = index" [clrDgItem]="user">
      <clr-dg-cell>{{i+1}}</clr-dg-cell>
      <clr-dg-cell>{{user. DocumentCode}}</clr-dg-cell>
      <clr-dg-cell >{{user. PadZero}}</clr-dg-cell>
      <clr-dg-cell>{{user. StartWith}}</clr-dg-cell>
      <clr-dg-cell>{{user. LastNumber}}</clr-dg-cell>
      <clr-dg-cell >{{user. MaxLength}}</clr-dg-cell>
      <clr-dg-cell>{{user. StructureID}}</clr-dg-cell>


      <clr-dg-action-overflow>

        <button class="action-item" (click)="goToEdit(user)">Edit</button>

      </clr-dg-action-overflow>

      <clr-dg-row-detail *clrIfExpanded>
        <table class="table">
          <tr>
            <td class="td-title"> StructureID</td>
            <td class="td-content">{{user. StructureID}}</td>
          </tr>


        </table>
      </clr-dg-row-detail>
    </clr-dg-row>

    <clr-dg-footer>
      <clr-dg-pagination #pagination [clrDgPageSize]="10">
        <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Record per page</clr-dg-page-size>
        {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
        of {{pagination.totalItems}} Records
      </clr-dg-pagination>
    </clr-dg-footer>
  </clr-datagrid>
</div>

<clr-modal [(clrModalOpen)]="modalAdd" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
  <h3 class="modal-title">Document Reference Add Mode</h3>
  <div class="modal-body">
        <form>
      <div class="clr-row">
        <div class="clr-col-md-4 clr-col-sm-12">
          <label for="name">Document Type<span class="required-field">*</span></label>
         <input type="text" class="clr-input" >
        </div>
        <div class="clr-col-md-4 clr-col-sm-12">
          <label for="tags">Pad Zero's?</label>
          <select  id="">
            <option value="Y">Y</option>
            <option  value="N">N</option>
            </select>
          </div>
          <div class="clr-col-md-4 clr-col-sm-12">
            <label for="name">Start With</label>
           <input type="text" class="clr-input" NAME="start_with" SIZE="20" MAXLENGTH="15" VALUE="1">
          </div>
          <div class="clr-col-md-4 clr-col-sm-12">
            <label for="name">Last No.</label>
           <input type="text" class="clr-input" NAME="Last No." SIZE="20" MAXLENGTH="15" >
          </div>
          <div class="clr-col-md-4 clr-col-sm-12">
            <label for="name">Max Length</label>
           <input type="text" class="clr-input" NAME="Last No." SIZE="20" MAXLENGTH="15" value="5" >
          </div>
          <div class="clr-col-md-4 clr-col-sm-12">
            <label for="tags">Document Structure</label>
            <select  id="">
              <option value="1">Running Sequence Number</option>
              </select>
            </div>
      </div>
      <br>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline" (click)="modalAdd = false">Cancel</button>
        <button type="submit" class="btn btn-primary" >ADD</button>
        </div>
</form>
  </div>

</clr-modal>

<clr-modal [(clrModalOpen)]="modaledit" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
  <h3 class="modal-title">Document Reference Edit Mode</h3>
  <div class="modal-body">
    <form>
  <div class="clr-row">
    <div class="clr-col-md-4 clr-col-sm-12">
      <label for="name">Document Type<span class="required-field">*</span></label>
     <input type="text" class="clr-input" >
    </div>
    <div class="clr-col-md-4 clr-col-sm-12">
      <label for="tags">Pad Zero's?</label>
      <select  id="">
        <option value="Y">Y</option>
        <option  value="N">N</option>
        </select>
      </div>
      <div class="clr-col-md-4 clr-col-sm-12">
        <label for="name">Start With</label>
       <input type="text" class="clr-input" NAME="start_with" SIZE="20" MAXLENGTH="15" VALUE="1">
      </div>
      <div class="clr-col-md-4 clr-col-sm-12">
        <label for="name">Last No.</label>
       <input type="text" class="clr-input" NAME="Last No." SIZE="20" MAXLENGTH="15" >
      </div>
      <div class="clr-col-md-4 clr-col-sm-12">
        <label for="name">Max Length</label>
       <input type="text" class="clr-input" NAME="Last No." SIZE="20" MAXLENGTH="15" value="5" >
      </div>
      <div class="clr-col-md-4 clr-col-sm-12">
        <label for="tags">Document Structure</label>
        <select  id="">
          <option value="1">Running Sequence Number</option>
          </select>
        </div>
  </div>
  <br>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline" (click)="modaledit= false">Cancel</button>
    <button type="submit" class="btn btn-primary" >UPDATE</button>
    </div>
</form>
</div>

</clr-modal>
