<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      class="has-navbar-fixed-top reduced" id="html" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
    <head>
        
        <meta name="viewport" content="initial-scale=1, maximum-scale=1">
        <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
        <meta http-equiv="Pragma" content="no-cache">
        <meta http-equiv="Expires" content="0">
        <meta name="description" content="Le portail www.service-sanitaire.fr a pour objet la publication d’offres d’actions de service sanitaire à destination des étudiants en santé.">
        <meta name="keywords" content="service sanitaire, formations en santé, ars, étudiants en santé, stage">
        <title>Portail d&#39;offres du service sanitaire en santé</title>
        <link rel="stylesheet" href="/css/bulma.css" />
        <link rel="stylesheet" href="/css/bulma-collapsible.min.css" />
        <link rel="stylesheet" href="/css/fontawesome.css" />
        <link rel="stylesheet" href="/css/main.css?20221116" />
        <link rel="stylesheet" href="/css/all.min.css?v20210602" />
        <link rel="shortcut icon" href="/img/favicon.jpg" type="image/jpeg">
        <script type="application/javascript" src="/js/lib/vue.min.js"></script>
        <script type="application/javascript" src="/js/lib/axios.js"></script>
        <script type="application/javascript" src="/js/charte-ministere/all.min.js"></script>
        
        <link rel="stylesheet" href="/css/vue-multiselect.min.css"/>
        <script type="application/javascript" src="/js/lib/vue.min.js"></script>
        <script type="application/javascript" src="/js/lib/axios.js"></script>
        <script type="application/javascript" src="/js/lib/bulma-calendar.min.js"></script>
    
    
        <link rel="stylesheet" href="/css/vue-multiselect.min.css"/>
        <script type="application/javascript" src="/js/lib/vue.min.js"></script>
        <script type="application/javascript" src="/js/lib/axios.js"></script>
        <script type="application/javascript" src="/js/lib/bulma-calendar.min.js"></script>
    
    <style>
        .text-column ol {
    margin-left: 2em !important;
    margin-top: 1em !important;
    margin-bottom: 1em !important;
    list-style-position: outside ;
    }

    .text-column ul {
    list-style: disc !important;
    margin-left: 2em !important;
    margin-top: 1em !important;
    margin-bottom: 1em !important;
    list-style-position: outside !important;
    }

    .text-column a {
  color: #00008B !important;
  text-decoration: underline !important;
}

.text-column a:hover,
.text-column a:focus {
  color: #00008B !important;
  text-decoration: underline !important;
}

.textPeriod {
    background-color: #F0F0F0 !important;
}

.text-column p {
    margin: 1em 0;
  }
        .text-column h1 {
    font-size: 2.5em !important;
    font-weight: bold;
}

.text-column h2 {
    font-size: 2em !important;
    font-weight: bold;
}

.text-column h3 {
    font-size: 1.75em !important;
    font-weight: bold;
}

.text-column h4 {
    font-size: 1.5em !important;
    font-weight: bold;
}

.text-column h5 {
    font-size: 1.25em !important;
    font-weight: bold;
}

.text-column h6 {
    font-size: 1em !important;
    font-weight: bold;
}

    </style>
    </head>
    <body>
        <header class="rf-header navbar-is-fixed-top reduced" id="navbar" role="banner">
            <div class="rf-container">
			<div class="rf-header__body" >
				<div class="rf-header__navbar" >
					<div id="navbar-reduced">
						<div>
							<a href="/" >
								<img src="/img/logos/logo-republique-reduit.png" class="image logo is-size-1-desktop" alt="logo-république-reduit">
							</a>
						</div>
					</div>
					
					<div class="rf-service">
						<a class="rf-service__title" href="/" title="Nom du service">
							www.service-sanitaire<span class="is-italic">.fr</span>
						</a>
						
					</div>
				</div>
				<div class="rf-header__tools">
					<div class="rf-shortcuts">
						<ul class="rf-shortcuts__list">
                            
							
							

							<li class="rf-shortcuts__item">
								<a href="/login" class="rf-link  has-text-grey" target="_self">
									<span>Espace offreur ou université/institut</span>
									<span class="icon"><i class="fas fa-user"></i></span>
								</a>
							</li>
							
						</ul>
					</div>
				</div>
			</div>
		</div>
        </header>

        <div id="rgpdBanner" class="is-hidden">
            <div class="container">
                <div class="columns">
                    <div class="column is-10 ">
                        <iframe
                                style="border: 0; height: 100%; width: 100%;"
                                src="https://matomo.service-sanitaire.fr/index.php?module=CoreAdminHome&amp;action=optOut&amp;idsite=1&amp;language=fr"
                        ></iframe>
                    </div>
                    <div class="column is-2 column-button">
                        <button class="button is-link" id="consentButton">J'ai compris</button>
                    </div>
                </div>
            </div>

        </div>

        <div id="vue-offers" ref="main">
    <section class="hero bg-img search-engine-section" v-bind:class="[isInitialLoading ? 'is-fullheight' : '']">
        <div class="hero-body">
            <div class="container">
                <vc-offer-search-engine></vc-offer-search-engine>
            </div>
        </div>
    </section>
    <section v-if="!isInitialLoading" class="section offers has-background-light" ref="sectionOffers" style="padding-bottom: 0">
        <div class="container is-h-100">
            <div v-if="offers.length === 0 && !isInitialLoading && !isQuerying">
                <div class="has-text-centered is-b-marged">
                    <span class="title is-3 has-text-centered has-text-link">Oups... Aucune offre ne correspond à la recherche.</span>
                </div>
                <div class="has-text-centered">
                    <a class="button is-primary is-medium" v-on:click="newSearch()">
                    <span class="icon">
                        <i class="fas fa-search"></i>
                    </span>
                        <span>Nouvelle recherche</span>
                    </a>
                </div>
            </div>
            <div v-else-if="!isInitialLoading" class="is-h-100">
                <div class="columns is-mobile is-multiline is-h-100">
                    <div style="position: relative" class="column cards is-one-third-fullhd is-two-fifths-desktop is-full-touch list is-h-100" v-bind:class="[offersListLoading ? 'has-loading-background' : '']">
                        <div class="info-pagination has-background-primary">
                            <span class="has-text-weight-bold" v-html="displayedElements"></span> / <span class="has-text-weight-bold" v-html="totalElements"></span> <span>résultats</span>
                            <a class="is-pulled-right has-text-white" v-on:click="newSearch()">
                                <span class="icon">
                                    <i class="fas fa-search"></i>
                                </span>
                                <span>Nouvelle recherche</span>
                            </a>
                        </div>
                        <div ref="columnCards" v-on:scroll="detectEndScrollToLoadMoreOffers()" v-on:click="toogleIsMobileOfferActive()" class="is-h-100 pagination-cards">
                            <vc-offer-card
                                    v-for="summaryOffer in offers"
                                    v-bind:key="summaryOffer.id"
                                    v-bind:offer="summaryOffer"
                                    v-bind:selected-offer-id="offer.id">
                            </vc-offer-card>
                        </div>
                    </div>
                    <div class="column is-hidden-touch detail is-h-100 is-two-thirds-fullhd is-three-fifths-desktop" v-bind:class="[offerDetailsLoading ? 'has-loading-background' : '']">
                        <vc-offer-detail
                                v-if="Object.keys(offer).length > 0"
                                v-bind:offer="offer">
                        </vc-offer-detail>
                    </div>
                </div>
            </div>
            <div class="modal is-hidden-desktop" v-bind:class="[isMobileOfferActive ? 'is-active' : '']">
                <div class="modal-background has-background-link"></div>
                <div class="modal-content mobile-offer has-background-light" v-bind:class="[offerDetailsLoading ? 'has-loading-background' : '']">
                    <vc-offer-detail
                            v-if="Object.keys(offer).length > 0"
                            v-bind:offer="offer">
                    </vc-offer-detail>
                </div>
                <a v-on:click="toogleIsMobileOfferActive()" class="modal-return has-text-white has-text-weight-bold">
                    <span class="icon">
                        <i class="fas fa-chevron-left"></i>
                    </span>
                    <span>Retour</span>
                </a>

            </div>
        </div>
    </section>
