head
  meta(charset='UTF-8')
  title GraphQL API 
body
  div
    h1 GraphQL API 
    
    
    table(style="width:100%; display:fixed")
        tr 
            th Graphql Playground 
            th FisApp Request
            th FisApp Response(s)
        tr 
            td(style="border:solid 1px lightblue",valign="top")
                form(method='POST' action=jadeargument['action'])
                    table
                        tr 
                            td 
                                b Step 1 : Create your query 
                        tr 
                            td 
                                b(style="font-weight:normal")
                                    |( or Load default query  

                                select(name="defaultQuery" onchange="this.form.submit()")
                                    each item in jadeargument['defaultQuery']
                                        if(item.queryName === jadeargument['defaultQueryValue'])
                                            option(value = item.queryName selected) #{item.queryName}
                                        else 
                                            option(value = item.queryName) #{item.queryName}  

                                b(style="font-weight:normal")  
                                    |)
                        tr 
                            td 
                                iframe(style="resize:both", width='700', height='750', src=jadeargument['graphql_url'], frameborder='0')

                              
            td(style="width:40%;background-color:lightblue;padding", valign="top")
                form(method='POST' action=jadeargument['action'])
                    table
                        tr 
                            td  
                                b Step 2 : Copy Paste your query as Query Payload
                                p
                                u Query Header
                        tr 
                            td 
                                textarea(name="header", cols="60", rows="32",style="width:100%")=jadeargument['header']
                        tr 
                            td 
                                u Query Payload 
                        tr 
                            td 
                                textarea(name="payload", cols="60", rows="10",style="width:100%")=jadeargument['payload']
                                input(type='submit' name='Submit' value='Click Here to Test FisApp Query >')
            
            td(style="width:100%;background-color:lightblue;padding:5px", valign="top") 
                b Step 3 : Check the Response(s) here
                p
                u Query Response(s)
                textarea(name="response", cols="60", rows="45",style="width:100%" , wrap="off")=jadeargument['response']
                p
                b When you have the desired query, you can proceed to POST it to http://swopt.com:3011/request to get the response(s).
                br
                span (Refer to http://swopt.com:3000/stephenwong/microservice-cqrs-server 's Method 2 for more information.)
        tr 
            td(style="width:100%;padding:5px", colspan="3")=jadeargument['message']