server/frontend/fic/src/lib/components/ExerciceDownloads.svelte

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

 import FileSize from './FileSize.svelte';

 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={(file.name.endsWith(".txt") || file.name.endsWith(".jpg") || file.name.endsWith(".png") || file.name.endsWith(".pdf"))?"_blank":"_self"} class="d-flex">
		    <h1 class="me-3">
                        <Icon name="arrow-down-circle" />
                    </h1>
                    <div style="min-width: 0">
		        <h4 class="fw-bold"><samp>{file.name}</samp></h4>
                        {#if file.disclamer}
                            <div class="file-disclamer text-warning">
		                {file.disclamer}
                            </div>
                        {/if}
                        <nobr>
                            Taille&nbsp;:
                            {#if file.compressed}
                                <acronym title="Nous ne sommes pas en mesure de calculer la taille exacte de ce fichier, votre navigateur est susceptible d'afficher une progression non représentative. Tant que le téléchargement se poursuit (même au delà de 100%), n'arrêtez pas, vous n'auriez pas le fichier en entier. Ce phénomène est du au fait que le fichier est stocké sous une forme compressé sur notre serveur, alors que vous le récupérez décompressé." class="fst-italic">
                                    environ
                                    <FileSize size={file.size} />
                                </acronym>
                            {:else}
                                <FileSize size={file.size} />
                            {/if}
                        </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}

<style>
 .file-disclamer {
     display: none;
 }
 :global(.list-group-item:hover .file-disclamer) {
     display: block;
 }
</style>