</div>

        <footer class="rf-footer" role="contentinfo" id="footer">
            <div class="rf-container">
					<div class="rf-footer__body rf-footer__body--operator">
						<div class="rf-footer__brand">
							<a class="rf-logo" href="https://solidarites-sante.gouv.fr/"
							   target="_blank" title="république française">
                    <span class="rf-logo__title">ministère
                        <br>des solidarités<br> et de la santé</span>
							</a>

							<a class="rf-logo" href="https://www.education.gouv.fr/le-ministre-de-l-education-nationale-de-la-jeunesse-et-des-sports-209"
							   target="_blank" title="république française">
                    <span class="rf-logo__title">ministère
                        <br>de l'éducation <br> nationale, <br> de la jeunesse <br> et des sports</span>
							</a>

							<a class="rf-footer__brand-link" href="https://www.ars.sante.fr/" target="_blank" title="ars">
								<img class="rf-footer__logo" src="/img/charte/logo_ARS_national_HD.jpg" alt="Logo ARS">
							</a>
						</div>
						<div class="rf-footer__content" id="footer-links-vue">
							<vc-editable-footer-links></vc-editable-footer-links>
						</div>
					</div>
				</div>
        </footer>
    </body>

    <script id="vc-editable-footer-links" type="text/html">
        <div >

    <p class="rf-footer__content-desc has-text-grey">Service sanitaire des étudiants en santé © 2018</p>
    <ul class="rf-footer__content-list">
        <li class="rf-footer__content-item">
            <a class="rf-footer__content-link has-text-link" href="/mentions-legales"  v-html="legalTermsLink"></a>
        </li>
        <li class="rf-footer__content-item">
            <a class="rf-footer__content-link has-text-link" href="/accessibilite"  v-html="accessibilityLink"></a>
        </li>
        <li class="rf-footer__content-item">
            <a class="rf-footer__content-link has-text-link" href="/presentation" v-html="presentationLink"></a>
        </li>
        <li class="rf-footer__content-item">
            <a class="rf-footer__content-link has-text-link" href="/donnees-personnelles" v-html="personalDataLink"></a>
        </li>
        <li class="rf-footer__content-item">
            <a class="rf-footer__content-link has-text-link" onclick="displayRgpdBanner()">Gestion des cookies</a>
        </li>
    </ul>
