[(#VAL{1}|cibloc_start)]

<script>
    var cibloc_bouton_align = 'left';
    
    function ci_input_radio_checked(name){   
        var group = document.getElementsByName(name);
        for ( var i = 0; i < group.length; i++) {
            if (group.item(i).checked) {
                return group.item(i).value;
            }
        }
    }
    
    function cibloc_change_align_bouton_select(pos) {
        cibloc_bouton_align = pos[pos.selectedIndex].value;
    }
    
    function cibloc_bouton() {
        var cibloc_bouton_titre = document.getElementById("bouton_titre").value;
        var cibloc_bouton_url = document.getElementById("bouton_url").value;
        var cibloc_bouton_couleur = ci_input_radio_checked("bouton_couleur");
        var ok = true;
        
        if (cibloc_bouton_couleur=='bouton_defaut'){
            cibloc_bouton_couleur='bouton';
        }
        if (cibloc_bouton_couleur=='bouton_defautvide'){
            cibloc_bouton_couleur='bouton_vide';
        }
        
        if (!document.getElementById("bouton_titre").validity.valid) {
            ok = false;
            event.preventDefault();
            alert("Titre obligatoire");
        } else if (!document.getElementById("bouton_url").validity.valid) {
            ok = false;
            event.preventDefault();
        }
        
        if (ok){
            cibloc_insere_bouton(cibloc_bouton_couleur,cibloc_bouton_titre,cibloc_bouton_url);
        }
        
        // important : ne pas propager
        return false;
    }
    
</script>

<div id="cibloc_popin_boutons" class="cibloc_popin-choisir formulaire_spip" style="box-shadow:none;margin-top:10px;">
    <div class="cibloc_modal_header">
    <h3 class='titrem'><:cibloc:choisir_bouton:></h3>
    <button class="cibloc_lien_explications" onclick="cibloc_toggle(this); return false;" aria-hidden="true" aria-expanded="false" aria-controls="cibloc_info" data-hide="<:cibloc:voir_explication:>" data-show="<:cibloc:masquer_explication:>">
    <:cibloc:voir_explication:>
    </button>
    <div id="cibloc_info" class="cibloc_info" style="display:none;"><:cibloc:info_bouton:><:cibloc:info_pied_bouton:></div>
    </div>
    
        
	<form onsubmit="return cibloc_bouton()"><div>
        <div class="editer-groupe">

            #SET{name,bouton_titre}
	    <div class="editer editer_[(#GET{name})]">
	    	<label for="#GET{name}"><:cibloc:bouton_titre:></label>
                <input type='text' class='text' name='#GET{name}' id='#GET{name}' value="" required />
	    </div>
                
            #SET{name,bouton_url}
	    <div class="editer editer_[(#GET{name})]">
	    	<label for="#GET{name}"><:cibloc:bouton_url:></label>
                <input type='text' class='text' name='#GET{name}' id='#GET{name}' value="" required />
	    </div>

            #SET{name,bouton_align}
	    <div class="editer editer_[(#GET{name})]">
                <label for="align"><:cibloc:alignement:></label>
                <select id="align" name="align" onchange="cibloc_change_align_bouton_select(this)">
                <option value="left" selected="selected">left</option>
                <option value="center">center</option>
                <option value="right">right</option>
                </select>
	    </div>

            <fieldset><legend><:cibloc:couleur:></legend>
            [(#VAL|cibloc_affichage_php_bouton)]
            </fieldset>
            
        </div>
        <p class='boutons'><span class='image_loading'>&nbsp;</span><input type='submit' class='submit' value='<:bouton_enregistrer:>' /></p>
        </div></form>
    
</div>