<div class="container text-center">
  <h3>Welcome</h3>
  <table
    class="container"
    id="newsTable"
    style="
      margin: 30px;
      border: 1px solid;
      border-color: black;
      border-collapse: collapse;
    "
  >
    <thead>
      <tr>
        <th>Title</th>
        <th>Content</th>
        <th>Category</th>
        <th>Date</th>
        <th>Producer</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      @for (item of news; track $index) {
      <tr>
        <td>{{ item.title }}</td>
        <td>{{ item.news_text }}</td>
        <td>{{ item.category }}</td>
        <td>{{ item.date }}</td>
        <td>{{ item.producer }}</td>
        <td>
          <button
            class="btn btn-danger"
            name="deleteButton"
            (click)="editNews(item.id)"
          >
            Edit
          </button>
        </td>
      </tr>
      }
    </tbody>
    <button
      type="submit"
      class="btn btn-primary"
      name="addNewsButton"
      (click)="addNews()"
      style="margin: 30px"
    >
      Add news
    </button>
    <button
      type="submit"
      class="btn btn-dark"
      name="logoutButton"
      (click)="logout()"
      style="margin: 30px"
    >
      Log out
    </button>
  </table>
</div>
