{% extends 'FrontofficeFr/base.html.twig' %}
{% block activeCell %}main-menu-active{% endblock %}
{% block titre %}Commissions et Publications{% endblock %}
{% block body %}
<style>


li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

li a.active1 {
  background-color: #04AA6D;
  color: white;
}

li a:hover:not(.active) {
  background-color: #555;
  color: white;
}

.yellowLine{
    height: 5px;
    background: gold;
    width: 60%;
    margin: 0% 20% 0% 20%;
    border-radius: 30px;
            
}
</style>

    <link rel="stylesheet" href="{{ asset("/assets/Backoffice/css/animate.min.css") }}" type="text/css" />
    <div class="actualites_title">
        <br/>
        <div class="text-center">
            <img src="{{ asset("/assets/Backoffice/images/logo-fcpm.png") }}" />
            <h3 class="title-page" style="color:white;">Commissions</h3>
        </div>
    </div>
    <div class="row block_ac">
        
            <div class="col-md-12 contact" style='text-align:center;'>
                <ul style='list-style-type: none;margin: 0;padding: 0;background-color: #f1f1f1;overflow: auto;display: flex;justify-content: space-between;'>
                    <li><a href="/fr/cellules/">Commissions</a></li>
                    <li><a href="/fr/cellule_membre/">Ma commission</a></li>
                    <li><a href="/fr/mes_publications/">Mes publications</a></li>
                    <li><a href="/fr/add_pub/" class="active1">Nouvelle publication</a></li>
                    <li><a href="/fr/profil/">Mes informations</a></li>
                    <li><a href="/fr/deconnectMembre/">Deconnexion</a></li>
                </ul>
            </div>

        <div class="col-md-12 contact" style='width:100%'>

         <div class="text-center" style='margin-top:5%'>
            <div class='yellowLine'></div>
            <h5 class="titlee-page">Nouvelle publication</h5>
         </div>
            <form method="post" class="php-email-form"  enctype="multipart/form-data">

                {% if response != "" %}
                    {% if response == "OK" %}
                        <br/>
                        <div class="alert alert-success">
                            <button type="button" class="close" data-dismiss="alert">&times;</button>
                            <i class="fa fa-ban-circle"></i><strong>OK !</strong> Publication ajoutée
                        </div>
                    {% else %}
                        <br/>
                        <div class="alert alert-danger">
                            <button type="button" class="close" data-dismiss="alert">&times;</button>
                            <i class="fa fa-ban-circle"></i><strong>Erreur !</strong> {{ response }}
                        </div>
                    {% endif %}
                {% endif %}
                <div class="form-group">
                    <label>Titre :</label>
                    <input type="text" name="titre" class="form-control" />
                </div>
                <div class="form-group">
                    <label>Text :</label>
                    <textarea name="text" class="form-control p-input ckeditor" id="text" aria-describedby="" placeholder="" rows="10"></textarea>
                </div>
                <div class="js">
                    <input style='margin-top:2%;margin-bottom:2%' type="file" name="file[]" id="file-7" class="custom-file-input" data-multiple-caption="{count} Fichier(s) selectionné(s)" multiple />
                    
                    <!--<label for="file-7" style='border:1px solid black'><span></span> <strong>Ajouter des fichier&hellip;</strong></label>-->
                </div>
                <div class="text-center">
                    <button type="submit" class="btn btn-success">Ajouter</button>
                </div>

            </form>


          

        </div>
    </div>
{% endblock %}
{% block js %}

    <script type="text/javascript" src="{{  asset('bundles/Backoffice/js/noty/packaged/jquery.noty.packaged.min.js') }}"></script>

    <script type="text/javascript" src="{{ asset("/assets/Backoffice/js/tinymce/tinymce.min.js") }}"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            tinyMCE.init({
                mode : "textareas",
                editor_selector : "tinymce-enabled-message",
                selector:'ckeditor'
            });


            tinymce.EditorManager.execCommand('mceAddEditor', false, "text");


        });

        var inputs = document.querySelectorAll( '.inputfile' );
        Array.prototype.forEach.call( inputs, function( input )
        {
            var label	 = input.nextElementSibling,
                    labelVal = label.innerHTML;

            input.addEventListener( 'change', function( e )
            {
                var fileName = '';
                if( this.files && this.files.length > 1 )
                    fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length );
                else
                    fileName = e.target.value.split( '\\' ).pop();

                if( fileName )
                    label.querySelector( 'span' ).innerHTML = fileName;
                else
                    label.innerHTML = labelVal;
            });

            // Firefox bug fix
            input.addEventListener( 'focus', function(){ input.classList.add( 'has-focus' ); });
            input.addEventListener( 'blur', function(){ input.classList.remove( 'has-focus' ); });
        });


    </script>

{% endblock %}