<style>
    .garbageContainerScheduleTile {
        background-color: #2F2F2F;
        font-size: 3vmin;
        border-radius: 1vh;
        font-weight: bold;
        flex-direction: row;
    }

    .garbageContainerScheduleTile .icon {
        font-size: 10vmin;
    }

    .garbageContainerScheduleTile .content {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-evenly;
        width: 85%;
        height: 85%;
    }

    .garbageContainerScheduleTile .icon {
        width: 12%;
        height: auto;
    }

    .garbageContainerScheduleTile .text-red {
        color: rgb(230, 76, 60);
    }
</style>

<div class="garbageContainerScheduleTile">
    <div class="content {% if data['remainingDays'] == 0 %}text-red{% endif %}">
        <img src="../../static/images/{{ data['iconFileName'] }}" class="icon"/>
        {{ data['nextEventDate'] }} - {{ data['remainingDays'] }} Tag(e)
    </div>
</div>
