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

 export let files = [];
</script>

{#if files.length}
    <Card class="mb-4">
	<CardHeader class="text-light">
            <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 class="border-dark">
            {#each files as file, index}
                <ListGroupItem tag="a" href="{file.path}" target="_self" class="d-flex align-items-center">
		    <h1 class="me-3">
                        <Icon name="arrow-down-circle" />
                    </h1>
                    <div style="min-width: 0">
		        <h4 class="fw-bold"><samp>{file.name}</samp></h4>
                        <nobr>
                            Taille&nbsp;:
                            <span title="{file.size} octets">{file.size}</span>
                        </nobr>
                        <nobr class="d-block text-truncate">
                            <span title="blake2.net">b2sum</span>&nbsp;:
                            <samp class="cksum" title="{file.checksum}">{file.checksum}</samp>
                        </nobr>
                    </div>
                </ListGroupItem>
            {/each}
        </ListGroup>
    </Card>
{/if}
