templates/components/cards/formation_card.html.twig line 1

Open in your IDE?
  1. {# formation card #}
    <a href="{{ path('single_training' , {'slug' : this.formationCard.slug }) }}" class="formation-card h-anim lg:w-full flex flex-col">
        <img class="w-full rounded-t-xl"
             src="{{ asset('upload/images/training/card/' ~ this.formationCard.cardImageName)|imagine_filter('card_img') }}"
             alt="formation card image">
        <div class="px-8 py-10 rounded-b-xl bg-white border border-grey-100 flex flex-col gap-4 flex-grow">
            <div style="background-color: {{ this.formationCard.category.color }}" class="w-fit rounded-lg">
                <p class="font-allerRegular uppercase text-sm text-white px-3 py-1.5">{{ this.formationCard.category.name }}</p>
            </div>
            {% if this.formationCard.acronym is defined %}
                <p class="font-allerRegular uppercase text-base text-grey-200">{{ this.formationCard.acronym }}</p>
            {% endif %}
            <h3 class="font-allerBold text-xl">{{ this.formationCard.title|slice(0, 65) ~ '...' }}</h3>
            <div class="flex flex-col gap-2">
                <div class="flex flex-row items-center gap-2">
                    {% if this.formationCard.certificate is defined %}
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="13.714" viewBox="0 0 16 13.714">
                            <path d="M5.161,12.257V15.3l5.089,2.911L15.339,15.3V12.257L10.25,15.168ZM10.25,4.5l-8,4.571,8,4.571L16.8,9.9v5.264H18.25v-6.1Z"
                                  transform="translate(-2.25 -4.5)"
                                  fill="#8c8c8c"/>
                        </svg>
                        <p class="font-allerRegular text-sm text-grey-200"> {{ this.formationCard.certificate }} </p>
                    {% endif %}
                </div>
                <div class="flex flex-row items-center gap-2">
                    
                    {% if this.formationCard.sessions is defined and this.formationCard.price is defined %}
                        <svg width="16px" height="16px" stroke-width="2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#8c8c8c">
                            <path d="M18.5 4.80423C17.4428 4.28906 16.2552 4 15 4C10.5817 4 7 7.58172 7 12C7 16.4183 10.5817 20 15 20C16.2552 20 17.4428 19.7109 18.5 19.1958" stroke="#8c8c8c" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                            <path d="M5 10H16" stroke="#8c8c8c" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M5 14H16" stroke="#8c8c8c" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                            <p class="font-allerRegular text-sm text-grey-200">Prix : {{ this.formationCard.price }} €</p>
                    {% else %}
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16.931">
                        <path d="M17.837,6.75H16.3v1a.322.322,0,0,1-.308.334h-.615a.322.322,0,0,1-.308-.334v-1H7.683v1a.322.322,0,0,1-.308.334H6.76a.322.322,0,0,1-.308-.334v-1H4.913A1.612,1.612,0,0,0,3.375,8.418V19.763a1.612,1.612,0,0,0,1.538,1.668H17.837a1.612,1.612,0,0,0,1.538-1.668V8.418A1.612,1.612,0,0,0,17.837,6.75Zm.308,12.512a.806.806,0,0,1-.769.834h-12a.806.806,0,0,1-.769-.834V11.755a.322.322,0,0,1,.308-.334H17.837a.322.322,0,0,1,.308.334Z"
                              transform="translate(-3.375 -4.5)" fill="#8c8c8c"/>
                        <path d="M11.25,5.063a.564.564,0,0,0-.562-.562H9.563A.564.564,0,0,0,9,5.063V6.75h2.25Z"
                              transform="translate(-6.135 -4.5)" fill="#8c8c8c"/>
                        <path d="M27,5.063a.564.564,0,0,0-.562-.562H25.313a.564.564,0,0,0-.562.563V6.75H27Z"
                              transform="translate(-13.865 -4.5)" fill="#8c8c8c"/>
                    </svg>
                        {% if this.formationCard.durationInMonth is defined %}
                            <p class="font-allerRegular text-sm text-grey-200">À plein temps : {{ this.formationCard.durationInMonth }} mois</p>
                            {% else %}
                                    {% if this.formationCard.durationInDayMax != null %}
                                        <p class="font-allerRegular text-sm text-grey-200"> De {{ this.formationCard.durationInDayMin }} à {{ this.formationCard.durationInDayMax }} jours</p>
                                    {% else %}
                                        {% if this.formationCard.durationInDayMin == 1 %}
                                            <p class="font-allerRegular text-sm text-grey-200"> {{ this.formationCard.durationInDayMin }} jour</p>
                                        {% else %}
                                            <p class="font-allerRegular text-sm text-grey-200"> {{ this.formationCard.durationInDayMin }} jours</p>
                                        {% endif %}
                                        
                                        
                                    {% endif %}
                            {% endif %}
                    {% endif %}
                    
                    
                </div>
                {% if this.formationCard.sessions is defined and this.formationCard.sessions is not empty %}
                    <div class="flex flex-row items-center gap-2">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
                            <g transform="translate(-3.375 -3.375)">
                                <path d="M11.367,3.375a8,8,0,1,0,8.008,8A8,8,0,0,0,11.367,3.375Zm.008,14.4a6.4,6.4,0,1,1,6.4-6.4A6.4,6.4,0,0,1,11.375,17.775Z"
                                      fill="#8c8c8c"/>
                                <path d="M17.738,10.688h-1.2v4.8l4.2,2.519.6-.985-3.6-2.135Z"
                                      transform="translate(-5.963 -3.313)" fill="#8c8c8c"/>
                            </g>
                        </svg>
    
    
    
                        <p class="font-allerRegular text-sm text-grey-200">Prochaine session
                            le {{ this.dateNextSession|date('d/m/y') }}</p>
                    </div>
                {% endif %}
                {% if this.formationCard.participantNumber is defined %}
                    <div class="flex flex-row items-center gap-2">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16.5" height="14.5" viewBox="0 0 16.5 14.5">
                            <path d="M12.75,12A2.25,2.25,0,1,0,10.5,9.75,2.241,2.241,0,0,0,12.75,12Zm-6,0A2.25,2.25,0,1,0,4.5,9.75,2.241,2.241,0,0,0,6.75,12Zm0,1.5C5,13.5,1.5,14.378,1.5,16.125V22H12V16.125C12,14.378,8.5,13.5,6.75,13.5Zm6,0c-.218,0-.465.015-.728.038A3.165,3.165,0,0,1,13.5,16.125V22H18V16.125C18,14.378,14.5,13.5,12.75,13.5Z"
                                  transform="translate(-1.5 -7.5)" fill="#8c8c8c"/>
                        </svg>
    
                        <p class="font-allerRegular text-sm text-grey-200">
                            {{ this.formationCard.participantNumber }}</p>
    
                    </div>
                    <div class="flex flex-row items-center gap-2">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16.5" height="16.5" viewBox="0 0 16.5 16.5">
                            <path d="M8.25.562a8.25,8.25,0,1,0,8.25,8.25A8.249,8.249,0,0,0,8.25.562Zm-5.1,5.353,1.161-.166L4.824,4.7a.257.257,0,0,1,.462,0L5.8,5.749l1.161.166a.259.259,0,0,1,.143.439l-.845.818.2,1.161a.249.249,0,0,1-.366.263L5.056,8.057,4.015,8.6a.249.249,0,0,1-.366-.263l.2-1.161L3,6.357a.261.261,0,0,1,.143-.442Zm5.1,8.752c-2.016,0-4.474-1.274-4.784-3.1a.534.534,0,0,1,.689-.6,14.379,14.379,0,0,0,4.1.506,14.379,14.379,0,0,0,4.1-.506.533.533,0,0,1,.689.6C12.724,13.393,10.266,14.667,8.25,14.667ZM13.5,6.354l-.845.818.2,1.161a.249.249,0,0,1-.366.263l-1.041-.539L10.4,8.6a.249.249,0,0,1-.366-.263l.2-1.161-.845-.818a.26.26,0,0,1,.143-.439L10.7,5.752,11.211,4.7a.257.257,0,0,1,.462,0l.516,1.051,1.161.166a.256.256,0,0,1,.146.436Z"
                                  transform="translate(0 -0.563)" fill="#8c8c8c"/>
                        </svg>
                        <p class="font-allerRegular text-sm text-grey-200">{{ this.formationCard.marketLabel }}</p>
    
                    </div>
                {% endif %}
            </div>
        </div>
    </a>