<script>
    import { makeid } from "$lib/functions.js"
    import edit_btn from '$lib/assets/edit.svg';
    import remove_btn from '$lib/assets/delete.svg';
    import ImgButton from "./img_button.svelte";
    let id = makeid(8);
    let { date, name } = $props();
</script>

<div class="queue-item rounded">
    <p>{date}</p>
    <p class="ellipsis">{name}</p>
    <div class="buttons">
        <ImgButton style="edit" name="Изменить" image={edit_btn}/>
        <ImgButton style="remove" name="Удалить" image={remove_btn}/>
    </div>
</div>

<style>
    /* Элемент в очереди */
    .queue-item {
        margin: 0;
        padding: 0;
        display: flex;
        align-content: center;
    }

    .queue-item p {
        align-content: center;
        margin: 0.5rem;
    }

    .buttons {
        display: flex;
        margin-left: auto;
    }

    :global(.queue-item + .queue-item) {
        margin-top: 0.5rem;
    }

    @media (prefers-color-scheme: light) {
        .queue-item {
            background-color: #5C8DC0;
            color: white;
        }

        .queue-item p {
            color: white;
        }
    }

    @media (prefers-color-scheme: dark) {
        .queue-item {
            background-color: #2791FF;
            color: white;
        }

        .queue-item p {
            color: white;
        }
    }
</style>