<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="javascript://"><clr-icon shape="lock"></clr-icon>{{ 'SECURITY' | translate }}</a></li>
  <li><a href="javascript://">{{ 'MENU_MAINTENANCE' | translate }}</a></li>
</ol>

<div class="mm-container">
  <section class="mm-hero">
    <div class="mm-hero__content">
      <div class="mm-hero__icon">
        <clr-icon shape="organization"></clr-icon>
      </div>
      <div>
        <h2 class="mm-hero__title">{{ 'MENU_MAINTENANCE' | translate }}</h2>
        <p class="mm-hero__subtitle">{{ 'MAIN_MENU' | translate }}</p>
      </div>
    </div>
    <div class="mm-hero__actions">
      <button class="btn btn-outline mm-btn-outline" (click)="onExport()">
        <clr-icon shape="export"></clr-icon>
        <span class="mm-btn-text">{{ 'EXPORT_XLSX' | translate }}</span>
      </button>
      <button class="btn btn-primary mm-btn-primary" (click)="csvImport()">
        <clr-icon shape="import"></clr-icon>
        <span class="mm-btn-text">{{ 'IMPORT' | translate }}</span>
      </button>
      <button id="add" class="btn btn-primary mm-btn-primary" (click)="goToAdd()">
        <clr-icon shape="plus"></clr-icon>
        <span class="mm-btn-text">{{ 'ADD' | translate }}</span>
      </button>
      <button class="btn mm-btn-secondary" (click)="downloadFiles()">
        <clr-icon shape="download"></clr-icon>
        <span class="mm-btn-text">{{ 'DOWNLOAD_TEMPLATE' | translate }}</span>
      </button>
    </div>
  </section>
  <!-- <div class="clr-row">
    <div class="clr-col-12" style="text-align: right;">
      <button id="add" *ngIf="mcreate == 'true'"  class="btn btn-primary" (click)="goToAdd()">
        <clr-icon shape="plus"></clr-icon>ADD New
      </button>
    </div>
  </div> -->
  <div class="mm-stats">
    <div class="mm-stat">
      <div class="mm-stat__value">{{ totalMenus }}</div>
      <div class="mm-stat__label">{{ 'TOTAL_MENUS' | translate }}</div>
    </div>
    <div class="mm-stat">
      <div class="mm-stat__value">{{ enabledMenusCount }}</div>
      <div class="mm-stat__label">{{ 'ENABLED' | translate }}</div>
    </div>
    <div class="mm-stat">
      <div class="mm-stat__value">{{ disabledMenusCount }}</div>
      <div class="mm-stat__label">{{ 'DISABLED' | translate }}</div>
    </div>
  </div>

  <div class="mm-toolbar">
    <div class="mm-toolbar__left">
      <div class="mm-search">
        <clr-icon shape="search"></clr-icon>
        <input class="mm-search__input" type="text" [placeholder]="'SEARCH' | translate" [(ngModel)]="filterText" />
      </div>
    </div>
    <div class="mm-toolbar__right">
      <select class="mm-select" [(ngModel)]="statusFilter">
        <option value="All">{{ 'ALL' | translate }}</option>
        <option value="Enable">{{ 'ENABLED' | translate }}</option>
        <option value="Disable">{{ 'DISABLED' | translate }}</option>
      </select>
      <div class="mm-view-toggle">
        <button class="btn btn-sm" [class.btn-primary]="viewMode==='cards'" (click)="setViewMode('cards')">
          <clr-icon shape="view-cards"></clr-icon>
        </button>
        <button class="btn btn-sm" [class.btn-primary]="viewMode==='table'" (click)="setViewMode('table')">
          <clr-icon shape="table"></clr-icon>
        </button>
      </div>
    </div>
  </div>
  <!-- <table class="table">
    <thead>
      <tr>
        <th>NO.</th>
        <th>Menu Item Name</th>
        <th>ID</th>
        <th >Sequence</th>
        <th>Module Name</th>
        <th>Orignal Menu</th>
        <th>Status</th>
        <th>Submenu</th>
      </tr>
    </thead>
    <tbody>
      <TR align=middle bgColor=#ffffff vAlign=top>
        <TD class="x1l x4x" align=right>1. </TD>
        <TD class="x1l x4x" nowrap>
          <A href="viewmode">
     Home</A>
       </TD>
        <TD class="x1l x4x" align=left>500</TD>
        <TD class="x1l x4x">0</TD>
        <TD class="x1l x4x" align=left>main</TD>
        <TD class="x1l x4x">Home Menu</TD>
        <TD class="x1l x4x">E</TD>
        <TD class="x1l x4x" nowrap>
        <A href="MenuList.jsp?menu_item_id=500">
          <clr-icon shape="bullet-list"></clr-icon></A>
       </TD></TR>
       <TR align=middle bgColor=#ffffff vAlign=top>
        <TD class="x1l x4x" align=right>2. </TD>
        <TD class="x1l x4x" nowrap>
          <A href="MenuEdit.jsp?action=V&menu_item_id=2000&caller_menu_item_id=0">
     Admin</A>
       </TD>
        <TD class="x1l x4x" align=left>2000</TD>
        <TD class="x1l x4x">1</TD>
     <TD class="x1l x4x" align=left>-</TD>
        <TD class="x1l x4x">Home Menu</TD>
        <TD class="x1l x4x">E</TD>
        <TD class="x1l x4x" nowrap>
        <A href="MenuList.jsp?menu_item_id=2000">
          <clr-icon shape="bullet-list"></clr-icon></A>
       </TD></TR>
       <TR align=middle bgColor=#ffffff vAlign=top>
        <TD class="x1l x4x" align=right>3. </TD>
        <TD class="x1l x4x" nowrap>
          <A href="MenuEdit.jsp?action=V&menu_item_id=2500&caller_menu_item_id=0">
     Job</A>
       </TD>
        <TD class="x1l x4x" align=left>2500</TD>
        <TD class="x1l x4x">2</TD>
     <TD class="x1l x4x" align=left>-</TD>
        <TD class="x1l x4x">Home Menu</TD>
        <TD class="x1l x4x">E</TD>
        <TD class="x1l x4x" nowrap>
        <A href="MenuList.jsp?menu_item_id=2500">
          <clr-icon shape="bullet-list"></clr-icon></A>
       </TD></TR>
       <TR align=middle bgColor=#ffffff vAlign=top>
        <TD class="x1l x4x" align=right>4. </TD>
        <TD class="x1l x4x" nowrap>
          <A href="MenuEdit.jsp?action=V&menu_item_id=3000&caller_menu_item_id=0">
     Security</A>
       </TD>
        <TD class="x1l x4x" align=left>3000</TD>
        <TD class="x1l x4x">3</TD>
     <TD class="x1l x4x" align=left>-</TD>
        <TD class="x1l x4x">Home Menu</TD>
        <TD class="x1l x4x">E</TD>
        <TD class="x1l x4x" nowrap>
        <A href="MenuList.jsp?menu_item_id=3000">
          <clr-icon shape="bullet-list"></clr-icon></A>
       </TD></TR>
       <TR align=middle bgColor=#ffffff vAlign=top>
        <TD class="x1l x4x" align=right>5. </TD>
        <TD class="x1l x4x" nowrap>
          <A href="MenuEdit.jsp?action=V&menu_item_id=5000&caller_menu_item_id=0">
     Sure Board</A>
       </TD>
        <TD class="x1l x4x" align=left>5000</TD>
        <TD class="x1l x4x">4</TD>
     <TD class="x1l x4x" align=left>-</TD>
        <TD class="x1l x4x">Home Menu</TD>
        <TD class="x1l x4x">E</TD>
        <TD class="x1l x4x" nowrap>
        <A href="MenuList.jsp?menu_item_id=5000">
          <clr-icon shape="bullet-list"></clr-icon></A>
       </TD></TR>
       <TR align=middle bgColor=#ffffff vAlign=top>
        <TD class="x1l x4x" align=right>6. </TD>
        <TD class="x1l x4x" nowrap>
          <A href="MenuEdit.jsp?action=V&menu_item_id=6000&caller_menu_item_id=0">
     Projects</A>
       </TD>
        <TD class="x1l x4x" align=left>6000</TD>
        <TD class="x1l x4x">5</TD>
     <TD class="x1l x4x" align=left>-</TD>
        <TD class="x1l x4x">Home Menu</TD>
        <TD class="x1l x4x">E</TD>
        <TD class="x1l x4x" nowrap>
        <A href="MenuList.jsp?menu_item_id=6000">
          <clr-icon shape="bullet-list"></clr-icon></A>
       </TD></TR>


    </tbody>
  </table> -->

  <div class="mm-skeleton-list" *ngIf="loading">
    <div class="mm-skeleton-item" *ngFor="let i of [1,2,3,4,5,6]">
      <div class="mm-skel mm-skel--icon"></div>
      <div class="mm-skel mm-skel--title"></div>
      <div class="mm-skel mm-skel--meta"></div>
      <div class="mm-skel mm-skel--chip"></div>
      <div class="mm-skel mm-skel--link"></div>
      <div class="mm-skel mm-skel--badge"></div>
      <div class="mm-skel mm-skel--actions"></div>
    </div>
  </div>
  <div class="mm-card" *ngIf="viewMode==='table'">
    <clr-datagrid class="mm-grid mm-grid--modern" [clrDgLoading]="loading" [(clrDgSelected)]="selected">
      <clr-dg-placeholder><ng-template #loadingSpinner><clr-spinner>{{'LOADING'|translate}} ...
          </clr-spinner></ng-template>
        <div class="mm-empty" *ngIf="error;else loadingSpinner">
          <clr-icon shape="warning-standard"></clr-icon>
          <div class="mm-empty__title">{{ 'NO_DATA' | translate }}</div>
          <div class="mm-empty__subtitle">{{ error }}</div>
        </div>
      </clr-dg-placeholder>
      <clr-dg-column [clrDgField]="''" class="mm-col mm-col--icon">
        <ng-container *clrDgHideableColumn="{hidden: false}"></ng-container>
      </clr-dg-column>

      <clr-dg-column class="mm-col mm-col--no">
        <ng-container *clrDgHideableColumn="{hidden: false}">
          <span class="mm-col-title"><clr-icon shape="hashtag"></clr-icon> {{'NO' | translate}}</span>
        </ng-container>
      </clr-dg-column>

      <clr-dg-column class="mm-col mm-col--name">
        <ng-container *clrDgHideableColumn="{hidden: false}">
          <span class="mm-col-title"><clr-icon shape="tag"></clr-icon> {{'MENU_ITEM_NAME' | translate}}</span>
        </ng-container>
      </clr-dg-column>

      <clr-dg-column class="mm-col mm-col--id">
        <ng-container *clrDgHideableColumn="{hidden: false}">
          <span class="mm-col-title"><clr-icon shape="id-badge"></clr-icon> {{'ID' | translate}}</span>
        </ng-container>
      </clr-dg-column>

      <clr-dg-column class="mm-col mm-col--seq">
        <ng-container *clrDgHideableColumn="{hidden: false}">
          <span class="mm-col-title"><clr-icon shape="number-list"></clr-icon> {{'SEQUENCE' | translate}}</span>
        </ng-container>
      </clr-dg-column>

      <clr-dg-column class="mm-col mm-col--module">
        <ng-container *clrDgHideableColumn="{hidden: false}">
          <span class="mm-col-title"><clr-icon shape="application"></clr-icon> {{'MODULE_NAME' | translate}}</span>
        </ng-container>
      </clr-dg-column>

      <clr-dg-column class="mm-col mm-col--link">
        <ng-container *clrDgHideableColumn="{hidden: false}">
          <span class="mm-col-title"><clr-icon shape="link"></clr-icon> {{'MENU_ACTION_LINK' | translate}}</span>
        </ng-container>
      </clr-dg-column>

      <clr-dg-column class="mm-col mm-col--status">
        <ng-container *clrDgHideableColumn="{hidden: false}">
          <span class="mm-col-title"><clr-icon shape="shield-check"></clr-icon> {{'STATUS' | translate}}</span>
        </ng-container>
      </clr-dg-column>

      <clr-dg-column class="mm-col mm-col--submenu">
        <ng-container *clrDgHideableColumn="{hidden: false}">
          {{'SUB_MENU' | translate}}
        </ng-container>
      </clr-dg-column>

      <clr-dg-column class="mm-col mm-col--action">
        <ng-container *clrDgHideableColumn="{hidden: false}">
          <clr-icon shape="bars"></clr-icon>
          {{'ACTION' | translate}}
        </ng-container>
      </clr-dg-column>


      <clr-dg-row class="mm-row" *clrDgItems="let user of filteredMenus;let i = index" [clrDgItem]="user">
        <clr-dg-cell class="mm-cell mm-cell--icon">
          <span class="mm-icon-action"><clr-icon shape="edit" (click)="goToEdit(user)"
              class="is-error mm-icon-edit"></clr-icon></span>
        </clr-dg-cell>
        <clr-dg-cell class="mm-cell mm-cell--no">{{i+1}}</clr-dg-cell>
        <clr-dg-cell class="mm-cell mm-cell--name">
          <div class="mm-item">
            <div class="mm-item__avatar"><clr-icon shape="bookmark"></clr-icon></div>
            <div class="mm-item__text">
              <div class="mm-item__title">{{user.menuItemDesc}}</div>
              <div class="mm-item__meta">ID: {{user.menuId}} â¢ Seq: {{user.itemSeq}}</div>
            </div>
          </div>
        </clr-dg-cell>
        <clr-dg-cell class="mm-cell mm-cell--id">{{user.menuId}}</clr-dg-cell>
        <clr-dg-cell class="mm-cell mm-cell--seq">{{user.itemSeq}}</clr-dg-cell>
        <clr-dg-cell class="mm-cell mm-cell--module">
          <div class="mm-chip mm-chip--module">
            <clr-icon shape="application"></clr-icon>
            <span>{{user.moduleName}}</span>
          </div>
        </clr-dg-cell>
        <clr-dg-cell class="mm-cell mm-cell--link">
          <div class="mm-link">
            <clr-icon shape="link"></clr-icon>
            <span>{{user.main_menu_action_name}}</span>
          </div>
        </clr-dg-cell>
        <clr-dg-cell class="mm-cell mm-cell--status">
          <span class="mm-badge" [class.mm-badge--success]="user.status==='Enable'"
            [class.mm-badge--muted]="user.status!=='Enable'">{{user.status}}</span>
        </clr-dg-cell>
        <clr-dg-cell class="mm-cell mm-cell--submenu"><clr-icon shape="bullet-list" (click)="submenu(user.menuItemId)"
            class="mm-icon-link"></clr-icon> </clr-dg-cell>
        <clr-dg-cell class="mm-cell mm-cell--action">
          <div class="mm-actions-inline">
            <button class="btn btn-sm btn-outline" (click)="goToEdit(user)"><clr-icon shape="edit"></clr-icon></button>
            <button class="btn btn-sm btn-outline" (click)="onDelete(user)"><clr-icon shape="trash"></clr-icon></button>
          </div>
          <clr-signpost>
            <span class="mm-icon-action" clrSignpostTrigger><clr-icon shape="help"
                class="mm-icon-help"></clr-icon></span>
            <clr-signpost-content [clrPosition]="'left-middle'" *clrIfOpen>
              <h5 style="margin-top: 0">{{'WHO_COLUMN'|translate}} </h5>
              <div>{{'ACCOUNT_ID'|translate}} <code class="clr-code">{{user.accountId}}</code></div>
              <div>{{'CREATED_AT'|translate}} <code class="clr-code">{{user.createdAt| date}}</code></div>
              <div>{{'CREATED_BY'|translate}} <code class="clr-code">{{user.createdBy}}</code></div>
              <div>{{'UPDATED_AT'|translate}} <code class="clr-code">{{user.updatedAt | date}}</code></div>
              <div>{{'UPDATED_BY'|translate}} <code class="clr-code">{{user.updatedBy}}</code></div>
            </clr-signpost-content>
          </clr-signpost>
        </clr-dg-cell>
        <!-- <clr-dg-action-overflow>
        <button class="action-item" *ngIf="medit == 'true'"  (click)="goToEdit(user)">Edit <clr-icon shape="edit" class="is-error"></clr-icon></button>
        <button class="action-item" *ngIf="mdelete == 'true'"  (click)="onDelete(user)">Delete<clr-icon shape="trash" class="is-error"></clr-icon></button>
      </clr-dg-action-overflow> -->

        <clr-dg-row-detail *clrIfExpanded>
          <div class="mm-detail">
            <div class="mm-detail__row"><span>Menu Name</span><strong>{{user.menuItemDesc}}</strong></div>
            <div class="mm-detail__row"><span>Action Link</span><strong>{{user.main_menu_action_name}}</strong></div>
            <div class="mm-detail__row"><span>Module</span><strong>{{user.moduleName}}</strong></div>
          </div>
        </clr-dg-row-detail>
      </clr-dg-row>

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

  <div *ngIf="viewMode==='cards'">
    <div class="mm-cards">
      <div class="mm-card-item" *ngFor="let user of filteredMenus; let i = index">
        <div class="mm-card-item__header">
          <!-- <div class="mm-card-item__icon"><clr-icon [shape]="getIconShape(user)"></clr-icon></div> -->
          <div class="mm-card-item__title">{{user.menuItemDesc}}</div>
          <div class="mm-card-item__badge" [class.mm-badge--success]="user.status==='Enable'"
            [class.mm-badge--muted]="user.status!=='Enable'">{{user.status}}</div>
        </div>
        <div class="mm-card-item__body">
          <div class="mm-kv"><span>ID</span><strong>{{user.menuId}}</strong></div>
          <div class="mm-kv"><span>Sequence</span><strong>{{user.itemSeq}}</strong></div>
          <div class="mm-kv"><span>Module</span><strong>{{user.moduleName}}</strong></div>
          <div class="mm-kv mm-link"><clr-icon shape="link"></clr-icon><strong>{{user.main_menu_action_name}}</strong>
          </div>
        </div>
        <div class="mm-card-item__footer">
          <button class="btn btn-sm btn-outline" (click)="goToEdit(user)"><clr-icon shape="edit"></clr-icon>
            Edit</button>
          <button class="btn btn-sm btn-outline" (click)="onDelete(user)"><clr-icon shape="trash"></clr-icon>
            Delete</button>
          <button class="btn btn-sm" (click)="submenu(user.menuItemId)"><clr-icon shape="bullet-list"></clr-icon>
            Submenu</button>
        </div>
      </div>
    </div>
  </div>

  <clr-modal class="mm-modal" [(clrModalOpen)]="modalAdd" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
    <h3 class="modal-title">Add Menu Maintenance</h3>
    <div class="modal-body">
      <form [formGroup]="entryForm" (ngSubmit)="onSubmit()">
        <div class="clr-row">
          <!-- <div class="clr-col-sm-12">
            <label for="name">Menu Item ID<span class="required-field">*</span></label>
           <input type="text" class="clr-input" formControlName="menuItemId">
          </div> -->
          <div class="clr-col-sm-12">
            <label for="name">Menu ID<span class="required-field">*</span></label>
            <input type="text" class="clr-input" formControlName="menuId" name="menuId" [(ngModel)]="mainid" readonly>
          </div>
          <div class="clr-col-sm-12">
            <label for="name">Menu Item Name<span class="required-field">*</span></label>
            <input type="text" class="clr-input" formControlName="menuItemDesc">
            <div *ngIf="submitted && entryForm.controls.menuItemDesc.errors" class="error_mess">
              <div *ngIf="submitted && entryForm.controls.menuItemDesc.errors.required" class="error_mess">*This field
                is Required</div>
            </div>
          </div>
          <div class="clr-col-sm-12">
            <label for="tags">Sequence</label>
            <input type="text" class="clr-input" formControlName="itemSeq">
            <div *ngIf="submitted && entryForm.controls.itemSeq.errors" class="error_mess">
              <div *ngIf="submitted && entryForm.controls.itemSeq.errors.required" class="error_mess">*This field is
                Required</div>
            </div>
            <div *ngIf="submitted && entryForm.controls.itemSeq.errors" class="error_mess">
              <div *ngIf="submitted && entryForm.controls.itemSeq.errors.pattern" class="error_mess">*Required Only
                Number</div>
            </div>
          </div>
          <div class="clr-col-sm-12">
            <label for="tags">Module Name</label>
            <input type="text" class="clr-input" formControlName="moduleName">
            <div *ngIf="submitted && entryForm.controls.moduleName.errors" class="error_mess">
              <div *ngIf="submitted && entryForm.controls.moduleName.errors.required" class="error_mess">*This field is
                Required</div>
            </div>
          </div>
          <div class="clr-col-sm-12">
            <label for="tags">Status</label>
            <select id="" formControlName="status">
              <option value="Enable">Enable</option>
              <option value="Disable">Disable</option>
            </select>
            <div *ngIf="submitted && entryForm.controls.status.errors" class="error_mess">
              <div *ngIf="submitted && entryForm.controls.status.errors.required" class="error_mess">*This field is
                Required</div>
            </div>
          </div>
          <div class="clr-col-sm-12">
            <label for="tags">Menu Action Link</label>
            <input type="text" class="clr-input" formControlName="main_menu_action_name">
            <div *ngIf="submitted && entryForm.controls.main_menu_action_name.errors" class="error_mess">
              <div *ngIf="submitted && entryForm.controls.main_menu_action_name.errors.required" class="error_mess">
                *This field is Required</div>
            </div>
            <!-- <select NAME="menu_id" >
                  <option SELECTED >Home Menu
                          <OPTION >Home
      <OPTION >Job

      <OPTION >&nbsp;&nbsp;&nbsp;Job logs
      <OPTION >&nbsp;&nbsp;&nbsp;Pending Jobs
      <OPTION >&nbsp;&nbsp;&nbsp;Defined Jobs
      <OPTION >&nbsp;&nbsp;&nbsp;Surewebsocket

      <OPTION >Security
      <OPTION >&nbsp;&nbsp;&nbsp;User Maintance
      <OPTION >&nbsp;&nbsp;&nbsp;User Group Maintance
      <OPTION >&nbsp;&nbsp;&nbsp;System parametrs
      <OPTION >&nbsp;&nbsp;&nbsp;Menu access control
      <OPTION >&nbsp;&nbsp;&nbsp;Menu Maintance

      <OPTION >SureBoard
      <OPTION >&nbsp;&nbsp;&nbsp;Road Map
      <OPTION >&nbsp;&nbsp;&nbsp;Iteration Release
      <OPTION >&nbsp;&nbsp;&nbsp;Milestone
      <OPTION >&nbsp;&nbsp;&nbsp;Goal
      <OPTION >&nbsp;&nbsp;&nbsp;Wbs Task Board


      <OPTION >Projects
      <OPTION >&nbsp;&nbsp;&nbsp;My projects
      <OPTION >&nbsp;&nbsp;&nbsp;All Projects
      <OPTION >&nbsp;&nbsp;&nbsp;Templates
      <OPTION >&nbsp;&nbsp;&nbsp;Repositories
      <OPTION >&nbsp;&nbsp;&nbsp;Recently Modify
      <OPTION >&nbsp;&nbsp;&nbsp;Recently Archived
      <OPTION >&nbsp;&nbsp;&nbsp;Shared with Me
      <OPTION >&nbsp;&nbsp;&nbsp;My Fav



      </select> -->
          </div>
          <div class="clr-col-sm-12">
            <label for="tags">Menu Icon Name</label>
            <input type="text" class="clr-input" formControlName="main_menu_icon_name">
            <div *ngIf="submitted && entryForm.controls.main_menu_icon_name.errors" class="error_mess">
              <div *ngIf="submitted && entryForm.controls.main_menu_icon_name.errors.required" class="error_mess">*This
                field is Required</div>
            </div>
          </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 class="mm-modal" [(clrModalOpen)]="modaldelete" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">

    <div class="modal-body" *ngIf="rowSelected.menuItemId">
      <h1 class="delete">Are You Sure Want to delete?</h1>
      <h2 class="heading">{{rowSelected.menuItemId}}</h2>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline" (click)="modaldelete = false">Cancel</button>
        <button type="submit" (click)="delete(rowSelected.menuItemId)" class="btn btn-primary">Delete</button>
      </div>
    </div>
  </clr-modal>


  <clr-modal class="mm-modal" [(clrModalOpen)]="modaledit" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
    <h3 class="modal-title">Update Menu Maintenance</h3>
    <div class="modal-body" *ngIf="rowSelected.menuItemId">
      <h2 class="heading">{{rowSelected.menuItemId}}</h2>
      <form (ngSubmit)="onUpdate(rowSelected.menuItemId)">
        <div class="clr-row">

          <div class="clr-col-sm-12">
            <label for="name">Menu ID<span class="required-field">*</span></label>
            <input type="text" class="clr-input" name="menuId" [(ngModel)]="rowSelected.menuId" readonly>
          </div>
          <div class="clr-col-sm-12">
            <label for="name">Menu Item Name<span class="required-field">*</span></label>
            <input type="text" class="clr-input" name="menuItemDesc" [(ngModel)]="rowSelected.menuItemDesc">
          </div>
          <div class="clr-col-sm-12">
            <label for="tags">Sequence</label>
            <input type="text" class="clr-input" name="itemSeq" [(ngModel)]="rowSelected.itemSeq">
          </div>
          <div class="clr-col-sm-12">
            <label for="tags">Module Name</label>
            <input type="text" class="clr-input" name="moduleName" [(ngModel)]="rowSelected.moduleName">
          </div>
          <div class="clr-col-sm-12">
            <label for="tags">Status</label>
            <select id="" name="status" [(ngModel)]="rowSelected.status">
              <option value="Enable">Enable</option>
              <option value="Disable">Disable</option>
            </select>
          </div>
          <div class="clr-col-sm-12">
            <label for="tags">Menu Action Link</label>
            <input type="text" class="clr-input" name="main_menu_action_name"
              [(ngModel)]="rowSelected.main_menu_action_name">
          </div>
          <div class="clr-col-sm-12">
            <label for="tags">Menu Icon Name </label>
            <input type="text" class="clr-input" name="main_menu_icon_name"
              [(ngModel)]="rowSelected.main_menu_icon_name">
          </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>


  <clr-modal class="mm-modal" [(clrModalOpen)]="modalCsv" [clrModalSize]="'sm'" [clrModalStaticBackdrop]="false">
    <h3 class="modal-title">Import File</h3>
    <div class="modal-body">
      <input type="file" name="file" class="file" (change)="selectFile($event)"
        accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel">
    </div>
    <div class="modal-footer">
      <button class="btn btn-primary" type="button" [disabled]="!selectedFiles" (click)="saveCsv()">Import</button>
    </div>
  </clr-modal>
</div>