</div>
    </script>
    
    <script id="vc-offer-card" type="text/html">
        <div xmlns:v-bind="http://www.w3.org/1999/xhtml"
	 xmlns:v-on="http://www.w3.org/1999/xhtml"
	 class="card is-shadow-on-hover is-cursor-pointer"
     v-on:click="select()"
	 v-bind:class="{ 'is-active': (selectedOfferId == offer.id) }">
	<div class="card-content is-padded">
		<div class="offer-provided" v-if="offer.provided">
			<span>POURVUE</span>
		</div>
		<div class="media">
			<div class="media-left">
				<figure class="image is-64x64">
					<img v-if="offer.structure && offer.structure.logoPath" v-bind:src="offer.structure.logoPath" alt="Placeholder image">
					<img v-else src="/img/service_sanitaire.jpg" alt="logo de la structure"/>
				</figure>
			</div>
			<div class="media-content">
				<p class="title is-6 is-marginless has-text-link" v-html="offer.title"></p>
				<p>
					<div>
						<span class="has-text-weight-bold has-text-primary" v-html="offer.structureName"></span>
					</div>
					<div class="has-text-grey">
						<span class="icon is-small">
							<i class="far fa-clock"></i>
						</span>
						<span>publiée le</span>
						<time v-bind:datetime="offer.publicationStartDate" v-html="$options.filters.date(offer.publicationStartDate)"></time>
					</div>
				</p>
			</div>
		</div>
		<div class="columns is-multiline is-gapless is-mobile">
			<div class="column is-4  has-text-centered has-text-grey">
					<div class="icon ">
						<i class="fas fa fa-book"></i>
					</div>
				<div class="has-text-centered" v-html="offer.theme.name"></div>
			</div>
			<div class="column is-4  has-text-centered has-text-grey">
					<div class="icon">
						<i class="fas fa-building"></i>
					</div>
				<div class="has-text-centered" v-html="offer.fieldType.name"></div>
			</div>
			<div class="column is-4  has-text-centered has-text-grey">
					<div class="icon">
						<i class="fas fa-map-marker-alt"></i>
					</div>
				<div class="has-text-centered" v-html="offer.address.city.name"></div>
			</div>
		</div>
	</div>
