ChurchAngular/src/app/games/massive-darkness2/md2-mob-info-maintenance/md2-mob-info-detail/md2-mob-info-detail.component.html

<div class="k-dialog-content detail-container">
  <div class="mob-info-section">
    <h3>{{ mobInfo?.name }}</h3>
    <div class="info-grid">
      <div class="info-item">
        <label>Type:</label>
        <span>{{ getMobTypeName(mobInfo?.type) }}</span>
      </div>
      <div class="info-item">
        <label>Game Bundle:</label>
        <span>{{ getGameBundleName(mobInfo?.from) }}</span>
      </div>
      <div class="info-item">
        <label>Leader Image:</label>
        <span>{{ mobInfo?.leaderImgUrl || 'N/A' }}</span>
      </div>
      <div class="info-item">
        <label>Minion Image:</label>
        <span>{{ mobInfo?.minionImgUrl || 'N/A' }}</span>
      </div>
    </div>
  </div>

  <kendo-tabstrip tabPosition="top">
    <kendo-tabstrip-tab title="Levels" [selected]="true">
      <ng-template kendoTabContent>
        <div class="levels-toolbar">
          <button kendoButton (click)="addLevelHandler()" [primary]="true">
            <span class="k-icon k-i-plus"></span> Add Level
          </button>
        </div>

        <kendo-grid #levelsGrid [data]="mobLevelInfos" [loading]="isLoading" [pageSize]="levelsState.take"
          [skip]="levelsState.skip" [sortable]="true" [filterable]="true" [pageable]="true" [height]="300"
          (remove)="removeLevelHandler($event)" (dataStateChange)="levelsState = $event">

          <kendo-grid-column field="level" title="Level" [width]="50">
            <ng-template kendoGridCellTemplate let-dataItem>
              {{ dataItem.level }}
            </ng-template>
          </kendo-grid-column>

          <!-- <kendo-grid-column field="fixedHp" title="HP" [width]="80">
        <ng-template kendoGridCellTemplate let-dataItem>
          {{ dataItem.fixedHp }}
        </ng-template>
        <ng-template kendoGridEditTemplate let-dataItem="dataItem" let-rowIndex="rowIndex">
          <kendo-numerictextbox [(ngModel)]="dataItem.fixedHp" [name]="'fixedHp_' + rowIndex" [min]="0" [decimals]="0"
            [format]="'n0'">
          </kendo-numerictextbox>
        </ng-template>
      </kendo-grid-column> -->

          <kendo-grid-column field="hpPerHero" title="HP/Hero" [width]="80">
            <ng-template kendoGridCellTemplate let-dataItem>
              {{ dataItem.hpPerHero }}
            </ng-template>
          </kendo-grid-column>

          <!-- <kendo-grid-column field="actions" title="Actions" [width]="100">
        <ng-template kendoGridCellTemplate let-dataItem>
          {{ dataItem.actions }}
        </ng-template>
        <ng-template kendoGridEditTemplate let-dataItem="dataItem" let-rowIndex="rowIndex">
          <kendo-numerictextbox [(ngModel)]="dataItem.actions" [name]="'actions_' + rowIndex" [min]="0" [decimals]="0"
            [format]="'n0'">
          </kendo-numerictextbox>
        </ng-template>
      </kendo-grid-column> -->

          <kendo-grid-column field="rewardTokens" title="Reward Tokens" [width]="80">
            <ng-template kendoGridCellTemplate let-dataItem>
              {{ dataItem.rewardTokens }}
            </ng-template>
          </kendo-grid-column>

          <kendo-grid-column field="fixedRareTreasure" title="Rare Treasure" [width]="80">
            <ng-template kendoGridCellTemplate let-dataItem>
              {{ dataItem.fixedRareTreasure }}
            </ng-template>
          </kendo-grid-column>

          <kendo-grid-column field="fixedEpicTreasure" title="Epic Treasure" [width]="80">
            <ng-template kendoGridCellTemplate let-dataItem>
              {{ dataItem.fixedEpicTreasure }}
            </ng-template>
          </kendo-grid-column>

          <kendo-grid-column field="fixedLegendTreasure" title="Legend Treasure" [width]="60">
            <ng-template kendoGridCellTemplate let-dataItem>
              {{ dataItem.fixedLegendTreasure }}
            </ng-template>
          </kendo-grid-column>
          <!-- result.defenceInfo.blue
      result.defenceInfo.green -->
          <kendo-grid-column field="defenceInfo.blue" title="Blue Dice" [width]="60">
            <ng-template kendoGridCellTemplate let-dataItem>
              {{ dataItem.defenceInfo?.blue }}
            </ng-template>
          </kendo-grid-column>

          <kendo-grid-command-column title="Actions" [width]="133">
            <ng-template kendoGridCellTemplate let-isNew="isNew" let-dataItem="dataItem" let-rowIndex="rowIndex">
              <button kendoButton [primary]="true" (click)="editLevelHandler(dataItem)">Edit</button>
              <button kendoGridRemoveCommand>Remove</button>
            </ng-template>
          </kendo-grid-command-column>
        </kendo-grid>
      </ng-template>
    </kendo-tabstrip-tab>
    <kendo-tabstrip-tab title="Skills">
      <ng-template kendoTabContent>
        <div class="skills-toolbar">
          <button kendoButton (click)="addSkillHandler()" [primary]="true">
            <span class="k-icon k-i-plus"></span> Add Skill
          </button>
        </div>

        <kendo-grid #skillsGrid [data]="skillsData" [loading]="isLoading" [pageSize]="skillsState.take"
          [skip]="skillsState.skip" [sortable]="true" [filterable]="true" [pageable]="true" [height]="400"
          (remove)="removeSkillHandler($event)" (dataStateChange)="skillsState = $event">


          <kendo-grid-column field="seq" title="Seq" [width]="80">
            <ng-template kendoGridCellTemplate let-dataItem>
              {{ dataItem.seq }}
            </ng-template>
          </kendo-grid-column>
          <kendo-grid-column field="level" title="Level" [width]="80">
            <ng-template kendoGridCellTemplate let-dataItem>
              {{ dataItem.level }}
            </ng-template>
          </kendo-grid-column>
          <kendo-grid-column field="name" title="Name" [width]="150">
            <ng-template kendoGridCellTemplate let-dataItem>
              {{ dataItem.name }}
            </ng-template>
          </kendo-grid-column>

          <kendo-grid-column field="type" title="Type" [width]="120">
            <ng-template kendoGridCellTemplate let-dataItem>
              {{ getSkillTypeName(dataItem.type) }}
            </ng-template>
          </kendo-grid-column>

          <kendo-grid-column field="skillTarget" title="Target" [width]="150">
            <ng-template kendoGridCellTemplate let-dataItem>
              {{ getSkillTargetName(dataItem.skillTarget) }}
            </ng-template>
          </kendo-grid-column>

          <kendo-grid-column field="skillRoll" title="Skill Roll" [width]="100">
            <ng-template kendoGridCellTemplate let-dataItem>
              {{ dataItem.skillRoll }}
            </ng-template>
          </kendo-grid-column>

          <kendo-grid-column field="clawRoll" title="Claw Roll" [width]="100">
            <ng-template kendoGridCellTemplate let-dataItem>
              {{ dataItem.clawRoll }}
            </ng-template>
          </kendo-grid-column>


          <kendo-grid-column field="description" title="Description" [width]="300">
            <ng-template kendoGridCellTemplate let-dataItem>
              <div *ngIf="dataItem.type == MobSkillType.ConditionalSkill" [innerHTML]="dataItem.skillCondition"></div>
              <div [innerHTML]="dataItem.description"></div>
            </ng-template>
          </kendo-grid-column>

          <kendo-grid-command-column title="Actions" [width]="133">
            <ng-template kendoGridCellTemplate let-isNew="isNew" let-dataItem="dataItem" let-rowIndex="rowIndex">
              <button kendoButton [primary]="true" (click)="editSkillHandler(dataItem)">Edit</button>
              <button kendoGridRemoveCommand>Remove</button>
            </ng-template>
          </kendo-grid-command-column>
        </kendo-grid>
      </ng-template>
    </kendo-tabstrip-tab>
  </kendo-tabstrip>

</div>

<kendo-dialog-actions>
  <button kendoButton [primary]="true" (click)="close()">Close</button>
</kendo-dialog-actions>