<!DOCTYPE html>
<html lang="en">
    <head>
        <% include ../partials/head %>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.20.0/min/vs/loader.min.js"></script>
        <script src="/static/monaco.js"></script>
    </head>
    <body>
        <% include ../partials/nav %>
        <% if (firstWebSite) { %>
            <% include ./firstWebSiteModal %>
        <% } %>
        <div class="container">
            <div class="jumbotron">
                <h1 class="display-4">AIFEX </h1>
                <p class="lead">Improve the quality, efficiency and diversity of your exploratory test sessions</p>
                <hr class="my-4"></hr>
                <h2>Create a new WebSite <a href="/documentation-website" target="_blank"><i class="fas fa-question-circle"></i></a></h2>
                <% if (errorMessage) { %>
                    <div class="alert alert-danger" role="alert">
                        Error : <%= errorMessage %>
                    </div>
                <% } %>
                <form onsubmit="return validation(event)" action="/dashboard/website/create" method="post" encType="multipart/form-data" id="form-container">
                    <div class="form-group row">
                        <label for="name" class="col-sm-2 col-form-label">Name</label>
                        <div class="col-sm-10">
                            <% if (webSite) { %>
                                <input type="text" class="form-control" name="name" id="name" value="<%=webSite.name %>" required>
                            <%} else { %>
                                <input type="text" class="form-control" name="name" id="name" value="Google_Sample" required>
                            <% } %>
                            
                        </div>
                    </div>
                
                    <div class="form-group row">
                        <label for="mappingList" class="col-sm-2 col-form-label">mappingList</label>
                        <div class="col-sm-10" style="resize: vertical;overflow: auto;height:400px;border:1px solid grey"
                            id="monaco" htmlFormId="form-container" formFieldName="mappingList" >
                            <div id="monaco-code" style="display: none;">
                                <% if (webSite) { %><%-webSite.mappingList%>
                                <%} else { %>
                               [
                                    {
                                        "match": {
                                            "selector": "#tsf > div:nth-child(2) > div.A8SBwf > div.RNNXgb > div > div.a4bIc > input",
                                            "event": "change"
                                        },
                                        "output": {
                                            "prefix": "Search",
                                            "suffix": "value"
                                        }
                                    },
                                    {
                                        "match": {
                                            "selector": "#rso > div > div > div.r",
                                            "event": "click"
                                        },
                                        "output": {
                                            "prefix": "Open",
                                            "suffix": "index"
                                        }
                                    }
                                ]
                                <% } %>
                            </div>
                        </div>
                    </div>
                    <button type="submit" class="btn btn-primary">Create</button>
                </form>
            </div>
        </div>
        <% if (firstWebSite) { %>
            <script>
                $(document).ready(function(){
                    $("#exampleModal").modal('show');
                });
            </script>
        <% } %>
    </body>

    
</html>