---
import { documentToHtmlString } from "@contentful/rich-text-html-renderer";
const { evenement } = Astro.props;

---
<section class="evenement">
    <a href=`/evenements/${evenement.slug}`>
        <img src={evenement.affiche?.fields.file.url} alt=`Affiche de ${evenement.nom}` />
    </a>
    <div class="infos">
        <div class="nom">
            <a href=`/evenements/${evenement.slug}`>
                {evenement.nom}
            </a>
        </div>
        <div class="date">
            le {new Date(evenement.date).toLocaleDateString()}
        </div>
        <div class="lieu">
            à {evenement.lieu}
        </div>
        <div class="description">
            <Fragment set:html={documentToHtmlString(evenement.description)} />
        </div>
        <a class="suite" href=`/evenements/${evenement.slug}`>
            Suite…
        </a>
    </div>
</section>

<style>
    .evenement {
        display: flex;
        flex-direction: row;
        column-gap: 1em;

        color:rgb(68,68,68);
        font-size: 1.25rem;
        line-height: 1.4;

        .nom {
            font-weight: 700;
            font-size:20px;

            a {
                text-decoration: none;
                color: rgb(17,17,17);
            }
        }

        & > a {
            width: 30%;
            flex-grow: 0;
        }

        img {
            width: 100%;
        }

        .infos {
            flex-grow: 0;
            width: 70%;
            position: relative;


            .description {
                font-size: 0.8em;
                max-height: 10em;
                overflow: hidden;
            }

            .suite {
                font-size: 0.7em;
                position: absolute;
                bottom: 1em;
                right: 1em;
            }
        }
    }

    @media (max-width: 48em) {
        .evenement {
            flex-direction: column;

            & > a {
                width: 100%;
            }

            .infos {
                .description, .date, .lieu, .suite {
                    display: none
                }
            }
        }
    }

</style>