Bonsai-webapp/src/app/issues/issue-detail/issue-detail.html

<header class="page-header">
  <div>
    <h1>Detail de l'issue</h1>
    <p>Informations de creation et de suivi de l'issue.</p>
  </div>
  <div class="header-meta">
    @if (!isEditing) {
      <div class="status-inline">
        <span class="status-label">Status</span>
        <select
          class="status-select"
          [ngModel]="issue.status"
          (ngModelChange)="updateStatus($event)"
        >
          @for (status of statusOptions; track status) {
            <option [value]="status">{{ status }}</option>
          }
        </select>
      </div>
    }

    <div class="header-actions">
    @if (!isEditing) {
      <button type="button" class="edit-button" (click)="startEdit()">Editer l'issue</button>
    }
      <div class="more-wrapper">
        <button type="button" class="more-button" (click)="toggleMoreMenu()">More ▾</button>

        @if (moreMenuOpen) {
          <div class="more-menu">
            <button type="button" class="more-menu-item delete-action" (click)="deleteIssue()">
              Supprimer
            </button>
          </div>
        }
      </div>
    </div>
  </div>
</header>

<section class="detail-card" aria-label="Informations de l'issue">
  <table>
    <tbody>
      <tr>
        <th>ID</th>
        <td>{{ issue.id }}</td>
      </tr>
      <tr>
        <th>Nom</th>
        <td>
          @if (isEditing) {
            <input type="text" [(ngModel)]="issue.name" />
          } @else {
            {{ issue.name || '-' }}
          }
        </td>
      </tr>
      <tr>
        <th>Epic</th>
        <td>
          @if (isEditing) {
            <input type="text" [(ngModel)]="issue.epic" />
          } @else {
            {{ issue.epic || '-' }}
          }
        </td>
      </tr>
      <tr>
        <th>Depend de</th>
        <td>
          @if (isEditing) {
            <select multiple [(ngModel)]="dependencyIds" class="dependency-multiselect">
              @for (candidate of dependencyCandidates; track candidate.id) {
                <option [ngValue]="candidate.id">
                  #{{ candidate.id }} - {{ candidate.name || 'Sans nom' }}
                </option>
              }
            </select>
          } @else {
            {{ resolveDependencyLabels(dependencyIds) }}
          }
        </td>
      </tr>
      <tr>
        <th>Assignee</th>
        <td>
          @if (isEditing) {
            <input type="text" [(ngModel)]="issue.assignee" />
          } @else {
            {{ issue.assignee || '-' }}
          }
        </td>
      </tr>
      <tr>
        <th>Date d'echeance</th>
        <td>
          @if (isEditing) {
            <input type="date" [(ngModel)]="issue.dueDate" />
          } @else {
            {{ issue.dueDate || '-' }}
          }
        </td>
      </tr>
      <tr>
        <th>Temps estimé</th>
        <td>
          @if (isEditing) {
            <input type="number" min="0" step="0.5" [(ngModel)]="estimatedTimeValue" />
          } @else {
            {{ estimatedTimeValue !== null ? estimatedTimeValue + ' h' : '-' }}
          }
        </td>
      </tr>
      <tr>
        <th>Description</th>
        <td>
          @if (isEditing) {
            <textarea rows="4" [(ngModel)]="issue.description"></textarea>
          } @else {
            {{ issue.description || '-' }}
          }
        </td>
      </tr>
      <tr>
        <th>Priorite</th>
        <td>
          @if (isEditing) {
            <select [(ngModel)]="issue.priority">
              <option value="Basse">Basse</option>
              <option value="Moyenne">Moyenne</option>
              <option value="Haute">Haute</option>
            </select>
          } @else {
            {{ issue.priority }}
          }
        </td>
      </tr>
      <tr>
        <th>Status</th>
        <td>
          @if (isEditing) {
            <select [(ngModel)]="issue.status">
              <option value="draft">draft</option>
              <option value="todo">todo</option>
              <option value="done">done</option>
              <option value="in-progress">in-progress</option>
            </select>
          } @else {
            {{ issue.status }}
          }
        </td>
      </tr>
      <tr>
        <th>Progression</th>
        <td>
          @if (isEditing) {
            <input type="number" min="0" max="100" [(ngModel)]="issue.progress" />
          } @else {
            {{ issue.progress }}%
          }
        </td>
      </tr>
    </tbody>
  </table>
</section>

@if (isEditing) {
  <div class="form-actions">
    <button type="button" class="cancel-button" (click)="cancelEdit()">Annuler</button>
    <button type="button" class="save-button" (click)="saveIssue()">Enregistrer</button>
  </div>
}