<!DOCTYPE html>
<html>
<head>
  <style>
    .movable{
  position: absolute;
  z-index: 9;
  background-color: #f1f1f1;
  text-align: center;
  border: 1px solid #3f3e3e;
    };

    .Movable1{
      width:min-content;
      height: min-content;
  position: absolute;
  z-index: 9;
  background-color: #998f8f;
  text-align: center;
  border: 1px solid #d3d3d3;
    };
    .mover{
      cursor: move;
  z-index: 10;
    };
  </style>
    <meta charset='utf-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Title</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

</head>
<body id="move0" style="background-repeat:no-repeat;background-position: 50% 1%;" onload="onLoad('{{ theme }}')">
    <nav class="navbar navbar-expand-lg navbar-light bg-light" id="navBar">
        <div class="container-fluid">
          <a class="navbar-brand" href="#">Tool Bar-></a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                  <p id="filename">Untitled</p>
                </a>
                <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                  <li><a class="dropdown-item" href="#"><input type="text" id="fileNameChange"><button onclick="obj.AjaxGetSave('rename');">Rename</button></a></li>
                </ul>
              </li>
              <li class="nav-item">
                <a class="nav-link active" aria-current="page">
                  <input id="file0" type="file" />
                  <button onclick="obj.changeImg('#move0');">Change Background</button>
              </form>
              </a>
              </li>
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                  Add
                </a>
                <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                  <li><a class="dropdown-item" href="#" onclick="obj.adder('#context','img');">Image</a></li>
                  <li><a class="dropdown-item" href="#" onclick="obj.adder('#context','txt');">Text Input</a></li>
                  <li><a class="dropdown-item" href="#" onclick="obj.adder('#context','sec');">Section</a></li>
                  <li><a class="dropdown-item" href="#" onclick="obj.adder('#context','opt');">Select</a></li>
                  <li><a class="dropdown-item" href="#" onclick="obj.adder('#context','grpRadio');">Radio Group</a></li>
                  <li><a class="dropdown-item" href="#" onclick="obj.adder('#context','tickbox');">tickbox</a></li> 
                  <li><a class="dropdown-item" href="#" onclick="obj.adder('#context','textarea');">textarea</a></li>                  
                  <li><hr class="dropdown-divider"></li>
                  <li><a class="dropdown-item" href="#" onclick="console.log($('#context').html());">Get Content</a></li>

                </ul>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#" tabindex="-1" onclick="obj.preview();">Preview</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" onclick="obj.AjaxGetSave('save');">Save</a>
              </li>
            <li class="nav-item">
            <select id="open">
              <option default>---None---</option>
            {% for saved in files %}
            <option value="{{ saved.id }}">
              {{ saved.Name }}
            </option>
            {% endfor %}
          </select>
          <button onclick="obj.AjaxGetSave('open');">Open</button>
          <button onclick="obj.delete_form();">Delete</button></li></ul>
            <div>
              <input type="text" id="customform" placeholder="Embedded form link" width="50px">
              <button onclick="obj.Custom_Insert();">Embed</button>
            </div>
          </div>
        </div>
      </nav>
      <center>
    <div id="context">
      
    </div></center>
    <input type="hidden" id="id" value="-1">


    <script>
      function onLoad(mode){
        let x = document.getElementById("navBar");
        if(mode=="light")
        {
          x.setAttribute("class","navbar navbar-expand-lg navbar-light bg-light");
          document.body.style.backgroundColor = "white";
        }
        else{
          x.setAttribute("class","navbar navbar-expand-lg navbar-dark bg-dark");
          document.body.style.backgroundColor = "grey";
        }
      }
        class form_creator
        {
            constructor()
            {
                this.images = 0;
                this.inputs = 1;
                this.sections=0;
                this.divs = 0;
                this.radios=0;
                this.textinput=["<div class='movable' id='input","'><label id='move","'>","</label>:<input type='text' name='input","'><span  class='delItems'><button onclick=obj.delete('#input","')>delete</button></span></div>"];


               // console.log(this.image.length);
                this.section = ["<div  class='movable' style='border-style: dotted;' id='input","'><label id='move","'>","</label><div class='delItems'><button onclick=obj.delete('#input","');>delete</button><select id='select","'><option value='txt'>text</option><option value='img'>image</option><option value='sec'>section</option><option value='opt'>select</option><option value='tickbox'>Tickbox</option></select><button onclick=obj.adder('#input","','slt');>Add</button></div></div>"];
                
            }
            adder(idname,typ)
            { if(typ=="slt")
              {

                typ = $('#select'+idname[6]+' option:selected').val();
                console.log(typ);
              }
                switch(typ)
                {
                    case 'img':
                   var imgDiv = document.createElement("div");
                   
                   imgDiv.setAttribute("id","input"+this.inputs);
                   var img = document.createElement("img");
                   imgDiv.append(img);
                   img.setAttribute("id", "move"+this.inputs);
                   img.setAttribute("class","mover");
                   img.setAttribute("name","input"+this.inputs);
                   img.setAttribute("src","https://upload.wikimedia.org/wikipedia/commons/thumb/4/40/Sunflower_sky_backdrop.jpg/220px-Sunflower_sky_backdrop.jpg");
                   var Options = document.createElement("span");
                   imgDiv.append(Options);
                   Options.setAttribute("class","dropdown");
                   var button = document.createElement("button");
                   button.setAttribute("class","btn btn-secondary dropdown-toggle");
                   button.setAttribute("id","dropdownMenuButton");
                   button.setAttribute("data-toggle",'dropdown'); 
                   button.setAttribute("aria-haspopup",'true'); 
                   button.setAttribute("aria-expanded",'false');
                   Options.append(button);
                   var interOptions = document.createElement("div");
                   Options.append(interOptions);
                   interOptions.setAttribute("class","dropdown-menu");
                   interOptions.setAttribute("aria-labelledby",'dropdownMenuButton');
                   var opt0 = document.createElement("a");
                   interOptions.append(opt0);
                   opt0.setAttribute("class","dropdown-item");
                   opt0.setAttribute("onclick","obj.delete('#input"+this.inputs+"');");
                   opt0.innerHTML= "Delete";
                  var opt1 = document.createElement("Label");
                  interOptions.append(opt1);
                  opt1.innerHTML="Height:";
                  var opt2 = document.createElement("input");
            
                  interOptions.append(opt2);
                  opt2.setAttribute("id","height"+this.inputs);
                  var opt3 = document.createElement("Label");
                  interOptions.append(document.createElement('br'));
                  interOptions.append(opt3);
                  opt3.innerHTML="Width:";
                  var opt4 = document.createElement("input");
          
                  interOptions.append(opt4);
                  opt4.setAttribute("id","width"+this.inputs);
                  var opt5 = document.createElement("button");
                  interOptions.append(opt5);
                  opt5.setAttribute("onclick","obj.change('input"+this.inputs+"');");
                  opt5.innerHTML = "Change";
                  var ct = document.createElement("input");
                  ct.setAttribute("type","hidden");
                  ct.setAttribute("name", "csrfmiddlewaretoken");
                  ct.setAttribute("value","{{ csrf_token }}");
                  interOptions.append(ct);
                  var file = document.createElement("input");
                  interOptions.append(file);
                  file.setAttribute("type","file");
                  file.setAttribute("id", "file"+this.inputs);
                  file.setAttribute("name", "file");
                  var send = document.createElement("input");
                  send.setAttribute("type","button");
                  interOptions.append(send);
                  //send.setAttribute("class","dropdown-item");
                  send.setAttribute("class","button");
                  send.setAttribute("value","upload");
                  send.innerHTML="Upload";
                  send.setAttribute("onclick", "obj.changeImg('#move"+this.inputs+"');");
                  imgDiv.setAttribute("class","movable");
                  var add =imgDiv;
                  break;
                    case 'txt':
                    var ans=prompt("ENter Label then continue","");
                    if (ans != null && ans !=""){
                    var add = this.textinput[0]+this.inputs+this.textinput[1]+this.inputs+this.textinput[2]+ans+this.textinput[3]+this.inputs+this.textinput[4]+this.inputs+this.textinput[5];
                  }
                    break;
                    case 'sec':
                    var ans=prompt("ENter Title for section then continue","");
                    if (ans != null && ans !=""){
                    var add = this.section[0]+this.inputs+this.section[1]+this.inputs+this.section[2]+ans+this.section[3]+this.inputs+this.section[4]+this.inputs+this.section[5]+this.inputs+this.section[6];
                    }
                    break;
                    case 'opt':
                    var add = document.createElement("div");
                    add.setAttribute('class','movable');
                    add.setAttribute("id","input"+this.inputs);
                    var sel =  document.createElement("select");
                    sel.setAttribute("name","input"+this.inputs);
                    sel.setAttribute("id","select"+this.inputs);
                    add.append(sel);
                   
                    var options = document.createElement("span");
                    add.append(options);
                      options.setAttribute("class","dropdown");
                      var toggleB = document.createElement("button");
                      options.append(toggleB);
                      toggleB.setAttribute( 'class','btn btn-secondary dropdown-toggle');
                      toggleB.setAttribute('id','dropdownMenuButton');
                      toggleB.setAttribute('data-toggle','dropdown'); 
                      toggleB.setAttribute('aria-haspopup','true'); 
                      toggleB.setAttribute('aria-expanded','false');
                      //toggleB.innerHTML="options";
                      options.append(toggleB);
                      var interOptions = document.createElement("div");
                      options.append(interOptions);
                      interOptions.setAttribute('class','dropdown-menu'); 
                      interOptions.setAttribute('aria-labelledby','dropdownMenuButton');
                    var enter = document.createElement("input");
                    enter.type="text";
                    enter.id = "option"+this.inputs;
                    interOptions.append(enter);
                    var button=document.createElement("button");
                    button.setAttribute("onclick","obj.add_option('select','input"+this.inputs+"');");
                    button.innerHTML ="add";
                    interOptions.append(button);
                    var dButton = document.createElement("button");
                    dButton.innerHTML="delete";
                    dButton.setAttribute("onclick", "obj.delete('#input"+this.inputs+"')");
                    interOptions.append(dButton);
                    var m = document.createElement("label");
                    m.setAttribute("id","move"+this.inputs); //https://stackoverflow.com/questions/18648500/add-id-class-to-objects-from-createelement-method
                    m.innerHTML="+";
                    add.append(m);
                    var option = document.createElement("option");
                    option.text = "Kiwi";
                    sel.add(option); 
                    break;

                    case "grpRadio":
                    var add = document.createElement("div");
                    var options = document.createElement("span");
                    add.append(options);
                      options.setAttribute("class","dropdown");
                      var toggleB = document.createElement("button");
                      options.append(toggleB);
                      toggleB.setAttribute( 'class','btn btn-secondary dropdown-toggle');
                      toggleB.setAttribute('id','dropdownMenuButton');
                      toggleB.setAttribute('data-toggle','dropdown'); 
                      toggleB.setAttribute('aria-haspopup','true'); 
                      toggleB.setAttribute('aria-expanded','false');
                      //toggleB.innerHTML="options";
                      options.append(toggleB);
                      var interOptions = document.createElement("span");
                      options.append(interOptions);
                      interOptions.setAttribute('class','dropdown-menu'); 
                      interOptions.setAttribute('aria-labelledby','dropdownMenuButton');
                    var enter = document.createElement("input");
                    enter.type="text";
                    enter.id = "option"+this.inputs;
                    interOptions.append(enter);
                    var button=document.createElement("button");
                    button.setAttribute("onclick","obj.add_option('radio','input"+this.inputs+"');");
                    button.innerHTML ="add";
                    interOptions.append(button);
                    var dButton = document.createElement("button");
                    dButton.innerHTML="delete";
                    dButton.setAttribute("onclick", "obj.delete('#input"+this.inputs+"')");
                    interOptions.append(dButton);
                    add.setAttribute("id","input"+this.inputs);
                    add.setAttribute("class","movable");
                    var input = document.createElement("input");
                    input.setAttribute("type", "text");
                    input.setAttribute("id","");
                    var mid = document.createElement("span");
                    mid.setAttribute("id","mid"+this.inputs);/////////////////////////////////////targetchange
                    
                    add.append(mid);
                    var m = document.createElement("label");
                    m.setAttribute("id","move"+this.inputs); //https://stackoverflow.com/questions/18648500/add-id-class-to-objects-from-createelement-method
                    m.innerHTML="+";
                    add.append(m);
                    break;

                    
                    case "tickbox":
                    var txt = prompt("Enter context of textArea","");
                      if (txt!=null && txt!=""){
                    var add = document.createElement("span");
                    var options = document.createElement("span");
                    add.append(options);
                      options.setAttribute("class","dropdown");
                      var toggleB = document.createElement("button");
                      options.append(toggleB);
                      toggleB.setAttribute( 'class','btn btn-secondary dropdown-toggle');
                      toggleB.setAttribute('id','dropdownMenuButton');
                      toggleB.setAttribute('data-toggle','dropdown'); 
                      toggleB.setAttribute('aria-haspopup','true'); 
                      toggleB.setAttribute('aria-expanded','false');
                      //toggleB.innerHTML="options";
                      options.append(toggleB);
                      var interOptions = document.createElement("span");
                      options.append(interOptions);
                      interOptions.setAttribute('class','dropdown-menu'); 
                      interOptions.setAttribute('aria-labelledby','dropdownMenuButton');
                    var enter = document.createElement("button");
                    enter.innerHTML="Delete";
                    enter.setAttribute("onclick","obj.delete('#input"+this.inputs+"')");

                    interOptions.append(enter);
                    add.setAttribute("id","input"+this.inputs);
                    add.setAttribute("class","movable");
                    
                    var mid = document.createElement("span");
                    mid.setAttribute("id","mid"+this.inputs);
                    var tick = document.createElement("input");
                    tick.setAttribute("type","checkbox");
                   //tick.setAttribute("class","form-check-input");
                    // tick.setAttribute("id", "exampleCheck1");
                   //  tick.setAttribute("align","left");
                   var tepm = document.createElement("span");
                    tick.setAttribute("name","input"+this.inputs);
                    var text= document.createElement("span");
                    tepm.append(text);
                    text.innerHTML=txt;
                    text.setAttribute("name","input"+this.inputs);
                    
                    text.setAttribute("rows","4");
                    mid.append(tick);
                        
                    add.append(mid);
                    add.append(tepm);
                    var m = document.createElement("label");
                    m.setAttribute("id","move"+this.inputs); //https://stackoverflow.com/questions/18648500/add-id-class-to-objects-from-createelement-method
                    m.innerHTML="+";
                    add.append(m);
                      }
                    break;

                    case "textarea":
                      
                      var txt = prompt("Enter context of textArea","");
                      if (txt!=null && txt!=""){
                        var add = document.createElement("div");
                        add.setAttribute("id","input"+this.inputs);
                        add.setAttribute("class","movable");
                        var txtara = document.createElement("span");
                        add.append(txtara);
                        txtara.textContent = txt;
                        var Options = document.createElement("span");
                   add.append(Options);
                   Options.setAttribute("class","dropdown");
                   var button = document.createElement("button");
                   button.setAttribute("class","btn btn-secondary dropdown-toggle");
                   button.setAttribute("id","dropdownMenuButton");
                   button.setAttribute("data-toggle",'dropdown'); 
                   button.setAttribute("aria-haspopup",'true'); 
                   button.setAttribute("aria-expanded",'false');
                   Options.append(button);
                   var interOptions = document.createElement("div");
                   Options.append(interOptions);
                   interOptions.setAttribute("class","dropdown-menu");
                   interOptions.setAttribute("aria-labelledby",'dropdownMenuButton');
                   var opt0 = document.createElement("a");
                   interOptions.append(opt0);
                   opt0.setAttribute("class","dropdown-item");
                   opt0.setAttribute("onclick","obj.delete('#input"+this.inputs+"');");
                   opt0.innerHTML= "Delete";

                      }

                    //<input type="radio" name = ".." value=".."> Label1 </br>
                }
                if(add!=null){
                $(idname).append(add);
              }
                dragElement(document.getElementById("input"+this.inputs));
                this.inputs++;
              }
            add_option(typ,idname)
            {
              switch(typ){
                case 'select':
                var add = document.getElementById("option"+idname[5]).value;
              var sel = document.getElementById("select"+idname[5]);
              var option = document.createElement("option");
                    option.text = add;
                    sel.add(option); 
                break;
                case 'radio':
                var add = document.getElementById("option"+idname[5]).value;
              var sel = document.getElementById("mid"+idname[5]);
              var option = document.createElement("input");
              option.setAttribute("type", "radio");
              option.setAttribute("name",idname);
              option.setAttribute("id","radio"+this.inputs);
              option.setAttribute("value","radio"+this.inputs++);
                    sel.append(option);
                    sel.append(add);
                break;
              }
              

             console.log(add,idname);       
              
            }
            delete(idname)
            {
                console.log(idname);
                $(idname).remove();
            }
            change(idname)
            {
              var h="height"+idname[5], w="width"+idname[5];
              console.log(h,w)
              var height=document.getElementById(h).value;
              var width=document.getElementById(w).value;
              $("#move"+idname[5]).height(height);
              $("#move"+idname[5]).width(width);

              console.log(idname,height,width);
            }
            alignMent(idname,align)
            {
      
             console.log(idname.slice(1),align);
              
             document.getElementById(idname.slice(1)).style.position=align;
            
            }
           
           
            preview(){
              this.AjaxGetSave("preview");
              var myWindow = window.open("/testing/","test");
            }
    changeImg(idname)
    {
    var fd = new FormData();
    console.log($('#file'+idname[5]),idname);
    var files = $('#file'+idname[5])[0].files;
    var token = $("[name=csrfmiddlewaretoken]").value;
    // Check file selected or not
    if(files.length > 0 ){
       fd.append('file',files[0]);
        fd.append("csrfmiddlewaretoken", "{{ csrf_token }}");   // < here 
            fd.append("state","inactive");
       $.ajax({
          url: "{% url 'upload' %}",
          type: 'post',
          data: fd,
          contentType: false,
          processData: false,
          success: function(response){
              console.log(response);
             if(response != 0){
               
                 //{% load static %}
                 if(idname!="#move0")
                 {
                $("#move"+idname[5]).attr("src","{% static 'images/' %}"+response); 
                $("#move"+idname[5]).show(); // Display image element
              }
              else{
                document.body.background ="{% static 'images/' %}"+response;
                
              }
             }else{
                alert('file not uploaded');
             }
          },
       });
    }
else{
       alert("Please select a file.");
    }
        } 


    delete_form(){
      console.log("Deleting", document.getElementById("id").value);
if(document.getElementById("id").value!='-1')
{
  this.AjaxGetSave("delete");
}
else{
  alert("File not saved yet");
}
    }
        //////save or load
AjaxGetSave(action){
var text =   document.getElementById('context').innerHTML;
var bg = document.body.background;
var filename =document.getElementById('filename').innerHTML;
var openfile = $('#open option:selected').val();
var renameName = document.getElementById("fileNameChange").value;
console.log(text,bg,filename,openfile,renameName)
$.ajax({
            type:'GET',
            url: "{% url 'Modify_form' %}",
            data: {
                'response': text,
                "action":action,
                'bg':bg,
                'filename':filename,
                'rename':renameName,
                'count':this.inputs,
                'open':openfile,
                'id':document.getElementById('id').value,
            },
            error: function(xhr, status, error) {
                                              
                                                    console.log("Confirmedddd");
                                                },
            success: function (dd){
              
              console.log(action, dd);
              if(action=="save")
              {
                
                if(dd["Status"]=="Saved")
                {
                  document.getElementById("id").setAttribute("value",dd["id"]);
              window.alert("Success :"+dd["Status"]+" id:"+dd["id"]);
              var option = document.createElement("option");
              option.id=dd["id"];
              option.value=dd["id"]
              option.innerHTML=filename;
              document.getElementById("open").add(option);
            }
            else if(dd["Status"]=="Present"){
              window.alert("Success : saving again");
            }
              }
              else if(action=='rename')
              {
                if(dd=="NPresent")
                {
                  alert("File not present");
                }
                
                document.getElementById("filename").innerHTML=renameName;
              }
              else if(action=="open")
              {
                if (dd["Status"]=="Fail"){
                  alert("No file present with such name");
                }
                else{
                var data = dd;
                console.log(data);
                document.getElementById("filename").innerHTML = data["filename"];
              if(data['background']!=" ")
              {
                //{% load static %}
                document.body.background=data['background'];
              }
              else{
                document.body.background ='None';
              }
                document.getElementById("context").innerHTML = data['context'];
                this.inputs = parseInt(data['inputs']);
                document.getElementById("id").value = data['id'];
                var i=1;
                for(i=1;i<=this.inputs+1;i++)
                {
                  try{
                  dragElement(document.getElementById("input"+i));
                }
                catch{
                  console.log("element not present");
                }

                }
              }
              }
              else if(action=="delete"){
                  if(dd["Status"]=="Success")
                  {
                    alert("Successfully deleted File");
                    let x =document.getElementById('open').options;
                    for(var i in x)
                    {
                      console.log(x[i].value);
                      if(x[i].value==document.getElementById("id").value)
                      {
                        x.remove(i);
                      }
                    }
                    document.getElementById("context").innerHTML="";
                    document.getElementById("id").setAttribute("value","-1");
                    document.getElementById("filename").innerHTML="Untitled";                  }
              }
              
            },
                                
                            });
}

Custom_Insert(){
  document.getElementById("context").innerHTML=document.getElementById("customform").value;
}
};

function dragElement(Element) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  console.log(Element.id);//console.log(add);
  if (document.getElementById('move'+Element.id[5])) {
    /* if present, the header is where you move the DIV from:*/
    document.getElementById('move'+Element.id[5]).onmousedown = dragMouseDown;
  } else {
    /* otherwise, move the DIV from anywhere inside the DIV:*/
    Element.onmousedown = dragMouseDown;
  }

  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    // get the mouse cursor position at startup:
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    // call a function whenever the cursor moves:
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    // calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    // set the element's new position:
    Element.style.top = (Element.offsetTop - pos2) + "px";
    Element.style.left = (Element.offsetLeft - pos1) + "px";
  }

  function closeDragElement() {
    /* stop moving when mouse button is released:*/
    document.onmouseup = null;
    document.onmousemove = null;
  }
  
}
        obj = new form_creator();
        

    </script>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

</html>