{% extends 'base.html.twig' %}
{% block title %}Hello PagesController!{% endblock %}
{% block stylesheets %}
{# <link rel="stylesheet" href="{{ asset('build/styledrag2.css') }}">#}
{{ encore_entry_link_tags('styledrag2') }}
{{ encore_entry_link_tags('style') }}
{{ encore_entry_link_tags('bootstrap.min') }}
{% endblock %}
{% block body %}
<style>
.example-wrapper {
margin: 1em auto;
max-width: 800px;
width: 95%;
font: 18px/1.5 sans-serif;
}
.example-wrapper code {
background: #F5F5F5;
padding: 2px 6px;
}
</style>
<!--- Informations structure -->
<section class="home py-1 bg-light" id="job_présentation">
<div class="container-lg">
<div class="row align-items-center align-content-center">
<div class="col-md-6 mt-5 mt-md-0">
<div class="home-img text-center">
<img src="{{ asset('uploads/pdf_file/'~ offer.logoStructure) }}" class="rounded-circle" style="max-width: 100%">
</div>
</div>
<div class="col-md-6 mt-5 mt-md-0 order-md-first">
<div class="home-text">
<p class="text-muted mb-1">{{ offer.localisation }}</p>
<h1 class="text-danger text-uppercase fs-1 fw-bold">{{ offer.titre }}</h1>
<h2 class="fs-4">{{ offer.nomStructure }}</h2>
<p class="mt-4 text-muted">{{ structure.descriptionStructure }} </p>
</div>
</div>
<div class="col">
<div class="home-img text-md-start">
{% if is_granted('ROLE_ADMIN_STRUCTURE') %}
<a class="btn btn-download text-danger" href="{{ path('app_apply',{id : offer.id}) }}">
<h2><i class="bi bi-inbox-fill"></i> {{ offer.nombreCandidature }} candidature(s)
</h2>
</a>
{% endif %}
</div>
<div class="home-img text-md-end">
{% set test = 'uploads/pdf_file/' ~ offer.namePdf %}
<a class="btn btn-download text-danger" href=""
download="{{ offer.titre }}.pdf">
<abbr title="Télécharger l'offre en PDF"><h1><i class="bi bi-file-earmark-pdf-fill"></i>
</h1></abbr>
</a>
</div>
</div>
</div>
</div>
</section>
<hr class="my-4">
<!--- Presentation structure -->
<section class="about bg-white" id="about">
<div class="container-lg py-4">
<div class="row">
<div class="col-md-6">
<div class="section-title">
<h2 class="fw-bold mb-5">Poste proposé</h2>
</div>
</div>
{% if offer.categorieContrat == 'Emploi' or offer.categorieContrat == 'Stage' %}
<div class="col-md-6">
<div class="section-title">
<h2 class="fw-bold mb-5">Profil recherché</h2>
</div>
</div>
{% endif %}
</div>
<div class="row">
<div class="col-md-6">
{% if offer.categorieContrat == 'Emploi' %}
<div class="about-text">
<h3 class="fs-5">Intitulé du poste</h3>
<p class="text-muted">{{ offer.intitulePoste }}</p>
</div>
{% endif %}
<div class="about-text">
{% if offer.categorieContrat == 'Emploi' %}
<h3 class="fs-5">Description du poste</h3>
{% elseif offer.categorieContrat == 'Stage' %}
<h3 class="fs-5">Description du stage</h3>
{% else %}
<h3 class="fs-5">Objectif de l'offre</h3>
{% endif %}
<p class="text-muted">{{ offer.descriptionPoste }}</p>
</div>
<div class="about-text">
<h3 class="fs-5">Missions</h3>
<p class="text-muted">{{ offer.missions }}</p>
</div>
</div>
{% if offer.categorieContrat == 'Emploi' %}
<div class="col-md-6">
<div class="about-text">
<div class="row">
<div class="col-md-6">
<h3 class="fs-5">Formation (Diplômes)</h3>
<p class="text-muted">{{ offer.formation }}</p>
</div>
<div class="col-md-6">
<h3 class="fs-5">Expérience</h3>
<p class="text-muted">{{ offer.experience }}</p>
</div>
</div>
</div>
<div class="about-text">
<div class="row">
<div class="col-md-6">
<h3 class="fs-5">Compétences</h3>
<p class="text-muted">{{ offer.competences }}</p>
</div>
<div class="col-md-6">
<h3 class="fs-5">Qualités</h3>
<p class="text-muted">{{ offer.qualites }}</p>
</div>
</div>
</div>
<div class="about-text">
<h3 class="fs-5">Outils à maitriser</h3>
<p class="text-muted">{{ offer.outils }}</p>
</div>
</div>
{% elseif offer.categorieContrat == 'Stage' %}
<div class="col-md-6">
<div class="about-text">
<h3 class="fs-5">Formation (Diplômes)</h3>
<p class="text-muted">{{ offer.formation }}</p>
</div>
</div>
{% endif %}
</div>
</div>
</section>
<hr class="my-4">
<!--- Détails du contrat --->
<section class="about bg-white" id="about">
<div class="container-lg py-4">
<div class="row">
<div class="col-md-6">
<div class="section-title">
{% if offer.categorieContrat == 'Emploi' %}
<h2 class="fw-bold mb-5">Details du contrat</h2>
{% elseif offer.categorieContrat == 'Stage' %}
<h2 class="fw-bold mb-5">Details du stage</h2>
{% else %}
<h2 class="fw-bold mb-5">Details de l'offre</h2>
{% endif %}
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
{% if offer.categorieContrat == 'Emploi' %}
<div class="about-text">
<h3 class="fs-5">Type de contrat</h3>
<p class="text-muted">{{ offer.typeContrat }}</p>
</div>
{% endif %}
<div class="about-text">
<h3 class="fs-5">Temps de travail hebdomadaire</h3>
<p class="text-muted">{{ offer.tempsTravail }}</p>
</div>
<div class="about-text">
<h3 class="fs-5">Date de début de contrat</h3>
<p class="text-muted">{{ offer.dateDebutContrat|date("d/m/Y") }}</p>
</div>
{% if offer.categorieContrat == 'Stage' %}
<div class="about-text">
<h3 class="fs-5">Date de fin de contrat</h3>
<p class="text-muted">{{ offer.dateFinContrat|date("d/m/Y") }}</p>
</div>
{% elseif offer.categorieContrat == 'Service civique' %}
<div class="about-text">
<h3 class="fs-5">Durée du contrat</h3>
<p class="text-muted">{{ offer.duree }}</p>
</div>
{% endif %}
</div>
<div class="col-md-6">
<div class="about-text">
<h3 class="fs-5">Date de publication</h3>
<p class="text-muted">{{ offer.datePublication|date("d/m/Y") }}</p>
</div>
<div class="about-text">
<h3 class="fs-5">Date limite de candidature</h3>
<p class="text-muted">{{ offer.dateArchivage|date("d/m/Y") }}</p>
</div>
{% if offer.categorieContrat == 'Emploi' %}
<div class="about-text">
<h3 class="fs-5">Convention collective</h3>
<p class="text-muted">{{ offer.conventionCollective }}</p>
</div>
<div class="about-text">
<h3 class="fs-5">Salaire brut</h3>
<p class="text-danger">{{ offer.salaire }}</p>
</div>
{% elseif offer.categorieContrat == 'Stage' %}
<div class="about-text">
<h3 class="fs-5">Salaire brut</h3>
<p class="text-danger">{{ offer.salaire }}</p>
</div>
<div class="about-text">
<h3 class="fs-5">Avantages</h3>
<p class="text-danger">{{ offer.avantages }}</p>
</div>
{% else %}
<div class="about-text">
<h3 class="fs-5">Nombre de volontaires souhaité</h3>
<p class="text-danger">{{ offer.nbVolontaire }}</p>
</div>
{% endif %}
</div>
<hr class="my-4">
</div>
</div>
</div>
</section>
<!--- Drag & drop --->
{% if is_granted('ROLE_CANDIDAT') %}
<div class="container">
{{ form_start(formCandidate) }}
<div class="accordion accordion-flush" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingOne">
<button class="accordion-button collapsed btn btn-danger" type="button"
data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false"
aria-controls="flush-collapseOne">
Cliquez pour postuler à cette offre
</button>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse"
aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Ci-dessous vous pouvez télécharger votre CV et votre lettre de
motivation pour cette offre<br>Vous avez la possibilité d'éditer un commentaire
</div>
<section class="about bg-white" id="about">
<div class="container-lg py-4">
<div class="row">
<div class="col-sm-6">
<h4>Envoyer votre CV</h4>
<div class="container">
<div class="row">
<div class="drop-zone">
<span class="drop-zone__prompt">Cliquez pour parcourir ou glissez votre document</span>
{{ form_row(formCandidate.cv, {'attr': {'class': 'drop-zone__input'}}) }}
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<h4>Envoyer votre lettre de motivation</h4>
<div class="container">
<div class="row">
<div class="drop-zone">
<span class="drop-zone__prompt">Cliquez pour parcourir ou glissez votre document</span>
{{ form_row(formCandidate.lettreMotivation, {'attr': {'class': 'drop-zone__input'}}) }}
</div>
</div>
</div>
</div>
<div class="mb-3">
<label for="commentaire" class="form-label">Commentaires</label>
{{ form_row(formCandidate.commentaire) }}
</div>
<div align="center">
{{ form_row(formCandidate.submit, { 'label': 'Envoyer' }) }}
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
{{ form_end(formCandidate) }}
{% elseif is_granted('ROLE_SUPER_ADMIN') or is_granted('ROLE_ADMIN_STRUCTURE') %}
{% else %}
<div align="center">
<a href="{{ path ('app_login') }}" class="btn btn-danger">Connecter vous pour pouvoir postuler à cette
offre</a>
</div>
{% endif %}
{# <script src="assets/bootstrap.bundle.min.js"></script>#}
<script>
document.querySelectorAll(".drop-zone__input").forEach((inputElement) => {
const dropZoneElement = inputElement.closest(".drop-zone");
dropZoneElement.addEventListener("click", (e) => {
inputElement.click();
});
inputElement.addEventListener("change", (e) => {
if (inputElement.files.length) {
updateThumbnail(dropZoneElement, inputElement.files[0]);
}
});
dropZoneElement.addEventListener("dragover", (e) => {
e.preventDefault();
dropZoneElement.classList.add("drop-zone--over");
});
["dragleave", "dragend"].forEach((type) => {
dropZoneElement.addEventListener(type, (e) => {
dropZoneElement.classList.remove("drop-zone--over");
});
});
dropZoneElement.addEventListener("drop", (e) => {
e.preventDefault();
if (e.dataTransfer.files.length) {
inputElement.files = e.dataTransfer.files;
updateThumbnail(dropZoneElement, e.dataTransfer.files[0]);
}
dropZoneElement.classList.remove("drop-zone--over");
});
});
/**
* Updates the thumbnail on a drop zone element.
*
* @param {HTMLElement} dropZoneElement
* @param {File} file
*/
function updateThumbnail(dropZoneElement, file) {
let thumbnailElement = dropZoneElement.querySelector(".drop-zone__thumb");
// First time - remove the prompt
if (dropZoneElement.querySelector(".drop-zone__prompt")) {
dropZoneElement.querySelector(".drop-zone__prompt").remove();
}
// First time - there is no thumbnail element, so lets create it
if (!thumbnailElement) {
thumbnailElement = document.createElement("div");
thumbnailElement.classList.add("drop-zone__thumb");
dropZoneElement.appendChild(thumbnailElement);
}
thumbnailElement.dataset.label = file.name;
// Show thumbnail for image files
if (file.type.startsWith("image/")) {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => {
thumbnailElement.style.backgroundImage = `url('${reader.result}')`;
};
} else {
thumbnailElement.style.backgroundImage = null;
}
}
</script>
{% endblock %}