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

{% block title %}Nouveau statut{% endblock %}

{% block body %}
<script>
    $(document).ready(function () {
        $(".page-title h1").text("Nouvelle compétence");
        $(".bandeau-img img").attr("src","https://edgarpetrus.fr/site-perso/web/app/uploads/2023/12/icon_ticket.png");
    })
</script>
<div class="container-page">
    <div class="app-form">
        <h1>Ajout d'une compétence</h1>
        <p></p>
        <div STYLE="background-color:#000000; height:6px; width:auto%;"></div>
        <br>
        {{ form_start(stackForm) }}

             <!-- Nom de la stack -->
            <div class="mb-3">
                <label for="stack_stackID" class="form-label">Code de la compétence</label>
                <input type="text" name="{{ field_name(stackForm.stackID) }}" class="form-control" id="stack_stackID" placeholder="Choisir un code pour la compétence">
            </div>

            <!-- Logo de la stack-->
            <div class="mb-3">
                <label for="formFile" class="form-label">Image associée à la compétence</label>
                <input class="form-control" type="file" name="{{ field_name(stackForm.stackLogo) }}" id="formFile">
            </div>

            <!-- Nom de la stack -->
            <div class="mb-3">
                <label for="stack_stackName" class="form-label">Nom de la compétence</label>
                <input type="text" name="{{ field_name(stackForm.stackName) }}" class="form-control" id="stack_stackName" placeholder="Saisir le nom de la compétence">
            </div>

            <!-- Description de la compétence -->
            <div class="mb-3">
                <label for="stack_stackDescription" class="form-label">Description de la compétence</label>
                <textarea id="stack_stackDescription" class="form-control" name="{{ field_name(stackForm.stackDescription) }}" placeholder="Décrire la compétence plus précisément." rows="7" cols="20"></textarea>
            </div>

            <!-- Couleur du texte -->
            <div class="mb-3">
                <label for="status_textcolor" class="form-label">Couleur à associer à la compétence</label>
                <input type="color" class="form-control form-control-color" id="status_textcolor" name="{{ field_name(stackForm.textColor) }}" value="#ffffff" title="Choisir une couleur pour le texte">
            </div>

            <!-- Couleur du statut -->
            <div class="mb-3">
                <label for="stack_backgroundColor" class="form-label">Couleur à associer au fond de la compétence</label>
                <input type="color" class="form-control form-control-color" id="stack_backgroundColor" name="{{ field_name(stackForm.backgroundColor) }}" value="#563d7c" title="Choisir une couleur pour le fond">
            </div>
            <br>
            <button type="submit" class="btn-glossy">Enregistrer</button>
            <button type="cancel" class="btn-glossy red" href="/status">Annuler</button>

            {{ form_rest(stackForm) }}
        {{ form_end(stackForm) }}
    </div> 
</div>  
{% endblock %}