<script>
 import {
     Card,
     CardBody,
     CardHeader,
     CardText,
     Icon,
     ListGroup,
     ListGroupItem,
 } from 'sveltestrap';

 export let files = [];
</script>

{#if files.length}
    <Card class="mb-2">
	<CardHeader>
            <Icon name="download" />
            Téléchargements
        </CardHeader>
        <CardBody class="text-indent">
	    <CardText class="text-danger text-justify">
		<strong>Attention&nbsp;:</strong> puisqu'il s'agit de captures effectuées dans le but de découvrir si des actes malveillants ont été commis, les contenus qui sont téléchargeables <em>peuvent</em> contenir du contenu malveillant&nbsp;!
            </CardText>
        </CardBody>
        <ListGroup>
            {#each files as file (file.id)}
                <ListGroupItem tag="a" href="{file.path}" target="_self" class="d-flex">
		    <h1><Icon name="arrow-down-circle" /></h1>
                    <div>
		        <h4 class="fw-bold"><samp>{file.name}</samp></h4>
                        <nobr>
                            Taille&nbsp;:
                            <span title="{file.size} octets">{file.size}</span>
                        </nobr>
                        &ndash;
                        <nobr>
                            <span title="blake2.net">b2sum</span>&nbsp;:
                            <samp class="cksum" title="{file.checksum}">{file.checksum}</samp>
                        </nobr>
                    </div>
                </ListGroupItem>
            {/each}
        </ListGroup>
    </Card>
{/if}
