{% extends "base.html" %}

<!-- Additional styles and scripts -->
{% block head %}
    <link
        rel="stylesheet"
        href="{{url_for('static', filename='css/function.css')}}"
    />

    <script
        src="{{url_for('static', filename='js/inputList.js')}}"
        defer
    ></script>

    <script
        src="{{url_for('static', filename='js/playgroundTest.js')}}"
        defer
    ></script>    

{% endblock %}

<!-- Title -->
{% block title %}
    {{title}}
{% endblock %}

<!-- Nav -->
<!-- Add button to the nav bar -->
{% block nav %}
     <a href=".." data-sticker-fix="Back"></a>
{% endblock %}


<!-- Contents in the body -->
{% block content%}
    <p class="description">{{description}}</p>

    <!-- Input-process-output -->
    <div class="function-io">
        <div class="input">
            <h3>Input</h3>
                <ul>
                {% for (param, tp) in parameters %}
                    <li>{{param}} [{{tp}}]</li>
                {% endfor %}
                </ul>
        </div>
        <div class="process" data-sticker="{{title.capitalize()}}"></div>
        <div class="output">
            <h3>Output</h3>
                <ul>
                    <li>{{title}} [{{output}}]</li>
                </ul>
        </div>
    </div>
    <div class="endpoints">
        <h3>Enpoint</h3>
            <code> 
                https://hub.xpub.nl/soupboat/{{base_url}}/api/{{title}}/
                {% for (param, tp) in parameters %}
                {{ "?" if loop.first else "" }}
                {{param}}=&lt;{{param}}&gt;
                {{ "&" if not loop.last else "" }}
                {% endfor %}                
            </code>
        
<!--        
            No time for making a nice example generator / to import it from the notebooks now sorry !      
            
            <div class="example">Example</div>
            <code> 

                https://hub.xpub.nl/soupboat/si16-app/api/{{name}}/
                {% for (param, tp) in parameters %}
                    {{ "?" if loop.first else "" }}
                    {{param}}=&lt;{{param}}&gt;
                    {{ "&" if not loop.last else "" }}
                {% endfor %}    
            </code>
-->
        
    </div>
    <div class="playground">
        <div class="playground-input">
            <form
                action="https://hub.xpub.nl/soupboat/{{base_url}}/api/{{title}}/"
                id="playground"
                class="input"
                {% for (param, tp) in parameters %}
                      data-{{param}}="{{tp}}"
                {% endfor %}
            >
                <h3>Try it</h3>
                
                {% for (param, tp) in parameters %}
                    <label for="{{param}}">{{param.capitalize()}}</label>
                    <input name="{{param}}" type="text" placeholder="{{param}}" {% if tp == 'list' %} class="list-input" {% endif %} />
                {% endfor %}
                <button id="playgroundSubmit" type="button">Submit</button>
                <input type="submit" />
            </form>
				</div>
				<div class="playground-output">
					<div class="output" id="playgroundOutput"></div>
				</div>
			</div>
			<div class="notebook">
                {{documentation| markdown}}
			</div>
        </div>    
{% endblock %}