<div *ngIf="Job; else loadingOrError">
  <div class="header flex items-center space-x-4">
    <img
      *ngIf="Job.company_logo"
      [src]="Job.company_logo"
      alt="{{ Job.company }} Logo"
      class="company-logo w-16 h-16 object-contain"
    />
    <h2 class="tw-text-2xl tw-font-bold">{{ Job.title }}</h2>
  </div>
  <div class="details mt-4">
    <p *ngIf="Job.type"><strong>Loại công việc:</strong> {{ Job.type }}</p>
    <p *ngIf="Job.company">
      <strong>Công ty:</strong>
      <a>{{ Job.company }}</a
      >
      <span *ngIf="!Job.company_url">{{ Job.company }}</span>
    </p>
    <p *ngIf="Job.location"><strong>Vị trí:</strong> {{ Job.location }}</p>
    <p class="tw-text-sm tw-text-gray-500">
      <strong>Ngày đăng:</strong> {{ Job.created_at | date : "medium" }}
    </p>
  </div>
  <hr class="my-4" />
  <div class="description mt-6">
    <p [innerHTML]="Job.description"></p>
  </div>


</div>

<ng-template #loadingOrError>
  <div class="status-message">
    <p *ngIf="Job === null" class="error text-red-500">
      Có lỗi khi tải thông tin công việc.
    </p>
    <p *ngIf="Job === undefined" class="loading">Đang tải...</p>
  </div>
</ng-template>