<script lang="ts">
	import type { Model } from './+page.svelte';
	let { model } = $props<{ model: Model }>();
</script>

<div class="card model-card">
	<h1>
		{model.name}
	</h1>
	<div class="second-line">
		<img src="/api/savedData/{model.id}/baseimage.png" alt="" />
		<div class="info">
			<div>
				<span class="bold bigger">Image Type:</span>
				{model.color_mode}
			</div>
			<div>
				<span class="bold bigger">Image Size:</span>
				{model.width}x{model.height}
			</div>
		</div>
	</div>
</div>

<style>
    .model-card {
        h1 {
            margin: 0;
            padding-bottom: 10px;
        }

        img {
            width: 25%;
            height: 100%;
            object-fit: contain;
        }

        .second-line {
            display: flex;
            gap: 20px;
        }
    }
</style>
