<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:p="http://primefaces.org/ui">

    <!--
        Composant card avec en-tête et actions - DRY/WOU
        Usage :
        <ui:decorate template="/templates/components/cards/card-header.xhtml">
            <ui:param name="title" value="Titre de la card"/>
            <ui:param name="subtitle" value="Sous-titre optionnel"/>
            <ui:param name="styleClass" value="mb-3"/>
            <ui:define name="actions">
                Boutons d'action ici
            </ui:define>
            <ui:define name="content">
                Contenu de la card ici
            </ui:define>
        </ui:decorate>
    -->

    <div class="card #{styleClass}">
        <div class="flex justify-content-between align-items-center flex-column md:flex-row mb-3">
            <div class="mb-2 md:mb-0">
                <ui:fragment rendered="#{not empty title}">
                    <h3 class="m-0">
                        <h:outputText value="#{title}" />
                    </h3>
                </ui:fragment>
                <ui:fragment rendered="#{not empty subtitle}">
                    <span class="text-600">
                        <h:outputText value="#{subtitle}" />
                    </span>
                </ui:fragment>
            </div>
            <div class="flex gap-2">
                <ui:insert name="actions">
                    <!-- Actions buttons go here -->
                </ui:insert>
            </div>
        </div>
        <ui:insert name="content">
            <!-- Card content goes here -->
        </ui:insert>
    </div>
</ui:composition>

