{% extends '@!NelmioApiDoc/SwaggerUi/index.html.twig' %}

{# Import your own stylesheet #}
{% block stylesheets %}
    {{ parent() }}
    {{encore_entry_link_tags('wsse_css')}}
{% endblock stylesheets %}
 
{% block header %}
    <a id="logo" href="#"><img src="{{ asset('images/logo_butagaz.png') }}" alt="logo butagaz"></a>
{% endblock header %}

{% block swagger_ui %}
    <div id="wsse_container">
        <div id="wsse_container_description">
            <p>
                Nos web services nécessitent une authentification via une paire clé/valeur à ajouter dans le header des requêtes. 
                Vous pouvez créer cette paire clé/valeur en remplissant le fomulaire d'authentification suivant, puis en cliquant sur le bouton "Generate WSSE".
            </p>
        </div>
        
        <div id="wsse_form_container">
            <form method="POST" id="login"> 
                <div class="picto">
                    <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="lock" class="svg-inline--fa fa-lock fa-w-14" role="img" 
                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
                        <path fill="currentColor" 
                                d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z">
                        </path>
                    </svg>
                </div>
                <div id="login-body">
                    <div class="wsse_form_field">
                        <label for="username">Username</label>
                        <input name="username" type="text" />
                    </div>
                    <div class="wsse_form_field">
                        <label for="password">Mot de passe</label>
                        <input name="password" type="text" />
                    </div>
                </div>
                <div id="login-footer">
                    <div class="wsse_form_field">
                        <button type="submit">Valider</button> 
                    </div> 
                </div>
            </form> 
        </div>

        <div id="wsse_generate_container">
            <div id="generate_wsse" class="ws">
                <div>WSSE généré :</div> 
                <span id="generate_wsse_message"></span>
            </div>
        </div>
    </div>
    {{ parent() }}
{% endblock swagger_ui %}
 
{% block swagger_initialization %}
    {{ encore_entry_script_tags('swagger_init') }}
{% endblock swagger_initialization %}

{% block javascripts %} 
    {{ parent() }}
    <script src="{{ asset('src/js/vendor/jquery/dist/jquery.min.js') }}"></script>
    <script src="{{ asset('src/js/vendor/q/q.js') }}"></script>
    <script src="{{ asset('src/js/vendor/cryptojslib/rollups/sha1.js') }}"></script>
    <script src="{{ asset('src/js/vendor/cryptojslib/rollups/sha512.js') }}"></script>
    <script src="{{ asset('src/js/vendor/cryptojslib/components/enc-base64-min.js') }}"></script>
    <script src="{{ asset('src/js/prettyjson.js') }}"></script>
    {{ encore_entry_script_tags('wsse_generate') }}
{% endblock javascripts %}