<script lang="ts">
  import GenericForm from "./GenericForm.svelte";
  import type { News } from "./Models.svelte.ts";

  let { showModal = $bindable(), role } = $props();

  let formdata: News = {
    newsTitle: "",
    newsText: "",
    id: 0,
    newsDate: new Date(),
    newsPublish: new Date(),
    display: 0,
  };

  let columns: string[] = ["newsTitle", "newsText", "newsDate", "newsPublish"];

  function closeModal() {
    showModal = false;
  }

  function submitForm(data: News) {
    closeModal();
    console.log("News Form Submitted:", data, role);
  }
</script>

<div class="modal-dialog" role="document">
  <div class="modal-content">
    <div class="modal-header">
      <h5 class="modal-title">{role} News</h5>
    </div>
    <div class="modal-body">
      <GenericForm formData={formdata} onSubmit={submitForm}>
        {#each columns as col}
          <div class="mb-3">
            <label for={col}>{col}:</label>
            <input
              id={col}
              type="text"
              bind:value={formdata[col as keyof News]}
            />
          </div>
        {/each}
      </GenericForm>
    </div>
    <div class="modal-footer justify-content-end">
      <button type="button" class="btn btn-secondary" onclick={closeModal}
        >Close</button
      >
    </div>
  </div>
</div>