</div>
    </script>
    <script id="vc-offer-details" type="text/html">
        <div xmlns:v-bind="http://www.w3.org/1999/xhtml"
     xmlns:v-on="http://www.w3.org/1999/xhtml"
     class="is-h-100">
    <style>
        .cell-width-50 {
            width: 50%;
        }
    </style>
    <div class="tabs is-boxed is-marginless">
        <ul>
            <li v-bind:class="{ 'is-active': activeTab == 0 }">
                <a v-on:click="activeTab = 0">
                    <span class="icon is-small"><i class="fas fa-clipboard-list" aria-hidden="true"></i></span>
                    <span class="">Offre</span>
                </a>
            </li>
            <li v-bind:class="{ 'is-active': activeTab == 1 }">
                <a v-on:click="activeTab = 1">
                    <span class="icon is-small"><i class="fas fa-file" aria-hidden="true"></i></span>
                    <span class="">Documents</span>
                </a>
            </li>
            <li v-bind:class="{ 'is-active': activeTab == 2 }">
                <a v-on:click="activeTab = 2">
                    <span class="icon is-small"><i class="fas fa-building" aria-hidden="true"></i></span>
                    <span class="">Offreur</span>
                </a>
            </li>
            <li>
                <a v-bind:href="'api/offres/export/' + offer.id" v-on:click="pdf()">
                    <span class="icon is-small"><i class="fas fa-download" aria-hidden="true"></i></span>
                    <span class="">Télécharger la fiche</span>
                </a>
            </li>
            <li v-if="offer.address.city.department.region.code == 11" v-bind:class="{ 'is-active': activeTab == 4 }">
                <a v-on:click="activeTab = 4">
                    <span class="icon is-small"><i class="fas fa-envelope"></i></span>
                    <span class="">Je candidate</span>
                </a>
            </li>
        </ul>
    </div>
    <div class="offer " v-if="activeTab == 0">
        <div v-if="offer.provided" class="ribbon ribbon-top-right"><span>OFFRE POURVUE</span></div>
        <div class="columns is-multiline">
            <div class="column is-one-fifth-fullhd is-one-quarter-desktop is-full-tablet">
                <div class="image is-128x128 is-hidden-desktop is-marge-center">
                    <img v-if="offer.structure && offer.structure.logoPath" v-bind:src="offer.structure.logoPath"
                         alt="Placeholder image">
                    <img v-else src="/img/service_sanitaire.jpg" alt="logo de la structure"/>
                </div>
                <div class="image is-128x128 is-hidden-touch">
                    <img v-if="offer.structure && offer.structure.logoPath" v-bind:src="offer.structure.logoPath"
                         alt="Placeholder image">
                    <img v-else src="/img/service_sanitaire.jpg" alt="logo de la structure"/>
                </div>
            </div>
            <div class="column is-paddingless">
                <div class="column is-12">
                    <p>
                        <span class="has-text-grey-light">Offre d&#39;action n°</span>
                        <span class="has-text-link has-text-grey-light" v-if="offer.technicalId"
                              v-html="offer.technicalId"></span>
                        <span class="has-text-grey-light" v-else>N/A</span>
                    </p>
                    <h2 class="title has-text-link is-3 is-marginless" v-if="offer.title" v-html="offer.title"></h2>
                    <span class="has-text-grey-light" v-else>N/A</span>

                    <label class="label has-text-primary is-medium"
                           v-if="offer.structure && offer.structure.businessName"
                           v-html="offer.structure.businessName"></label>
                    <span class="has-text-grey-light" v-else>N/A</span>
                </div>
            </div>
            <div class="column is-full">
                <div class="title has-text-link is-5 is-uppercase">Informations générales</div>
                <table class="table is-fullwidth is-hoverable is-narrow">
                    <tbody>
                    <tr>
                        <td class="cell-width-50">
                            <label class="label has-text-grey">Thème</label>
                        </td>
                        <td class="cell-width-50">
                            <span class="has-text-grey" v-if="offer.theme && offer.theme.name"
                                  v-html="offer.theme.name"></span>
                            <span class="has-text-grey-light" v-else>N/A</span>
                        </td>
                    </tr>
                    <tr>
                        <td class="cell-width-50">
                            <label class="label has-text-grey">Public cible</label>
                        </td>
                        <td class="cell-width-50">
                            <span v-if="offer.targetedAudience && offer.targetedAudience.name"
                                  class="has-text-grey" v-html="offer.targetedAudience.name"></span>
                            <span class="has-text-grey-light" v-else>N/A</span>
                        </td>
                    </tr>
                    <tr>
                        <td class="cell-width-50">
                            <label class="label has-text-grey">Nombre d’étudiants minimal pour l’action</label>
                        </td>
                        <td class="cell-width-50">
                            <span v-if="offer.availableSlots" class="tag is-primary has-text-white"
                                  v-html="offer.availableSlots"></span>
                            <span class="has-text-grey-light" v-else>N/A</span>
                        </td>
                    </tr>
                    <tr>
                        <td class="cell-width-50">
                            <label class="label has-text-grey">Nombre d’étudiants maximum</label>
                        </td>
                        <td class="cell-width-50">
                            <span v-if="offer.availableSlotsMax" class="tag is-primary has-text-white"
                                  v-html="offer.availableSlotsMax"></span>
                            <span class="has-text-grey-light" v-else>N/A</span>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <div class="description is-small-padded">
                    <label class="label has-text-grey">Description</label>
                    <article v-if="offer.description" class="message is-marginless">
                        <div class="message-body has-text-grey" v-html="offer.description"></div>
                        <span></span>
                    </article>
                    <span class="has-text-grey-light" v-else>N/A</span>
                </div>
            </div>
            <div class="column is-full">
                <div class="title has-text-link is-5 is-uppercase">Lieu de terrain d&#39;action</div>

                <table class="table is-fullwidth is-hoverable is-narrow">
                    <tbody>
                    <tr>
                        <td class="cell-width-50">
                            <label class="label has-text-grey">Nom de la structure d&#39;accueil</label>
                        </td>
                        <td class="cell-width-50">
                            <span v-if="offer.structureName" class="has-text-grey" v-html="offer.structureName"></span>
                            <span class="has-text-grey-light" v-else>N/A</span>
                        </td>
                    </tr>
                    <tr>
                        <td class="cell-width-50">
                            <label class="label has-text-grey">Type de terrain d&#39;action</label>
                        </td>
                        <td class="cell-width-50">
                            <span v-if="offer.fieldType && offer.fieldType.name" class="has-text-grey"
                                  v-html="offer.fieldType.name"></span>
                            <span class="has-text-grey-light" v-else>N/A</span>
                        </td>
                    </tr>
                    <tr>
                        <td class="cell-width-50">
                            <label class="label has-text-grey">Adresse</label>
                        </td>
                        <td class="cell-width-50">
                            <span v-if="offer.address && offer.address.street"
                                  class="has-text-grey" v-html="offer.address.street"></span>
                            <span class="has-text-grey-light" v-else>N/A</span>
                        </td>
                    </tr>
                    <tr>
                        <td class="cell-width-50">
                            <label class="label has-text-grey">Commune</label>
                        </td>
                        <td class="cell-width-50">
                            <span v-if="offer.address && offer.address.city && offer.address.city.name && offer.address.city.postCode"
                                  class="has-text-grey"
                                  v-html="offer.address.city.postCode + ' ' + offer.address.city.name"></span>
                            <span class="has-text-grey-light" v-else>N/A</span>
                        </td>
                    </tr>
                    <tr v-if="offer.isReferee">
                        <td class="cell-width-50">
                            <label class="label has-text-grey">Référent</label>
                        </td>
                        <td class="cell-width-50">
                            <span v-if="offer.referentName" class="has-text-grey" v-html="offer.referentName"></span>
                            <span class="has-text-grey-light" v-else>N/A</span>

                            <span class="tag is-light is-medium has-text-grey"
                                  v-if="offer.referentName && offer.referentFunction"
                                  v-html="offer.referentFunction"></span>
                        </td>
                    </tr>
                    <tr v-if="offer.isReferee">
                        <td class="cell-width-50">
                            <label class="label has-text-grey">Référent suppléant</label>
                        </td>
                        <td class="cell-width-50">
                            <span v-if="offer.alternateReferentName" class="has-text-grey"
                                  v-html="offer.alternateReferentName"></span>
                            <span class="has-text-grey-light" v-else>N/A</span>

                            <span class="tag is-light is-medium has-text-grey"
                                  v-if="offer.alternateReferentName && offer.alternateReferentFunction"
                                  v-html="offer.alternateReferentFunction"></span>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="column is-full">
                <div class="title has-text-link is-5 is-uppercase">Modalités de prise en charge</div>

                <table class="table is-fullwidth is-hoverable is-narrow" v-if="offer.periodeBanalisee == 'OUI'">
                    <caption></caption>
                    <tbody>
                    <tr>
                        <th style="display: none;"></th>
                        <td class="text-column textPeriod">
                            <span v-if="offer.filterDepartementText" class="has-text-grey" v-html="offer.filterDepartementText"></span>
                            <span class="has-text-grey-light" v-else>N/A</span>
                            <br>
                        </td>
                    </tr>
                    </tbody>
                </table>


                <table class="table is-fullwidth is-hoverable is-narrow">
                    <caption></caption>
                    <tbody>
                    <tr>
                        <th id="th" style="display: none;"></th>
                        <td class="cell-width-50">
                            <label class="label has-text-grey">Modalité</label>
                        </td>
                        <td  class="cell-width-50">
                            <span v-if="offer.termsOfCare" class="has-text-grey" v-html="offer.termsOfCare"></span>
                            <span class="has-text-grey-light" v-else>N/A</span>
                        </td>
                    </tr>
                    <tr v-if="offer.periodeBanalisee == 'NON'">
                        <td class="cell-width-50">
                            <label class="label has-text-grey">Type de période</label>
                        </td>
                        <td class="cell-width-50">
                            <span v-if="offer.periodOfCare && offer.periodOfCare.name"
                                  class="has-text-grey" v-html="offer.periodOfCare.name"></span>
                            <span class="has-text-grey-light" v-else>N/A</span>
                        </td>
                    </tr>
                    <tr v-if="offer.periodeBanalisee == 'NON'">
                        <td class="cell-width-50"><label class="label has-text-grey">Période proposée</label></td>
                        <td class="cell-width-50">
                            <span v-if="offer.beginDate && !offer.endDate" class="has-text-grey">
                                A partir du <time v-bind:datetime="offer.beginDate"
                                                  v-html="$options.filters.date(offer.beginDate)"></time> <span
                                    v-if="offer.endDate"></span>
                            </span>
                            <span v-else-if="offer.beginDate && offer.endDate" class="has-text-grey">
                                 Du <time v-bind:datetime="offer.beginDate"
                                          v-html="$options.filters.date(offer.beginDate)"></time> <span
                                    v-if="offer.endDate"></span> au <time v-bind:datetime="offer.endDate"
                                                                          v-html="$options.filters.date(offer.endDate)"></time>
                            </span>
                            <span v-else-if="!offer.beginDate && offer.endDate" class="has-text-grey">
                                 Jusqu'au <time v-bind:datetime="offer.endDate"
                                                v-html="$options.filters.date(offer.endDate)"></time>
                            </span>
                            <span v-else-if="!offer.beginDate && !offer.endDate" class="has-text-grey-light" v-else>N/A</span>
                        </td>
                    </tr>
                    <tr v-if="offer.periodeBanalisee == 'NON'">
                        <td class="cell-width-50"><label class="label has-text-grey">Vacances scolaires incluses</label></td>
                        <td class="cell-width-50">
                            <span class="tag is-primary" v-if="offer.schoolTermIncluded">Oui</span>
                            <span class="tag is-danger" v-else>Non</span>
                        </td>
                    </tr>
                    <tr>
                        <td class="cell-width-50"><label class="label has-text-grey">Option de prise en charge</label></td>
                        <td class="cell-width-50">
                            <div v-if="offer.logisticOptions.length > 0">
                                <div v-for="logisticOption in offer.logisticOptions">
                                    <span v-if="logisticOption && logisticOption.name"
                                          class="has-text-grey" v-html="logisticOption.name"></span>
                                    <span class="has-text-grey-light" v-else>N/A</span>
                                </div>
                            </div>
                            <span class="has-text-grey-light" v-else>N/A</span>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="columns" v-if="offer.isCandidature">
            <div class="column is-full">
                <div class="title has-text-link is-5 is-uppercase">Comment candidater</div>
                <table class="table is-fullwidth is-hoverable is-narrow">
                    <tbody>
                    <tr>
                        <td class="cell-width-50"><label class="label has-text-grey">Transmettre votre candidature à l&#39;adresse</label></td>
                        <td class="cell-width-50">
                            <a v-if="offer.email" v-bind:href="'mailto:' + offer.email" class="has-text-grey"
                               v-html="offer.email"></a>
                            <span class="has-text-grey-light" v-else>N/A</span>
                        </td>
                    </tr>
                    <tr>
                        <td class="cell-width-50"><label class="label has-text-grey">Le dossier de candidature devra contenir</label>
                        </td>
                        <td class="cell-width-50">
                            <div v-if="offer.documents">
                                <div v-for="document in formatDocumentList(offer.documents)">
                                    <span class="has-text-grey" v-html="document"></span>
                                </div>
                            </div>
                            <span class="has-text-grey-light" v-else>N/A</span>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="offer-documents" v-if="activeTab == 1">
        <div class="columns is-multiline">
            <div v-if="offer.attachments && offer.attachments.length > 0" class="column">
                <a v-on:click="doc(attachment)" v-bind:href="'api/offres/documents/' + offer.id + '/' + attachment"
                   class="box" v-for="attachment in offer.attachments">
                    <article class="media">
                        <div class="media-left">
                            <span v-if="attachment.endsWith('docx') || attachment.endsWith('doc')"
                                  class="icon has-text-info is-large">
                                <i class="far fa-file-word fa-3x"></i>
                            </span>
                            <span v-else-if="attachment.endsWith('xlsx') || attachment.endsWith('xls')"
                                  class="icon has-text-success is-large">
                                <i class="far fa-file-excel fa-3x"></i>
                            </span>
                            <span v-else-if="attachment.endsWith('pdf')" class="icon has-text-danger is-large">
                                <i class="far fa-file-pdf fa-3x"></i>
                            </span>
                            <span v-else-if="attachment.endsWith('zip') || attachment.endsWith('rar')"
                                  class="icon has-text-warning is-large">
                                <i class="far fa-file-archive fa-3x"></i>
                            </span>
                            <span v-else-if="attachment.endsWith('jpg') || attachment.endsWith('jpeg') || attachment.endsWith('png') || attachment.endsWith('gif') || attachment.endsWith('bmp')"
                                  class="icon has-text-black is-large">
                                <i class="far fa-file-image fa-3x"></i>
                            </span>
                            <span v-else class="icon has-text-black is-large">
                                <i class="far fa-file fa-3x"></i>
                            </span>
                        </div>
                        <div class="media-content">
                            <div class="content" v-html="attachment">
                            </div>
                        </div>
                    </article>
                </a>
            </div>
            <div v-else>
                <article class="media">
                    <div class="media-content">
                        <div class="content">
                            <br/>
                            <p class="title is-6 has-text-link"> Aucun document associé à l'offre </p>
                        </div>
                    </div>
                </article>
            </div>
        </div>
    </div>
    <div class="offer-structure" v-if="activeTab == 2">
        <div class="columns is-multiline">
            <div class="column is-one-fifth-fullhd is-one-quarter-desktop is-full-tablet">
                <div class="image is-128x128 is-hidden-desktop is-marge-center">
                    <img v-if="offer.structure && offer.structure.logoPath" v-bind:src="offer.structure.logoPath"
                         alt="Placeholder image">
                    <img v-else src="/img/service_sanitaire.jpg" alt="logo de la structure"/>
                </div>
                <div class="image is-128x128 is-hidden-touch">
                    <img v-if="offer.structure && offer.structure.logoPath" v-bind:src="offer.structure.logoPath"
                         alt="Placeholder image">
                    <img v-else src="/img/service_sanitaire.jpg" alt="logo de la structure"/>
                </div>
            </div>
            <div class="column is-paddingless">
                <div class="column is-12">
                    <p>
                        <span>Offreur</span>
                    </p>

                    <h2 class="title is-3 is-marginless" v-if="offer.structure && offer.structure.businessName"
                        v-html="offer.structure.businessName"></h2>
                    <span class="has-text-grey-light" v-else>N/A</span>
                </div>
            </div>
            <div class="column is-full">
                <div class="title has-text-link is-5 is-uppercase">Informations générales</div>
                <table class="table is-fullwidth is-hoverable is-narrow">
                    <tbody>
                    <tr>
                        <td class="cell-width-50">
                            <label class="label has-text-grey">Raison sociale</label>
                        </td>
                        <td class="cell-width-50">
                            <span v-if="offer.structure && offer.structure.businessName" class="has-text-grey"
                                  v-html="offer.structure.businessName"></span>
                            <span class="has-text-grey-light" v-else>N/A</span>
                        </td>
                    </tr>
                    <tr>
                        <td class="cell-width-50">
                            <label class="label has-text-grey">Adresse</label>
                        </td>
                        <td class="cell-width-50">
                            <div v-if="offer.structure && offer.structure.address">
                                <span v-html="offer.structure.address.street" class="has-text-grey"></span><br>
                                <div v-if="offer.structure.address.complement"><span
                                        v-html="offer.structure.address.complement" class="has-text-grey"></span><br>
                                </div>
                                <span v-html="offer.structure.address.city.postCode" class="has-text-grey"></span>
                                <span v-html="offer.structure.address.city.name" class="has-text-grey"></span>
                            </div>
                            <span class="has-text-grey-light" v-else>N/A</span>
                        </td>
                    </tr>
                    <tr>
                        <td class="cell-width-50">
                            <label class="label has-text-grey">Type d&#39;offreur</label>
                        </td>
                        <td class="cell-width-50">
                            <span v-if="offer.structure && offer.structure.structureType" class="has-text-grey"
                                  v-html="offer.structure.structureType.name"></span>
                            <span class="has-text-grey-light" v-else>N/A</span>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <div class="description is-small-padded">
                    <label class="label has-text-grey">Description de l&#39;offreur</label>
                    <article v-if="offer.structure && offer.structure.description"
                             class="message is-marginless has-text-grey">
                        <div class="message-body has-text-grey" v-html="offer.structure.description"></div>
                        <span></span>
                    </article>
                    <span class="has-text-grey-light" v-else>N/A</span>
                </div>
            </div>
        </div>
    </div>
    <div class="offer" v-if="activeTab == 4">
        <div class="column is-full" v-bind:class="{ 'has-loading-background': hasLoadingBackground}">
            <div class="title has-text-link is-5 is-uppercase">Demande de candidature des etudiants en medecine</div>
            <article class="message is-danger">
                <div class="message-body">
                    <p>Cette fonctionnalité n’est disponible actuellement qu’aux étudiants en Médecine</p>
                    <p v-for="error in errors"><i class="fas fa-exclamation-triangle"></i> {{error}}</p>
                </div>
            </article>
            <table class="table is-fullwidth is-hoverable is-narrow">
                <tbody>
                <tr>
                    <td class="cell-width-50">
                        <label class="label has-text-grey">Nom*</label>
                    </td>
                    <td class="cell-width-50">
                        <input v-model="candidateLastname" class="input has-text-grey" type="text">
                    </td>
                </tr>
                <tr>
                    <td class="cell-width-50">
                        <label class="label has-text-grey">Prénom*</label>
                    </td>
                    <td class="cell-width-50">
                        <input v-model="candidateFirstname" class="input has-text-grey" type="text">
                    </td>
                </tr>
                <tr>
                    <td class="cell-width-50">
                        <label class="label has-text-grey">Université ou institut*</label>
                    </td>
                    <td class="cell-width-50">
                        <div class="select has-text-grey">
                            <select v-model="universitySelected">
                                <option v-for="university in universities" v-bind:value="university.businessName">
                                    {{ university.businessName }}
                                </option>
                            </select>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="cell-width-50">
                        <label class="label has-text-grey">Date de disponibilités*</label>
                    </td>
                    <td class="cell-width-50">
                        <div class="field is-horizontal">
                            <div class="field-body">
                                <div class="field">
                                    <p class="control is-expanded has-icons-left">
                                        <input id="beginDate" class="input offer-date-input has-text-grey" type="date"
                                               ref="beginDate">
                                    </p>
                                </div>
                                <div class="field">
                                    <p class="control is-expanded has-icons-left has-icons-right">
                                        <input id="endDate" class="input offer-date-input has-text-grey" type="date"
                                               ref="endDate">
                                    </p>
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="cell-width-50">
                        <label class="label has-text-grey">Courriel de contact de l&#39;etudiant*</label>
                    </td>
                    <td class="cell-width-50">
                        <input v-model="studentMail" class="input has-text-grey" type="email">
                    </td>
                </tr>
                <tr>
                    <td class="cell-width-50">
                        <label class="label has-text-grey">Courriel du service pedagogique*</label>
                    </td>
                    <td class="cell-width-50">
                        <input v-model="serviceMail" class="input has-text-grey" type="email">
                    </td>
                </tr>
                <tr>
                    <td class="cell-width-50">
                        <label class="label has-text-grey">CV</label>
                    </td>
                    <td class="cell-width-50">
                        <div class="file has-name">
                            <label class="file-label has-text-grey">
                                <input class="file-input" type="file" name="cvFile" id="cvFile" ref="cvFile"
                                       v-on:change="handleCvFileUpload()">
                                <span class="file-cta">
                                    <span class="file-icon">
                                        <i class="fas fa-upload has-text-grey"></i>
                                    </span>
                                    <span class="file-label has-text-grey">
                                        Choisissez un fichier...
                                    </span>
                                </span>
                                <span v-if="cvFile" class="file-name has-text-grey">
                                    {{cvFile.name}}
                                </span>
                            </label>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="cell-width-50">
                        <label class="label has-text-grey">Lettre de motivation</label>
                    </td>
                    <td class="cell-width-50">
                        <div class="file has-name">
                            <label class="file-label">
                                <input class="file-input has-text-grey" type="file" name="lmFile" id="lmFile"
                                       ref="lmFile" v-on:change="handleLmFileUpload()">
                                <span class="file-cta has-text-grey">
                                    <span class="file-icon">
                                        <i class="fas fa-upload"></i>
                                    </span>
                                    <span class="file-label has-text-grey">
                                        Choisissez un fichier...
                                    </span>
                                </span>
                                <span v-if="lmFile" class="file-name has-text-grey">
                                    {{lmFile.name}}
                                </span>
                            </label>
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
            <div class="buttons has-addons is-right">
                <a class="button is-success" v-on:click="sendCandidateMail()">
                    <span class="icon">
                        <i class="fas fa-paper-plane"></i>
                    </span>
                    <span>Envoyer</span>
                </a>
            </div>
            <article>
                <div class="message-body has-text-grey">
                    <div v-html="applyContent"></div>
                </div>
            </article>
        </div>
    </div>
