<?xml version="1.0" encoding="UTF-8"?>
<facelet-taglib version="2.3"
                xmlns="http://xmlns.jcp.org/xml/ns/javaee"
                xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
                xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
                http://xmlns.jcp.org/xml/ns/javaee/web-facelet_taglib_2_3.xsd">

    <namespace>http://primefaces.org/freya</namespace>

    <description>
        Freya Extension - Composants composites pour simplifier l'utilisation de PrimeFaces avec le thème Freya.
        Ces composants appliquent automatiquement les patterns Freya (field, field-checkbox) et réduisent le boilerplate.
    </description>

    <!-- ========================================
         COMPOSANTS DE FORMULAIRE (Field Pattern)
         ======================================== -->

    <!--
        fr:fieldInput - Champ texte avec label et message
        Usage: <fr:fieldInput label="Nom" value="#{bean.nom}" required="true" />
    -->
    <tag>
        <tag-name>fieldInput</tag-name>
        <description>Champ de saisie texte avec pattern Freya (field + label + input + message)</description>
        <component>
            <resource-id>freya/fieldInput.xhtml</resource-id>
        </component>
    </tag>

    <!--
        fr:fieldTextarea - Champ texte multiligne avec label et message
        Usage: <fr:fieldTextarea label="Description" value="#{bean.description}" rows="5" />
    -->
    <tag>
        <tag-name>fieldTextarea</tag-name>
        <description>Champ de saisie multiligne avec pattern Freya (field + label + textarea + message)</description>
        <component>
            <resource-id>freya/fieldTextarea.xhtml</resource-id>
        </component>
    </tag>

    <!--
        fr:fieldPassword - Champ mot de passe avec feedback et label
        Usage: <fr:fieldPassword label="Mot de passe" value="#{bean.password}" feedback="true" />
    -->
    <tag>
        <tag-name>fieldPassword</tag-name>
        <description>Champ mot de passe avec indicateur de force et pattern Freya</description>
        <component>
            <resource-id>freya/fieldPassword.xhtml</resource-id>
        </component>
    </tag>

    <!--
        fr:fieldSelect - Liste déroulante avec label et message
        Usage:
        <fr:fieldSelect label="Catégorie" value="#{bean.category}" filter="true">
            <f:selectItem itemLabel="Choisir..." itemValue="" />
            <f:selectItems value="#{bean.categories}" />
        </fr:fieldSelect>
    -->
    <tag>
        <tag-name>fieldSelect</tag-name>
        <description>Liste déroulante (selectOneMenu) avec pattern Freya et support de filtrage</description>
        <component>
            <resource-id>freya/fieldSelect.xhtml</resource-id>
        </component>
    </tag>

    <!--
        fr:fieldCalendar - Sélecteur de date avec label et message
        Usage: <fr:fieldCalendar label="Date de naissance" value="#{bean.birthdate}" showIcon="true" />
    -->
    <tag>
        <tag-name>fieldCalendar</tag-name>
        <description>Sélecteur de date (datePicker) avec pattern Freya et icône calendrier</description>
        <component>
            <resource-id>freya/fieldCalendar.xhtml</resource-id>
        </component>
    </tag>

    <!--
        fr:fieldNumber - Champ numérique (prix, quantité)
        Usage: <fr:fieldNumber label="Prix" value="#{bean.price}" symbol=" FCFA" />
    -->
    <tag>
        <tag-name>fieldNumber</tag-name>
        <description>Champ de saisie numérique (inputNumber) avec pattern Freya</description>
        <component>
            <resource-id>freya/fieldNumber.xhtml</resource-id>
        </component>
    </tag>

    <!--
        fr:fieldMultiSelect - Liste déroulante multiple
        Usage: <fr:fieldMultiSelect label="Rôles" value="#{bean.roles}"><f:selectItems .../></fr:fieldMultiSelect>
    -->
    <tag>
        <tag-name>fieldMultiSelect</tag-name>
        <description>Liste déroulante à sélection multiple avec pattern Freya</description>
        <component>
            <resource-id>freya/fieldMultiSelect.xhtml</resource-id>
        </component>
    </tag>

    <!--
        fr:fieldRadio - Boutons radio
        Usage: <fr:fieldRadio label="Genre" value="#{bean.genre}"><f:selectItem .../></fr:fieldRadio>
    -->
    <tag>
        <tag-name>fieldRadio</tag-name>
        <description>Boutons radio (selectOneRadio) avec pattern Freya</description>
        <component>
            <resource-id>freya/fieldRadio.xhtml</resource-id>
        </component>
    </tag>

    <!--
        fr:fieldSwitch - Interrupteur ON/OFF
        Usage: <fr:fieldSwitch label="Actif" value="#{bean.active}" />
    -->
    <tag>
        <tag-name>fieldSwitch</tag-name>
        <description>Interrupteur (toggleSwitch) avec pattern Freya</description>
        <component>
            <resource-id>freya/fieldSwitch.xhtml</resource-id>
        </component>
    </tag>

    <!--
        fr:fieldToggle - Bouton bascule
        Usage: <fr:fieldToggle label="Notifications" value="#{bean.notif}" onLabel="OUI" offLabel="NON" />
    -->
    <tag>
        <tag-name>fieldToggle</tag-name>
        <description>Bouton bascule (selectBooleanButton) avec pattern Freya</description>
        <component>
            <resource-id>freya/fieldToggle.xhtml</resource-id>
        </component>
    </tag>

    <!--
        fr:fieldChips - Saisie de tags
        Usage: <fr:fieldChips label="Tags" value="#{bean.tags}" />
    -->
    <tag>
        <tag-name>fieldChips</tag-name>
        <description>Saisie de tags (chips) avec pattern Freya</description>
        <component>
            <resource-id>freya/fieldChips.xhtml</resource-id>
        </component>
    </tag>

    <!--
        fr:fieldRating - Évaluation par étoiles
        Usage: <fr:fieldRating label="Note" value="#{bean.rating}" />
    -->
    <tag>
        <tag-name>fieldRating</tag-name>
        <description>Évaluation (rating) avec pattern Freya</description>
        <component>
            <resource-id>freya/fieldRating.xhtml</resource-id>
        </component>
    </tag>

    <!--
        fr:fieldColor - Sélecteur de couleur
        Usage: <fr:fieldColor label="Couleur" value="#{bean.color}" />
    -->
    <tag>
        <tag-name>fieldColor</tag-name>
        <description>Sélecteur de couleur (colorPicker) avec pattern Freya</description>
        <component>
            <resource-id>freya/fieldColor.xhtml</resource-id>
        </component>
    </tag>

    <!--
        fr:fieldCheckbox - Case à cocher avec label
        Usage: <fr:fieldCheckbox label="J'accepte les conditions" value="#{bean.accepted}" />
    -->
    <tag>
        <tag-name>fieldCheckbox</tag-name>
        <description>Case à cocher avec pattern Freya (field-checkbox + checkbox + label)</description>
        <component>
            <resource-id>freya/fieldCheckbox.xhtml</resource-id>
        </component>
    </tag>

    <!-- ========================================
         COMPOSANTS DE LAYOUT
         ======================================== -->

    <!--
        fr:actionDialog - Dialog standardisé avec boutons Annuler/Sauvegarder
        Usage:
        <fr:actionDialog widgetVar="dlgEdit"
                        header="Éditer l'utilisateur"
                        confirmAction="#{bean.save}"
                        confirmUpdate="form">
            <fr:fieldInput label="Nom" value="#{bean.user.nom}" required="true" />
        </fr:actionDialog>
    -->
    <tag>
        <tag-name>actionDialog</tag-name>
        <description>Dialog modal standardisé avec footer contenant les boutons d'action (Annuler/Sauvegarder)</description>
        <component>
            <resource-id>freya/actionDialog.xhtml</resource-id>
        </component>
    </tag>

    <!-- ========================================
         COMPOSANTS D'INTERFACE
         ======================================== -->

    <!--
        fr:themeSelector - Sélecteur de thème Freya (couleur + mode light/dark)
        Usage: <fr:themeSelector styleClass="mb-3" />
    -->
    <tag>
        <tag-name>themeSelector</tag-name>
        <description>Sélecteur de thème Freya permettant de changer la couleur et le mode (light/dark)</description>
        <component>
            <resource-id>freya/themeSelector.xhtml</resource-id>
        </component>
    </tag>

    <!-- ========================================
         COMPOSANTS DE LAYOUT ADDITIONNELS
         ======================================== -->

    <!--
        fr:card - Carte avec header et contenu
        Usage: <fr:card title="Titre" subtitle="Sous-titre">Contenu</fr:card>
    -->
    <tag>
        <tag-name>card</tag-name>
        <description>Carte avec header optionnel et contenu</description>
        <component>
            <resource-id>freya/card.xhtml</resource-id>
        </component>
    </tag>

    <!--
        fr:panel - Panneau avec header et contenu
        Usage: <fr:panel header="Titre" toggleable="true">Contenu</fr:panel>
    -->
    <tag>
        <tag-name>panel</tag-name>
        <description>Panneau avec header, toggleable et closable</description>
        <component>
            <resource-id>freya/panel.xhtml</resource-id>
        </component>
    </tag>

    <!--
        fr:formDialog - Dialog de formulaire avec validation
        Usage: <fr:formDialog widgetVar="dlg" header="Formulaire" saveAction="#{bean.save}">...</fr:formDialog>
    -->
    <tag>
        <tag-name>formDialog</tag-name>
        <description>Dialog de formulaire avec boutons Annuler/Sauvegarder et validation</description>
        <component>
            <resource-id>freya/formDialog.xhtml</resource-id>
        </component>
    </tag>

    <!-- ========================================
         COMPOSANTS DE FORMULAIRE ADDITIONNELS
         ======================================== -->

    <!--
        fr:fieldFileUpload - Upload de fichiers avec label
        Usage: <fr:fieldFileUpload label="Document" listener="#{bean.handleUpload}" />
    -->
    <tag>
        <tag-name>fieldFileUpload</tag-name>
        <description>Upload de fichiers avec pattern Freya</description>
        <component>
            <resource-id>freya/fieldFileUpload.xhtml</resource-id>
        </component>
    </tag>

    <!--
        fr:fieldAutoComplete - Autocomplétion avec label
        Usage: <fr:fieldAutoComplete label="Ville" value="#{bean.ville}" completeMethod="#{bean.complete}" />
    -->
    <tag>
        <tag-name>fieldAutoComplete</tag-name>
        <description>Autocomplétion avec pattern Freya</description>
        <component>
            <resource-id>freya/fieldAutoComplete.xhtml</resource-id>
        </component>
    </tag>

    <!--
        fr:fieldMask - Champ avec masque de saisie
        Usage: <fr:fieldMask label="Téléphone" value="#{bean.tel}" mask="(999) 999-9999" />
    -->
    <tag>
        <tag-name>fieldMask</tag-name>
        <description>Champ avec masque de saisie et pattern Freya</description>
        <component>
            <resource-id>freya/fieldMask.xhtml</resource-id>
        </component>
    </tag>

    <!--
        fr:fieldSlider - Slider avec label
        Usage: <fr:fieldSlider label="Volume" value="#{bean.volume}" minValue="0" maxValue="100" />
    -->
    <tag>
        <tag-name>fieldSlider</tag-name>
        <description>Slider avec pattern Freya</description>
        <component>
            <resource-id>freya/fieldSlider.xhtml</resource-id>
        </component>
    </tag>

    <!--
        fr:fieldSpinner - Spinner numérique avec label
        Usage: <fr:fieldSpinner label="Quantité" value="#{bean.qty}" min="1" max="100" />
    -->
    <tag>
        <tag-name>fieldSpinner</tag-name>
        <description>Spinner numérique avec pattern Freya</description>
        <component>
            <resource-id>freya/fieldSpinner.xhtml</resource-id>
        </component>
    </tag>

    <!-- ========================================
         COMPOSANTS DE DONNÉES
         ======================================== -->

    <!--
        fr:dataTable - DataTable avec style Freya
        Usage: <fr:dataTable value="#{bean.items}" var="item" paginator="true">...</fr:dataTable>
    -->
    <tag>
        <tag-name>dataTable</tag-name>
        <description>DataTable avec style Freya et fonctionnalités courantes</description>
        <component>
            <resource-id>freya/dataTable.xhtml</resource-id>
        </component>
    </tag>

    <!--
        fr:dataView - DataView avec style Freya
        Usage: <fr:dataView value="#{bean.items}" var="item" layout="grid">...</fr:dataView>
    -->
    <tag>
        <tag-name>dataView</tag-name>
        <description>DataView avec style Freya pour affichage liste/grille</description>
        <component>
            <resource-id>freya/dataView.xhtml</resource-id>
        </component>
    </tag>

    <!--
        fr:treeTable - TreeTable avec style Freya
        Usage: <fr:treeTable value="#{bean.root}" var="node">...</fr:treeTable>
    -->
    <tag>
        <tag-name>treeTable</tag-name>
        <description>TreeTable avec style Freya</description>
        <component>
            <resource-id>freya/treeTable.xhtml</resource-id>
        </component>
    </tag>

    <!-- ========================================
         COMPOSANTS DE NAVIGATION
         ======================================== -->

    <!--
        fr:breadcrumb - Fil d'Ariane
        Usage: <fr:breadcrumb model="#{bean.breadcrumbModel}" />
    -->
    <tag>
        <tag-name>breadcrumb</tag-name>
        <description>Fil d'Ariane avec style Freya</description>
        <component>
            <resource-id>freya/breadcrumb.xhtml</resource-id>
        </component>
    </tag>

    <!--
        fr:steps - Indicateur d'étapes
        Usage: <fr:steps model="#{bean.stepsModel}" activeIndex="#{bean.step}" />
    -->
    <tag>
        <tag-name>steps</tag-name>
        <description>Indicateur d'étapes avec style Freya</description>
        <component>
            <resource-id>freya/steps.xhtml</resource-id>
        </component>
    </tag>

    <!--
        fr:tabView - Onglets
        Usage: <fr:tabView><p:tab title="Tab1">...</p:tab></fr:tabView>
    -->
    <tag>
        <tag-name>tabView</tag-name>
        <description>Onglets avec style Freya</description>
        <component>
            <resource-id>freya/tabView.xhtml</resource-id>
        </component>
    </tag>

    <!-- ========================================
         COMPOSANTS D'ACTION
         ======================================== -->

    <!--
        fr:button - Bouton simple
        Usage: <fr:button value="Cliquer" icon="pi pi-check" severity="success" />
    -->
    <tag>
        <tag-name>button</tag-name>
        <description>Bouton simple avec style Freya</description>
        <component>
            <resource-id>freya/button.xhtml</resource-id>
        </component>
    </tag>

    <!--
        fr:commandButton - Bouton d'action
        Usage: <fr:commandButton value="Sauvegarder" action="#{bean.save}" severity="success" />
    -->
    <tag>
        <tag-name>commandButton</tag-name>
        <description>Bouton d'action avec style Freya</description>
        <component>
            <resource-id>freya/commandButton.xhtml</resource-id>
        </component>
    </tag>

    <!--
        fr:linkButton - Lien stylisé comme bouton
        Usage: <fr:linkButton value="Détails" outcome="/details" icon="pi pi-eye" />
    -->
    <tag>
        <tag-name>linkButton</tag-name>
        <description>Lien stylisé comme bouton avec style Freya</description>
        <component>
            <resource-id>freya/linkButton.xhtml</resource-id>
        </component>
    </tag>

    <!--
        fr:splitButton - Bouton avec menu déroulant
        Usage: <fr:splitButton value="Sauvegarder" action="#{bean.save}" model="#{bean.menuModel}" />
    -->
    <tag>
        <tag-name>splitButton</tag-name>
        <description>Bouton avec menu déroulant et style Freya</description>
        <component>
            <resource-id>freya/splitButton.xhtml</resource-id>
        </component>
    </tag>

    <!-- ========================================
         COMPOSANTS DE FEEDBACK
         ======================================== -->

    <!--
        fr:message - Message d'information
        Usage: <fr:message severity="info" summary="Info" detail="Message détaillé" />
    -->
    <tag>
        <tag-name>message</tag-name>
        <description>Message d'information avec style Freya</description>
        <component>
            <resource-id>freya/message.xhtml</resource-id>
        </component>
    </tag>

    <!--
        fr:growl - Notifications toast
        Usage: <fr:growl life="3000" position="top-right" />
    -->
    <tag>
        <tag-name>growl</tag-name>
        <description>Notifications toast avec style Freya</description>
        <component>
            <resource-id>freya/growl.xhtml</resource-id>
        </component>
    </tag>

    <!--
        fr:inplace - Édition en place
        Usage: <fr:inplace label="#{bean.value}" editor="true"><p:inputText value="#{bean.value}" /></fr:inplace>
    -->
    <tag>
        <tag-name>inplace</tag-name>
        <description>Édition en place avec style Freya</description>
        <component>
            <resource-id>freya/inplace.xhtml</resource-id>
        </component>
    </tag>

    <!-- ========================================
         COMPOSANTS UTILITAIRES
         ======================================== -->

    <!--
        fr:spacer - Espacement vertical
        Usage: <fr:spacer height="2rem" />
    -->
    <tag>
        <tag-name>spacer</tag-name>
        <description>Espacement vertical</description>
        <component>
            <resource-id>freya/spacer.xhtml</resource-id>
        </component>
    </tag>

    <!--
        fr:divider - Séparateur
        Usage: <fr:divider layout="horizontal" type="solid" />
    -->
    <tag>
        <tag-name>divider</tag-name>
        <description>Séparateur horizontal ou vertical</description>
        <component>
            <resource-id>freya/divider.xhtml</resource-id>
        </component>
    </tag>

    <!--
        fr:badge - Badge numérique
        Usage: <fr:badge value="5" severity="danger" />
    -->
    <tag>
        <tag-name>badge</tag-name>
        <description>Badge numérique ou indicateur</description>
        <component>
            <resource-id>freya/badge.xhtml</resource-id>
        </component>
    </tag>

    <!--
        fr:avatar - Avatar utilisateur
        Usage: <fr:avatar label="JD" size="large" shape="circle" />
    -->
    <tag>
        <tag-name>avatar</tag-name>
        <description>Avatar utilisateur</description>
        <component>
            <resource-id>freya/avatar.xhtml</resource-id>
        </component>
    </tag>

    <!--
        fr:tag - Étiquette de catégorisation
        Usage: <fr:tag value="Actif" severity="success" />
    -->
    <tag>
        <tag-name>tag</tag-name>
        <description>Étiquette de catégorisation</description>
        <component>
            <resource-id>freya/tag.xhtml</resource-id>
        </component>
    </tag>

    <!--
        fr:progressBar - Barre de progression
        Usage: <fr:progressBar value="#{bean.progress}" displayOnly="true" />
    -->
    <tag>
        <tag-name>progressBar</tag-name>
        <description>Barre de progression</description>
        <component>
            <resource-id>freya/progressBar.xhtml</resource-id>
        </component>
    </tag>

    <!-- ========================================
         COMPOSANTS AVANCÉS
         ======================================== -->

    <!--
        fr:tree - Arbre hiérarchique
        Usage: <fr:tree value="#{bean.root}" var="node" selectionMode="single">...</fr:tree>
    -->
    <tag>
        <tag-name>tree</tag-name>
        <description>Arbre hiérarchique avec style Freya</description>
        <component>
            <resource-id>freya/tree.xhtml</resource-id>
        </component>
    </tag>

    <!--
        fr:fieldEditor - Éditeur WYSIWYG
        Usage: <fr:fieldEditor label="Contenu" value="#{bean.content}" height="400" />
    -->
    <tag>
        <tag-name>fieldEditor</tag-name>
        <description>Éditeur de texte riche (WYSIWYG) avec pattern Freya</description>
        <component>
            <resource-id>freya/fieldEditor.xhtml</resource-id>
        </component>
    </tag>

    <!--
        fr:chart - Graphiques
        Usage: <fr:chart type="bar" model="#{bean.chartModel}" />
    -->
    <tag>
        <tag-name>chart</tag-name>
        <description>Graphiques (bar, line, pie, etc.) avec style Freya</description>
        <component>
            <resource-id>freya/chart.xhtml</resource-id>
        </component>
    </tag>

</facelet-taglib>
