<!DOCTYPE html>
<html>
  <head>
      <title>Scrapple Online</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="/static/css/bootstrap.min.css">
      <script src="/static/js/jquery-1.11.2.min.js"></script>
      <script src="/static/js/bootstrap.min.js"></script>
      

      <style>
        .level-0{
          margin: 0px 0px 0px 10px;
        }
        .level-1{
          margin: 0px 0px 0px 30px;
        }
        .level-2{
          margin: 0px 0px 0px 60px;
        }
        .level-3{
          margin: 0px 0px 0px 90px;
        }
      </style>
    </head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <a class="navbar-brand" href="#">Scrapple</a>
    <div class="btn-group" role="group" aria-label="...">
<!--    <button type="button" class="btn btn-default navbar-btn" onclick="writeformScraper();">Scraper</button> -->
    </div>
  </div>
</nav>
    
 
    
<br><br><br> 


      <div id="selform" style="display: block;" class="panel panel-default">
        <div class="panel-heading" id="head-title">
            <h3 class="panel-title">Scraper</h3>
        </div>
        <div id="newform" class="panel-body">

            <form action="{{ url_for("home") }}" method="post" role="form" class="navbar-form navbar-left">
                <div class="level-0">
                    <strong>{<br>
                    <div class="level-1">
                        Project_name: </strong><input type="text" name="project_name"><br><br><strong>
                        Selector_type: </strong><input type="text" name="selector_type"><br><br><strong>
                        scraping: {
                        <div id="data-field" class="level-2"><br>
                            url:</strong><input type="text" name="url"><br><br><strong>
                            data: [
                            <div id="input_fields_wraps">{
                                <div class="level-3">
                                    field:</strong></strong><input type="text" name="field_1"><br><br><strong>
                                    selector:</strong><input type="text" name="selector_1"><br><br><strong>
                                    attribute:</strong><input type="text" name="attribute_1"><br><br><strong>
                                    default:</strong><input type="text" name="default_1"><br>
                                </div>
                                <br><strong>}</strong><br>
                            </div>
                            <button type="button" name="add_Data_Btn" class="btn btn-default" onclick="addData();">Add Data</button>
                            <br><strong>]<br>
                        </div>
                        <br>}
                    </div>
                    <br>}
                </div>
                <br></strong><br><button type="submit" class="btn btn-default">Submit</button>
            </form>
   
        </div>
      </div>
<br><br>
    
    
<script type="text/javascript">

var j=2;
    
function addData(){
    var fld="field_"+j.toString();
    var slr="selector_"+j.toString();
    var atr="attribute_"+j.toString();
    var daa=document.createElement("div");
    daa.innerHTML=
    '<strong>field: </strong><input type="text" name="field_"><br><br><strong>selector: </strong><input type="text" name="selector_"><br><br><strong>attribute:</strong> <input type="text" name="attribute_"><br><br><strong>default: </strong><input type="text" name="default_"><br>';
    var daa0=document.createElement("div");
    daa.className='level-3';
    daa0.innerHTML='<strong>,<br>{</strong><br>';
    var daa2=document.createElement("div");
    daa2.innerHTML='<br><strong>}</strong><br>';
    document.getElementById('input_fields_wraps').appendChild(daa0);
    document.getElementById('input_fields_wraps').appendChild(daa);
    document.getElementById('input_fields_wraps').appendChild(daa2);
    
    var x = document.getElementsByName("field_");
    x[0].name+=j.toString();
    x = document.getElementsByName("selector_");
    x[0].name+=j.toString();
    x = document.getElementsByName("attribute_");
    x[0].name+=j.toString();
    x = document.getElementsByName("default_");
    x[0].name+=j.toString();
    j++;
    }
    
</script>

  </body>
</html>