</div>
    </script>
    <script id="vc-offer-search-engine" type="text/html">
        <div xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
	<div class="columns is-marginless">
		<div class="column is-three-fifths-widescreen is-offset-one-fifth-widescreen is-fullwidth-desktop">
			<div class="title is-size-3-desktop is-size-5-mobile has-text-white is-small-b-marged">Effectuer une recherche</div>
			<div class="field has-addons">
				<div class="control is-expanded has-icons-right">
					<input v-on:keyup.enter="search()" class="input is-medium-desktop is-small-mobile is-fullwidth" autofocus autocomplete="off" v-model="keywords" name="keywords" type="text" placeholder="Rechercher une offre">
<!--					<span class="icon is-right">-->
<!--						<i class="fas fa-search"></i>-->
<!--					</span>-->
				</div>
				<div class="control">
					<a v-on:click="search()" class="button is-medium-desktop is-small-mobile is-primary"><i class="fas fa-search"></i></a>
				</div>
<!--				<div class="control is-b-marged">-->
<!--					<a class="button is-medium" style="background: transparent; border: 0px;" v-if="!isAdvancedSearch" v-on:click="toogleIsAdvancedSearch()" ><i class="fas fa-bars"></i></a>-->
<!--					<a class="button is-medium" style="background: transparent; border: 0px;" v-if="isAdvancedSearch" v-on:click="toogleIsAdvancedSearch()" ><i class="fas fa-bars"></i></a>-->
<!--				</div>-->
			</div>
			<div class="is-b-marged" style="text-align: right">
				<a v-if="!isAdvancedSearch" class="has-text-white" v-on:click="toogleIsAdvancedSearch()">Recherche avancée</a>
				<a v-if="isAdvancedSearch" class="has-text-white" v-on:click="toogleIsAdvancedSearch()">Cacher les paramètres avancés</a>
			</div>
		</div>
	</div>

	<div v-if="isAdvancedSearch" class="columns">
		<div class="column is-three-fifths-widescreen is-offset-one-fifth-widescreen is-fullwidth-desktop">
			<div class="box search-engine has-background-light">
				<a v-on:click="resetSelectedFilters()" class="button is-pulled-right is-primary" title="Réinitialiser">
					<span class="icon is-small">
      					<i class="fas fa-redo-alt"></i>
					</span>
				</a>
				<div class="subtitle is-4 has-text-primary">Recherche avancée</div>
				<div class="is-b-marged">
					<div class="columns is-multiline">
						<div class="column is-6">
							<label class="label has-text-link">Type de terrain d&#39;action</label>
							<multiselect
									name="fieldTypes"
									placeholder="Ex: Ecole primaire"

									:selectLabel="''"
									:selectGroupLabel="''"
									:Label="''"
									:deselectLabel="''"
									:deselectGroupLabel="''"
									:tagPlaceholder="''"

									v-model="selectedFieldTypes"
									:options="fieldTypes"
									track-by="code"
									label="name"
									:multiple="true"
									:hideSelected="true"
									:allowEmpty="true"
									:closeOnSelect="false">
							</multiselect>
						</div>
						<div class="column is-6" v-bind:class="{ 'region-search': selectedRegion }">
							<label class="label has-text-link">Region</label>
							<multiselect
									@select="getAndSetDepartmentsByRegionCode"
									v-model="selectedRegion"
									deselect-label="Can't remove this value"
									placeholder="Ex: Normandie"
									:selectLabel="''"
									:selectGroupLabel="''"
									name="regions"

									track-by="code"
									label="name"
									:custom-label="regionsCustomLabel"
									:Label="''"
									:deselectLabel="''"
									:deselectGroupLabel="''"
									:tagPlaceholder="''"
									:options="regions"
									:searchable="false"
									:allow-empty="false">
							</multiselect>
						</div>
						<div class="column is-6">
							<label class="label has-text-link">Type d&#39;offreur</label>
							<multiselect
									name="structureTypes"
									placeholder="Ex: Association loi 1901"

									:selectLabel="''"
									:selectGroupLabel="''"
									:Label="''"
									:deselectLabel="''"
									:deselectGroupLabel="''"
									:tagPlaceholder="''"

									v-model="selectedStructureTypes"
									:options="structureTypes"
									track-by="code"
									label="name"
									:multiple="true"
									:hideSelected="true"
									:allowEmpty="true"
									:closeOnSelect="false">
							</multiselect>
						</div>
						<div class="column is-6">
							<label class="label has-text-link">Département</label>
							<multiselect
									name="departments"
									placeholder="Ex: 75"
									:selectLabel="''"
									:selectGroupLabel="''"
									:Label="''"
									:deselectLabel="''"
									:deselectGroupLabel="''"
									:tagPlaceholder="''"
									:disabled="!selectedRegion"
									v-model="selectedDepartments"
									:options="departments"
									:multiple="true"
									:hideSelected="true"
									:allowEmpty="true"
									:closeOnSelect="false">
							</multiselect>
						</div>
						<div class="column is-6">
							<label class="label has-text-link">Thématique</label>
							<multiselect
									name="themes"
									placeholder="Ex: Addiction"

									:selectLabel="''"
									:selectGroupLabel="''"
									:Label="''"
									:deselectLabel="''"
									:deselectGroupLabel="''"
									:tagPlaceholder="''"

									v-model="selectedThemes"
									:options="themes"
									track-by="code"
									label="name"
									:multiple="true"
									:hideSelected="true"
									:allowEmpty="true"
									:closeOnSelect="false">
							</multiselect>
						</div>
						<div class="column is-6">
							<label class="label has-text-link">Commune</label>
							<multiselect
									name="city"
									placeholder="Ex: Évry"

									:select-label="''"
									:select-group-label="''"
									:label="''"
									:deselect-label="''"
									:deselect-group-label="''"
									:tag-placeholder="''"
									:disabled="!selectedRegion"

									v-model="selectedCities"
									label="name"
									track-by="inseeCode"
									:options="cities"
									:internal-search="false"
									:multiple="true"
									:hide-selected="true"
									:allow-empty="true"
									:searchable="true"
									:loading="citiesInputIsLoading"
									:preserve-search="true"
									:close-on-select="false"
									:custom-label="citiesCustomLabel"
									@search-change="getAndSetCities">
							</multiselect>
						</div>
						<div class="column is-6">
							<label class="label has-text-link">Période</label>
							<multiselect
									name="months"
									placeholder="Ex: Janvier — Mars"

									:selectLabel="''"
									:selectGroupLabel="''"
									:Label="''"
									:deselectLabel="''"
									:deselectGroupLabel="''"
									:tagPlaceholder="''"

									v-model="selectedMonths"
									:options="months"
									track-by="id"
									label="name"
									:multiple="true"
									:hideSelected="true"
									:allowEmpty="true"
									:closeOnSelect="false">
							</multiselect>
						</div>
						<div class="column is-6">
							<label class="label has-text-link">N° Offre</label>
							<input v-model="technicalId" class="input" type="text" placeholder="Ex: 96-THM07-0479">
						</div>
					</div>
					<hr style="height: 1px" class="has-background-grey-lighter"/>
				</div>
				<div  class="is-flex is-center actions">
					<div style="margin-left: auto" class="is-padded">
						<a class="button is-primary" :disabled="!selectedRegion" v-on:click="selectedRegion ? search(): false">Rechercher</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
    </script>


    <script type="application/javascript" src="/js/footer/footerLinksVue.js?v20220317"></script>
    
    
    <script>
        /*<![CDATA[*/
        var _applyContent = null;
        var _home = null;
        /*]]>*/
    </script>
    <script type="application/javascript" src="/js/lib/vue-multiselect.min.js"></script>
    <script type="application/javascript" src="/js/utils/filtersVue.js?v20210210"></script>
    <script type="application/javascript" src="/js/offers/offerVue.js?v20210906"></script>


    <!-- Matomo -->
    <script type="text/javascript">
        var _paq = window._paq = window._paq || [];

        /*<![CDATA[*/
        var mtm = "https:\/\/matomo.service-sanitaire.fr\/";
        var sid = "1";
        /*]]>*/
        _paq.push(['trackPageView']);
        _paq.push(['enableLinkTracking']);
        (function() {
            var u=mtm;
            _paq.push(['setTrackerUrl', u+'matomo.php']);
            _paq.push(['setSiteId', sid]);
            var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
            g.async=true; g.defer=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
        })();
    </script>
    
    <script type="text/javascript">
        (function() {
            if (getCookie('hasContent') === null){
                document.getElementById("rgpdBanner").classList.remove("is-hidden");
                document.getElementById("rgpdBanner").classList.add("rgpd-banner");
            } else {
                document.getElementById("rgpdBanner").classList.add("is-hidden");
            }
        })();
        var p = document.getElementById("consentButton");
        p.onclick = function() {
            document.cookie = "hasContent=true";
            document.getElementById("rgpdBanner").classList.add("is-hidden");
        };

        function getCookie(name) {
            var v = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');
            return v ? v[2] : null;
        }
        function displayRgpdBanner(){
            document.getElementById("rgpdBanner").classList.remove("rgpd-banner");
            document.getElementById("rgpdBanner").classList.remove("is-hidden");
            document.getElementById("rgpdBanner").classList.add("rgpd-banner");

        }
    </script>
    <!-- End Matomo Code -->
</html>