cmc/support-portal-frontend/src/app/component/service-tile/service-tile.component.html

<div class="service-tile-layout">
  <app-menu class="sidebar"></app-menu>

  <div class="service-tile-content">
    <div class="service-tile-header">
      <div class="header-left">
        <h1 class="page-title">Service Tiles Management</h1>
        <p class="page-subtitle">Manage homepage service tiles</p>
      </div>
      <div class="header-actions">
        <div class="search-box">
          <i class="fa fa-search"></i>
          <input name="searchTerm" #searchTerm="ngModel" class="search-input"
            type="search" ngModel placeholder="Search service tiles..."
            (ngModelChange)="searchServiceTiles(searchTerm.value)">
        </div>

        <button *ngIf="isManager" class="btn-primary" (click)="openAddModal()">
          <i class="fa fa-plus"></i> New Service Tile
        </button>

        <button class="btn-refresh" (click)="getServiceTiles(true)">
          <i class="fas fa-sync" [ngClass]="{'fa-spin': refreshing }"></i>
        </button>
      </div>
    </div>

    <div class="service-tiles-list" *ngIf="serviceTiles?.length > 0">
      <div *ngFor="let serviceTile of serviceTiles" class="service-tile-card"
        [class.inactive]="!serviceTile?.isActive">

        <div class="service-tile-content-area"
          (click)="onSelectServiceTile(serviceTile)">
          <div class="service-tile-info">
            <div class="service-tile-header-row">
              <h3>{{ serviceTile?.title }}</h3>
              <span class="status-badge"
                [class.status-active]="serviceTile?.isActive"
                [class.status-inactive]="!serviceTile?.isActive">
                <i class="fa"
                  [class.fa-check-circle]="serviceTile?.isActive"
                  [class.fa-times-circle]="!serviceTile?.isActive"></i>
                {{ serviceTile?.isActive ? 'Active' : 'Inactive' }}
              </span>
            </div>
            <p class="description" *ngIf="serviceTile?.description">
              {{ serviceTile.description }}</p>
            <div class="order-badge">Order: {{ serviceTile?.displayOrder }}</div>
          </div>
        </div>

        <div class="service-tile-actions">
          <button class="btn-action btn-toggle"
            (click)="onToggleActive(serviceTile); $event.stopPropagation()">
            <i class="fas"
              [class.fa-toggle-on]="serviceTile?.isActive"
              [class.fa-toggle-off]="!serviceTile?.isActive"></i>
          </button>

          <button class="btn-action btn-edit"
            (click)="onEditServiceTile(serviceTile); $event.stopPropagation()">
            <i class="fas fa-edit"></i>
          </button>

          <button *ngIf="isAdmin" class="btn-action btn-delete"
            (click)="onDeleteServiceTile(serviceTile); $event.stopPropagation()">
            <i class="fas fa-trash"></i>
          </button>
        </div>
      </div>
    </div>

    <div *ngIf="refreshing" class="loading-state">
      <div class="loading-spinner">
        <i class="fas fa-spinner fa-spin"></i>
      </div>
      <p>Loading service tiles...</p>
    </div>

    <div *ngIf="!refreshing && (!serviceTiles || serviceTiles.length === 0)"
      class="empty-state">
      <div class="empty-icon">
        <i class="fa fa-th-large"></i>
      </div>
      <h3>No service tiles yet</h3>
      <p>Get started by creating your first service tile</p>
      <button *ngIf="isManager" class="btn-primary" (click)="openAddModal()">
        <i class="fa fa-plus"></i> Create Your First Service Tile
      </button>
    </div>

    <!-- View Modal -->
    <div class="modal fade" #viewServiceTileModal tabindex="-1">
      <div class="modal-dialog modal-lg">
        <div class="modal-content" *ngIf="selectedServiceTile">
          <div class="modal-header">
            <h3>Service Tile Details</h3>
            <button type="button" class="modal-close" data-bs-dismiss="modal">
              <i class="fa fa-times"></i>
            </button>
          </div>
          <div class="modal-body">
            <div class="service-tile-detail-card">
              <div class="detail-item"><span class="detail-label">Title:</span>
                <span class="detail-value">{{ selectedServiceTile.title }}</span>
              </div>
              <div class="detail-item"><span
                  class="detail-label">Description:</span>
                <span class="detail-value">{{ selectedServiceTile.description }}</span>
              </div>
              <div class="detail-item"><span class="detail-label">Display
                  Order:</span>
                <span class="detail-value">{{ selectedServiceTile.displayOrder }}</span>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button class="btn-secondary" data-bs-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Add Modal -->
    <div class="modal fade" #addServiceTileModal tabindex="-1">
      <div class="modal-dialog modal-lg">
        <form class="modal-content" #newServiceTileForm="ngForm"
          (ngSubmit)="onAddNewServiceTile(newServiceTileForm)">
          <div class="modal-header">
            <h3>Add New Service Tile</h3>
            <button type="button" class="modal-close" data-bs-dismiss="modal">
              <i class="fa fa-times"></i></button>
          </div>
          <div class="modal-body">
            <div class="form-section">
              <div class="form-group">
                <label>Title *</label>
                <input class="form-input" name="title" ngModel required>
              </div>
              <div class="form-group">
                <label>Description *</label>
                <textarea class="form-textarea" name="description" ngModel required></textarea>
              </div>
              <div class="form-group">
                <label>Display Order</label>
                <input type="number" class="form-input" name="displayOrder"
                  ngModel value="0">
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button class="btn-secondary" type="button"
              data-bs-dismiss="modal">Cancel</button>
            <button class="btn-primary" type="submit"
              [disabled]="newServiceTileForm.invalid">
              <i class="fa fa-save"></i> Create
            </button>
          </div>
        </form>
      </div>
    </div>

    <!-- Edit Modal -->
    <div class="modal fade" #editServiceTileModal tabindex="-1">
      <div class="modal-dialog modal-lg">
        <form class="modal-content" #editServiceTileForm="ngForm"
          *ngIf="selectedServiceTile"
          (ngSubmit)="onUpdateServiceTile(editServiceTileForm)">
          <div class="modal-header">
            <h3>Edit Service Tile</h3>
            <button type="button" class="modal-close" data-bs-dismiss="modal">
              <i class="fa fa-times"></i></button>
          </div>
          <div class="modal-body">
            <div class="form-section">
              <div class="form-group">
                <label>Title *</label>
                <input class="form-input" name="title" [(ngModel)]="selectedServiceTile.title" required>
              </div>
              <div class="form-group">
                <label>Description *</label>
                <textarea class="form-textarea" name="description" [(ngModel)]="selectedServiceTile.description" required></textarea>
              </div>
              <div class="form-group">
                <label>Display Order</label>
                <input type="number" class="form-input" name="displayOrder"
                  [(ngModel)]="selectedServiceTile.displayOrder">
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button class="btn-secondary" type="button"
              data-bs-dismiss="modal">Cancel</button>
            <button class="btn-primary" type="submit"
              [disabled]="editServiceTileForm.invalid">
              <i class="fa fa-save"></i> Save Changes
            </button>
          </div>
        </form>
      </div>
    </div>

  </div>
</div>