<script>
    export let article_data;
    const status_items = [
        {name: 'Title', value: article_data.title},
        {name: 'Filename', value: article_data.file_name},
        {name: 'Language', value: article_data.language},
        {name: 'Authors', value: article_data.authors},
        {name: "Related", value: article_data.related},
    ]
</script>

<div class="card bg-neutral-300 shadow-xl overflow-x-auto">
    <div class="card-body">
      <h2 class="card-title">Article overview:</h2>
        <table class="table w-full table-compact" style="table-layout: fixed">
          <thead>
            <tr>
              <th>Attribute</th>
              <th>Value</th>
            </tr>
          </thead>
          <tbody>
            {#each status_items as item}
                <tr>
                    <td>{ item.name }</td>
                    <!-- <td>Quality Control Specialist</td> -->
                    {#if item.value != ""}
                        <td class='bg-emerald-200' style="white-space: normal">{ item.value }</td>
                    {:else}
                        <td class='bg-red-200'>{ item.value }</td>
                    {/if}
                </tr>
            {/each}
          </tbody>
        </table>
      </div>
    
</div>