53 lines
1.8 KiB
Svelte

<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>