DTFluxTitrage-Client/src/app/view/components/list-item/list-item.component.html

<!-- src/app/view/components/list-item/list-item.component.html -->
<div [class]="rowClass" (click)="onRowClick()">

  <!-- Edit Action -->
  <div class="item-column actions-column">
    <button 
      class="action-btn edit-btn"
      (click)="onEditClick()"
      [disabled]="isEditing()"
      [title]="'Edit title sheet'"
      type="button">
      <i class="fas fa-cog" aria-hidden="true"></i>
    </button>
  </div>

  <!-- Last Name -->
  <div class="item-column data-column" (click)="onCellClick('LastName', $event)">
    @if (isFieldEditing('LastName')) {
      <input
        #editInput
        type="text"
        class="edit-input"
        [value]="getFieldValue('LastName')"
        (input)="onInputChange('LastName', $event)"
        (keydown)="onInputKeyDown($event)"
        (blur)="onInputBlur()"
        placeholder="Last name..."
        maxlength="50">
    } @else {
      <span class="cell-content" [class.empty]="!titleSheet().LastName">
        {{ titleSheet().LastName || 'No last name' }}
      </span>
    }
  </div>

  <!-- First Name -->
  <div class="item-column data-column" (click)="onCellClick('FirstName', $event)">
    @if (isFieldEditing('FirstName')) {
      <input
        #editInput
        type="text"
        class="edit-input"
        [value]="getFieldValue('FirstName')"
        (input)="onInputChange('FirstName', $event)"
        (keydown)="onInputKeyDown($event)"
        (blur)="onInputBlur()"
        placeholder="First name..."
        maxlength="50">
    } @else {
      <span class="cell-content" [class.empty]="!titleSheet().FirstName">
        {{ titleSheet().FirstName || 'No first name' }}
      </span>
    }
  </div>

  <!-- Function 1 -->
  <div class="item-column data-column" (click)="onCellClick('Function1', $event)">
    @if (isFieldEditing('Function1')) {
      <input
        #editInput
        type="text"
        class="edit-input"
        [value]="getFieldValue('Function1')"
        (input)="onInputChange('Function1', $event)"
        (keydown)="onInputKeyDown($event)"
        (blur)="onInputBlur()"
        placeholder="Primary function..."
        maxlength="100">
    } @else {
      <span class="cell-content" [class.empty]="!titleSheet().Function1">
        {{ titleSheet().Function1 || 'No function' }}
      </span>
    }
  </div>

  <!-- Function 2 -->
  <div class="item-column data-column" (click)="onCellClick('Function2', $event)">
    @if (isFieldEditing('Function2')) {
      <input
        #editInput
        type="text"
        class="edit-input"
        [value]="getFieldValue('Function2')"
        (input)="onInputChange('Function2', $event)"
        (keydown)="onInputKeyDown($event)"
        (blur)="onInputBlur()"
        placeholder="Secondary function..."
        maxlength="100">
    } @else {
      <span class="cell-content" [class.empty]="!titleSheet().Function2">
        {{ titleSheet().Function2 || 'No secondary function' }}
      </span>
    }
  </div>

  <!-- Control Actions -->
  <div class="item-column controls-column">
    <div class="control-buttons">
      
      <!-- Play Button -->
      @if (!isPlaying()) {
        <button 
          class="control-btn play-btn"
          (click)="onPlayClick()"
          [title]="'Play rundown'"
          type="button">
          <i class="fas fa-play" aria-hidden="true"></i>
        </button>
      } @else {
        <button 
          class="control-btn stop-btn"
          (click)="onStopClick()"
          [title]="'Stop rundown'"
          type="button">
          <i class="fas fa-stop" aria-hidden="true"></i>
        </button>
      }

      <!-- Delete Button -->
      <button 
        class="control-btn delete-btn"
        (click)="onDeleteClick()"
        [title]="'Delete title sheet'"
        type="button">
        <i class="fas fa-trash" aria-hidden="true"></i>
      </button>
      
    </div>
  </div>

</div>