tutorial-details.component.html

@if (viewMode){
  @if (currentTutorial.id){
  <h4>Tutorial</h4>
  <div>
    <label><strong>Title:</strong></label> {{ currentTutorial.title }}
  </div>
  <div>
    <label><strong>Description:</strong></label>
    {{ currentTutorial.description }}
  </div>
  <div>
    <label><strong>Status:</strong></label>
    {{ currentTutorial.published ? "Published" : "Pending" }}
  </div>

  <a class="badge badge-warning" routerLink="/tutorials/{{ currentTutorial.id }}">
    Edit
  </a>
  } @else {<p>Please click on a Tutorial...</p>}
} @else {
  @if (currentTutorial.id) {
  <div class="edit-form">
    <h4>Tutorial</h4>
    <form>
      <div class="form-group">
        <label for="title">Title</label>
        <input
          type="text"
          class="form-control"
          id="title"
          [(ngModel)]="currentTutorial.title"
          name="title"
        />
      </div>
      <div class="form-group">
        <label for="description">Description</label>
        <input
          type="text"
          class="form-control"
          id="description"
          [(ngModel)]="currentTutorial.description"
          name="description"
        />
      </div>

      <div class="form-group">
        <label><strong>Status:</strong></label>
        {{ currentTutorial.published ? "Published" : "Pending" }}
      </div>
    </form>

    @if (currentTutorial.published) {
    <button class="badge badge-primary mr-2"
      (click)="updatePublished(false)" >
      UnPublish
    </button>
    } @else {
    <button class="badge badge-primary mr-2" (click)="updatePublished(true)">
      Publish
    </button>
    }

    <button class="badge badge-danger mr-2" (click)="deleteTutorial()">
      Delete
    </button>

    <button
      type="submit"
      class="badge badge-success mb-2"
      (click)="updateTutorial()">
      Update
    </button>
    <p>{{ message }}</p>
  </div>
  } @else {<p>Cannot access this Tutorial...</p>}
}