{% extends 'base.html.twig' %}

{% block title %}Nouveau client{% 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>
<script>
    $(document).ready(function () {
        $(".page-title h1").text("Fiche projet : {{ project.projectName }}");
        $(".bandeau-img img").attr("src","https://edgarpetrus.fr/site-perso/web/app/uploads/2023/12/icon_office.png");
        $(".bandeau-img a").attr("href","/projects");
    })

</script>
<div class="container-page">
    <nav id="navbar-example2" class="navbar bg-body-tertiary px-3 mb-3">
            <a class="navbar-brand" href="/">
                <img src="/uploads/projects/{{ project.projectLogo }}" height=48>
            </a>
            <ul class="nav nav-pills">
                <li class="nav-item">
                    <a class="nav-link" href="#projectBrief">Brief</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#projectDetails">Détails</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#projectComments">Remarques</a>
                </li>
            </ul>
        </nav>
    <div class="app-form">
        <div class="block-title">Détails du projet</div>
        <p></p>
        <div STYLE="background-color:#000000; height:6px; width:auto%;"></div>
        <br>
        <div style="height: 400px; overflow-y: scroll;" data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" class="scrollspy-example bg-body-tertiary p-3 rounded-2" tabindex="0">
            
            <h4 id="projectBrief">Brief projet</h4>
            <p>{{ project.projectBrief | raw }}</p>
            
            <h4 id="projectDetails">Details du projet</h4>
            <p>{{ project.projectDescription| raw }}</p>
            
            <h4 id="projectComments">Remarques</h4>
            <p>{{ project.projectComments| raw }}</p>
        </div>
    </div> 

</div>  
{% endblock %}