<script lang="ts">
	import type { Job } from '$lib/model/job';
	import type { CurrentLanguage } from '$lib/types';
	import JobElement from './JobElement.svelte';
	export let currentLanguage: CurrentLanguage = 'it';
	export let jobs: Job[] = [];
	export let modalOpen: boolean;
</script>

<div class="jobs-container">
	{#each jobs as job}
		<div class="job-card"><JobElement {job} {currentLanguage} bind:modalOpen /></div>
	{/each}
	{#if jobs.length % 2 !== 0}
		<div class="job-card hide" />
	{/if}
</div>

<style lang="scss">
	@import '../../app.scss';
	.jobs-container {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.job-card {
		background-color: $basecolor2;
		border-radius: $default-border-radius;
		padding: 25pt 25pt;
		margin-top: 1%;
		margin-bottom: 1%;
		@media (min-width: $min-desktop) {
			width: 41%;
		}

		@media (min-width: 1333px) {
			// 	width: 420px;
			width: 42.5%;
		}
		display: inline;
	}
	.hide {
		background: transparent;
	}
</style>
