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

<style>
  td {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
  }
</style>
<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>
                    {#if (item.value != "" || status_items.value == false) }
                      <td class='bg-emerald-200' style="white-space: normal; width:70%">
                        {#if item.name == "Url"}
                          <a href="{ item.value }" target="_blank">{ item.value }</a>
                        {:else}
                          { item.value }
                        {/if}
                      </td>
                    {:else}
                      <td class='bg-red-200'>not set</td>
                    {/if}
                </tr>
            {/each}
          </tbody>
        </table>
      </div>
</div>