packages editable

8 files changed, 238 insertions, 124 deletions

diff --git a/module/web/templates/default/base.html b/module/web/templates/default/base.html
index 2ed21d1fc..7e0f0e2b4 100644
--- a/module/web/templates/default/base.html
+++ b/module/web/templates/default/base.html
@@ -22,7 +22,12 @@ document.addEvent("domready", function(){
 

 	add_bg = new Fx.Tween($('add_bg'));

 	add_box = new Fx.Tween($('add_box'));

-        cap_box = new Fx.Tween($('cap_box'))

+    cap_box = new Fx.Tween($('cap_box'));

+

+    add_bg.set("opacity", 0);

+    add_box.set("opacity", 0);

+    cap_box.set("opacity", 0);

+

 	

 	$('add_form').onsubmit=function() {

             $('add_form').target = 'upload_target';

@@ -32,7 +37,7 @@ document.addEvent("domready", function(){
             }else{

 		out();

             }

-	}

+	};

 

 	$('add_reset').addEvent('click', function(){

 		out();

@@ -46,7 +51,7 @@ document.addEvent("domready", function(){
 		initialDelay: 0,

 		delay: 4000,

 		limit: 30000

-	})

+	});

 	

 	$('action_play').addEvent('click', function(){

 		new Request({method: 'get', url: '/json/unpause'}).send();	

@@ -58,135 +63,132 @@ document.addEvent("domready", function(){
 	});

 	

 	

-	$('action_stop').addEvent('click', function(){

-		new Request({method: 'get', url: '/json/pause'}).send();	

-	});

+    $('action_stop').addEvent('click', function(){

+        new Request({method: 'get', url: '/json/pause'}).send();

+    });

 

-        $('cap_info').addEvent('click', function(){

-                load_cap("get", "");

-                show_cap();

-        });

+    $('cap_info').addEvent('click', function(){

+        load_cap("get", "");

+        show_cap();

+    });

 

-        $('cap_reset').addEvent('click', function(){

-            hide_cap()

-        });

+    $('cap_reset').addEvent('click', function(){

+        hide_cap()

+    });

 

-        $('cap_form').addEvent('submit', function(e){

-            submit_cap();

-            e.stop()

-        });

+    $('cap_form').addEvent('submit', function(e){

+        submit_cap();

+        e.stop()

+    });

+

+    jsonStatus.startTimer();

 

-	jsonStatus.startTimer();

-	

 });

 

 function LoadJsonToContent(data)

 {

-	$("speed").set('text', Math.round(data.speed*100)/100);

-	$("aktiv").set('text', data.activ);

-	$("aktiv_from").set('text', data.queue);

-

-        if (data.captcha){

-            $("cap_info").setStyle('display', 'inline');

-        }else{

-            $("cap_info").setStyle('display', 'none');

-        }

+    $("speed").set('text', Math.round(data.speed*100)/100);

+    $("aktiv").set('text', data.activ);

+    $("aktiv_from").set('text', data.queue);

+

+    if (data.captcha){

+        $("cap_info").setStyle('display', 'inline');

+    }else{

+        $("cap_info").setStyle('display', 'none');

+    }

         

-        if (data.download) {

-            $("time").set('text', " {% trans "on" %}");

-            $("time").setStyle('background-color', "#8ffc25");

-

-        }else{

-            $("time").set('text', " {% trans "off" %}");

-            $("time").setStyle('background-color', "#fc6e26");

-        }

-

-        if (data.reconnect){

-            $("reconnect").set('text', " {% trans "on" %}");

-            $("reconnect").setStyle('background-color', "#8ffc25");

-        }

-        else{

-            $("reconnect").set('text', " {% trans "off" %}");

-            $("reconnect").setStyle('background-color', "#fc6e26");

-        }

+    if (data.download) {

+        $("time").set('text', " {% trans "on" %}");

+        $("time").setStyle('background-color', "#8ffc25");

+

+    }else{

+        $("time").set('text', " {% trans "off" %}");

+        $("time").setStyle('background-color', "#fc6e26");

+    }

+

+    if (data.reconnect){

+        $("reconnect").set('text', " {% trans "on" %}");

+        $("reconnect").setStyle('background-color', "#8ffc25");

+    }

+    else{

+        $("reconnect").set('text', " {% trans "off" %}");

+        $("reconnect").setStyle('background-color', "#fc6e26");

+    }

 }

 function bg_show(){

-    	add_bg.set('opacity', 0);

-	$("add_bg").setStyle('display', 'block');

-	add_bg.start('opacity',0.8);

+    $("add_bg").setStyle('display', 'block');

+    add_bg.start('opacity',0.8);

 }

 

 function bg_hide(){

-        add_bg.start('opacity',0).chain(function(){

-		$('add_bg').setStyle('display', 'none');

-	});

+    add_bg.start('opacity',0).chain(function(){

+        $('add_bg').setStyle('display', 'none');

+    });

 }

 

 function show(){

-        bg_show()

-	add_box.set('opacity', 0)

-	$("add_box").setStyle('display', 'block');

-	add_box.start('opacity',1)

+    bg_show();

+    $("add_box").setStyle('display', 'block');

+    add_box.start('opacity',1)

 }

 

 function out(){

-        bg_hide()

-	add_box.start('opacity',0).chain(function(){

-		$('add_box').setStyle('display', 'none');

-	});

+    bg_hide();

+    add_box.start('opacity',0).chain(function(){

+        $('add_box').setStyle('display', 'none');

+    });

 }

 function show_cap(){

-        bg_show()

-	cap_box.set('opacity', 0)

-	$("cap_box").setStyle('display', 'block');

-	cap_box.start('opacity',1)

+    bg_show();

+    $("cap_box").setStyle('display', 'block');

+    cap_box.start('opacity',1)

 }

 

 function hide_cap(){

-        bg_hide()

-	cap_box.start('opacity',0).chain(function(){

-		$('cap_box').setStyle('display', 'none');

-	});

+    bg_hide();

+    cap_box.start('opacity',0).chain(function(){

+        $('cap_box').setStyle('display', 'none');

+    });

 }

 

 function load_cap(method, post){

-        new Request.JSON({

-		url: "/json/set_captcha",

-		onSuccess: function(data){

-                    if (data.captcha){

-                        $('cap_img').set('src', data.src);

-                        $('cap_span').setStyle('display', 'block');

-                        $$('#cap_form p')[0].set('text', '{% trans "Please read the text on the captcha." %}');

-                        $('cap_id').set('value', data.id);

-                    } else{

-                        $('cap_img').set('src', '');

-                        $('cap_span').setStyle('display', 'none');

-                        $$('#cap_form p')[0].set('text', '{% trans "No Captchas to read." %}');

-                    }

-                },

-		secure: false,

-                async: true,

-                method: method

-	}).send(post);

+    new Request.JSON({

+        url: "/json/set_captcha",

+        onSuccess: function(data){

+            if (data.captcha){

+                $('cap_img').set('src', data.src);

+                $('cap_span').setStyle('display', 'block');

+                $$('#cap_form p')[0].set('text', '{% trans "Please read the text on the captcha." %}');

+                $('cap_id').set('value', data.id);

+            } else{

+                $('cap_img').set('src', '');

+                $('cap_span').setStyle('display', 'none');

+                $$('#cap_form p')[0].set('text', '{% trans "No Captchas to read." %}');

+            }

+        },

+        secure: false,

+        async: true,

+        method: method

+    }).send(post);

 }

 

 function submit_cap(){

-        load_cap("post", "cap_id="+ $('cap_id').get('value') +"&cap_text=" + $('cap_text').get('value') );

-        $('cap_text').set('value', '');

-        return false;

+    load_cap("post", "cap_id="+ $('cap_id').get('value') +"&cap_text=" + $('cap_text').get('value') );

+    $('cap_text').set('value', '');

+    return false;

 }

 

 

 function AddBox()

 {

-	if ($("add_box").getStyle("display") == "hidden" || $("add_box").getStyle("display") == "none" || $("add_box").getStyle("opacity" == 0))

-	{

-		show();

-	}

-	else

-	{

-		out();

-	}

+    if ($("add_box").getStyle("display") == "hidden" || $("add_box").getStyle("display") == "none" || $("add_box").getStyle("opacity" == 0))

+    {

+        show();

+    }

+    else

+    {

+        out();

+    }

 }

 

 </script>

@@ -194,18 +196,18 @@ function AddBox()
 {% block head %}

 {% endblock %}

 </head>

-    <body>

+<body>

 <a class="anchor" name="top" id="top"></a>

 

 <div id="head-panel">

 

-<div id="head-search-and-login">

+    <div id="head-search-and-login">

 

-{% if user.is_authenticated %}

+        {% if user.is_authenticated %}

 

 <span id="cap_info" style="display: {% if captcha %}inline{%else%}none{% endif %}">

 <img src="{{ MEDIA_URL }}img/images.png" alt="Captcha:" style="vertical-align:middle; margin:2px" />

-<font style="font-weight: bold; cursor: pointer; margin-right: 2px;">{% trans "Captcha waiting" %}</font>

+<span style="font-weight: bold; cursor: pointer; margin-right: 2px;">{% trans "Captcha waiting" %}</span>

 </span>

 

 <img src="{{ MEDIA_URL }}img/head-login.png" alt="User:" style="vertical-align:middle; margin:2px" /><span style="padding-right: 2px;">{{user.username}}</span>

diff --git a/module/web/templates/default/captcha.html b/module/web/templates/default/captcha.html
index aa30e365c..fe7b04fc9 100644
--- a/module/web/templates/default/captcha.html
+++ b/module/web/templates/default/captcha.html
@@ -1,6 +1,5 @@
 {% load i18n %}

 <iframe id="upload_target" name="upload_target" src="" style="display: none; width:0;height:0"></iframe>

-<div id="add_bg" style="filter:alpha(opacity:80);KHTMLOpacity:0.80;MozOpacity:0.80;opacity:0.80; background:#000; width:100%; height: 100%; position:absolute; top:0px; left:0px; display:none;">&nbsp;</div>

 <!--<div id="add_box" style="left:50%; top:200px; margin-left: -450px; width: 900px; position: absolute; background: #FFF; padding: 10px 10px 10px 10px; display:none;">-->

   

   <!--<div style="width: 900px; text-align: right;"><b onclick="AddBox();">[Close]</b></div>-->

diff --git a/module/web/templates/default/collector.html b/module/web/templates/default/collector.html
index 630eddc51..e207ba99a 100644
--- a/module/web/templates/default/collector.html
+++ b/module/web/templates/default/collector.html
@@ -8,7 +8,6 @@
 <script type="text/javascript">

 

 document.addEvent("domready", function(){

-    load = new Fx.Tween($("load-indicator"), {link: "cancel"});

     var pUI = new PackageUI("url", 0);

 });

 </script>

@@ -49,19 +48,22 @@ document.addEvent("domready", function(){
 <div id="package_{{id}}" class="package">

     <div class="order" style="display: none;">{{ package.order }}</div>

 

-    <div class="packagename" style="cursor: move;">

-        {{ package.name }}

+    <div class="packagename" style="cursor: pointer;">

+        <img class="package_drag" src="/media/default/img/folder.png" style="cursor: move; margin-bottom: -2px">

+        <span class="name">{{package.name}}</span>

         &nbsp;&nbsp;

-        <span class="buttons" style="opacity:0; cursor: default">

+        <span class="buttons" style="opacity:0">

         <img title="{% trans "Delete Package" %}" style="cursor: pointer" width="12px" height="12px" src="{{ MEDIA_URL }}img/delete.png" />

         &nbsp;&nbsp;

         <img title="{% trans "Restart Package" %}" style="margin-left: -10px; cursor: pointer" height="12px" src="{{ MEDIA_URL }}img/arrow_refresh.png" />

         &nbsp;&nbsp;

+        <img title="{% trans "Edit Package" %}" style="margin-left: -10px; cursor: pointer" height="12px" src="{{ MEDIA_URL }}img/pencil.png" />

+        &nbsp;&nbsp;

         <img title="{% trans "Move Package to Queue" %}" style="margin-left: -10px; cursor: pointer" height="12px" src="{{ MEDIA_URL }}img/package_go.png" />

         </span>

     </div>

     <div id="children_{{id}}" style="display: none;" class="children">

-    <span class="child_secrow">{% trans "Folder:" %} {{package.folder}} | {% trans "Password:"%} {{ package.password }} | {% trans "Priority:"%} {{ package.priority }}</span>

+    <span class="child_secrow">{% trans "Folder:" %} <span class="folder">{{package.folder}}</span> | {% trans "Password:"%} <span class="password">{{package.password}}</span> | {% trans "Priority:"%} <span class="prio">{{package.priority}}</span></span>

     <ul id="sort_children_{{id}}" style="list-style: none; padding-left: 0">

     </ul>

     </div>

@@ -69,4 +71,7 @@ document.addEvent("domready", function(){
     </li>

 {% endfor %}

 </ul>

+

+{% include "default/edit_package.html" %}

+

 {% endblock %}
\ No newline at end of file
diff --git a/module/web/templates/default/edit_package.html b/module/web/templates/default/edit_package.html
new file mode 100644
index 000000000..9938eb17b
--- /dev/null
+++ b/module/web/templates/default/edit_package.html
@@ -0,0 +1,41 @@
+{% load i18n %}

+<div id="pack_box" class="myform" style="z-index: 2">

+<form id="pack_form" action="/json/edit_package" method="POST" enctype="multipart/form-data">

+<h1>{% trans "Edit Package" %}</h1>

+<p>{% trans "Edit the package detais below." %}</p>

+<input name="pack_id" id="pack_id" type="hidden" value=""/> 

+<label for="pack_name">{% trans "Name" %}

+<span class="small">{% trans "The name of the package." %}</span>

+</label>

+<input id="pack_name" name="pack_name" type="text" size="20" />

+

+<label for="pack_folder">{% trans "Folder" %}

+<span class="small">{% trans "Name of subfolder for these downloads." %}</span>

+</label>

+<input id="pack_folder" name="pack_folder" type="text" size="20" />

+

+<label for="pack_prio">{% trans "Priority" %}

+<span class="small">{% trans "Priority of the package." %}</span>

+</label>

+    <select name="pack_prio" id="pack_prio">

+        <option value="3">{% trans "highest" %}</option>

+        <option value="2">{% trans "higher" %}</option>

+        <option value="1">{% trans "high" %}</option>

+        <option value="0" selected="selected">{% trans "normal" %}</option>

+        <option value="-1">{% trans "low" %}</option>

+        <option value="-2">{% trans "lower" %}</option>

+        <option value="-3">{% trans "lowest" %}</option>

+    </select>

+

+<label for="pack_pws">{% trans "Password" %}

+<span class="small">{% trans "List of password used for unrar." %}</span>

+</label>

+<textarea rows="3" name="pack_pws" id="pack_pws"></textarea>

+

+<button type="submit">{% trans "Submit" %}</button>

+<button id="pack_reset" style="margin-left: 0" type="reset">{% trans "Reset" %}</button>

+<div class="spacer"></div>

+

+</form>

+

+</div>
\ No newline at end of file
diff --git a/module/web/templates/default/home.html b/module/web/templates/default/home.html
index bbc196fe1..41ced20a7 100644
--- a/module/web/templates/default/home.html
+++ b/module/web/templates/default/home.html
@@ -145,10 +145,10 @@ var LinkEntry = new Class({
                 'styles':{

                     'height': '4px',

                     'width': item.percent+'%',

-                    'background-color': '#ddd',

+                    'background-color': '#ddd'

                 }

                 })

-            }

+            };

             

             this.elements.tr.adopt(this.elements.name,this.elements.status,this.elements.info,this.elements.kbleft,new Element('td').adopt(this.elements.percent,this.elements.remove));

             this.elements.pgbTr.adopt(new Element('td',{'colspan':5}).adopt(this.elements.pgb));

diff --git a/module/web/templates/default/package_ui.js b/module/web/templates/default/package_ui.js
index 5f39710c1..759412621 100644
--- a/module/web/templates/default/package_ui.js
+++ b/module/web/templates/default/package_ui.js
@@ -1,5 +1,13 @@
 //{% load i18n %}
-var load; // populate later
+var load, pack_box;
+
+document.addEvent("domready", function(){
+    load = new Fx.Tween($("load-indicator"), {link: "cancel"});
+    pack_box = new Fx.Tween($('pack_box'));
+    $('pack_reset').addEvent('click', function(){
+        hide_pack()
+    });
+});
 
 function indicateLoad() {
     //$("load-indicator").reveal();
@@ -10,6 +18,19 @@ function indicateFinish() {
     load.start("opacity", 0)
 }
 
+function show_pack(){
+    bg_show();
+    $("pack_box").setStyle('display', 'block');
+    pack_box.start('opacity',1)
+}
+
+function hide_pack(){
+    bg_hide();
+    pack_box.start('opacity',0).chain(function(){
+        $('pack_box').setStyle('display', 'none');
+    });
+}
+
 var PackageUI = new Class({
     initialize: function(url, type) {
         this.url = url;
@@ -22,7 +43,7 @@ var PackageUI = new Class({
             clone: true,
             revert: true,
             opacity: 0.4,
-            handle: ".packagename",
+            handle: ".package_drag",
             onStart: this.startSort,
             onComplete: this.saveSort.bind(this)
         });
@@ -102,11 +123,18 @@ var Package = new Class({
     parseElement: function() {
         var imgs = this.ele.getElements('img');
 
-        imgs[0].addEvent('click', this.deletePackage.bind(this));
+        this.name = this.ele.getElements('.name')[0];
+        this.folder = this.ele.getElements('.folder')[0];
+        this.password = this.ele.getElements('.password')[0];
+        this.prio = this.ele.getElements('.prio')[0];
 
-        imgs[1].addEvent('click', this.restartPackage.bind(this));
+        imgs[1].addEvent('click', this.deletePackage.bind(this));
 
-        imgs[2].addEvent('click', this.movePackage.bind(this));
+        imgs[2].addEvent('click', this.restartPackage.bind(this));
+
+        imgs[3].addEvent('click', this.editPackage.bind(this));
+
+        imgs[4].addEvent('click', this.movePackage.bind(this));
 
         this.ele.getElement('.packagename').addEvent('click', this.toggle.bind(this));
 
@@ -137,8 +165,8 @@ var Package = new Class({
             html += "<span class='child_status'>{statusmsg}</span>{error}&nbsp;".substitute({"statusmsg": link.statusmsg, "error":link.error});
             html += "<span class='child_status'>{format_size}</span>".substitute({"format_size": link.format_size});
             html += "<span class='child_status'>{plugin}</span>&nbsp;&nbsp;".substitute({"plugin": link.plugin});
-            html += "<img title='{% trans "Delete Link" %}' style='cursor: pointer;' width='10px' height='10px' src='{{ MEDIA_URL }}img/delete.png' />&nbsp;&nbsp;"
-            html += "<img title='{% trans "Restart Link" %}' style='cursor: pointer;margin-left: -4px' width='10px' height='10px' src='{{ MEDIA_URL }}img/arrow_refresh.png' /></div>"
+            html += "<img title='{% trans "Delete Link" %}' style='cursor: pointer;' width='10px' height='10px' src='{{ MEDIA_URL }}img/delete.png' />&nbsp;&nbsp;";
+            html += "<img title='{% trans "Restart Link" %}' style='cursor: pointer;margin-left: -4px' width='10px' height='10px' src='{{ MEDIA_URL }}img/arrow_refresh.png' /></div>";
 
             var div = new Element("div",{
                 "id": "file_"+link.id,
@@ -251,6 +279,40 @@ var Package = new Class({
         event.stop();
     },
 
+
+    editPackage: function(event){
+        $("pack_form").removeEvents("submit");
+        $("pack_form").addEvent("submit", this.savePackage.bind(this));
+
+        $("pack_id").set("value", this.id);
+        $("pack_name").set("value", this.name.get("text"));
+        $("pack_folder").set("value", this.folder.get("text"));
+        $("pack_pws").set("value", this.password.get("text"));
+
+        var prio = 3;
+        $("pack_prio").getChildren("option").each(function(item, index){
+           item.erase("selected");
+            if (prio.toString() == this.prio.get("text")){
+                item.set("selected","selected");
+            }
+            prio--;
+        }.bind(this));
+
+
+        show_pack();
+        event.stop();
+    },
+
+    savePackage: function(event){
+        $("pack_form").send();
+        this.name.set("text", $("pack_name").get("value"));
+        this.folder.set("text", $("pack_folder").get("value"));
+        this.password.set("text", $("pack_pws").get("value"));
+        this.prio.set("text", $("pack_prio").get("value"));
+        hide_pack();
+        event.stop();
+    },
+
     saveSort: function(ele, copy) {
         var order = [];
         this.sorts.serialize(function(ele,pos){
diff --git a/module/web/templates/default/queue.html b/module/web/templates/default/queue.html
index 2e8bf4b96..e69edd2ad 100644
--- a/module/web/templates/default/queue.html
+++ b/module/web/templates/default/queue.html
@@ -8,7 +8,6 @@
 <script type="text/javascript">

 

 document.addEvent("domready", function(){

-    load = new Fx.Tween($("load-indicator"), {link: "cancel"});

     var pUI = new PackageUI("url",1);

 });

 </script>

@@ -51,19 +50,22 @@ document.addEvent("domready", function(){
 <div id="package_{{id}}" class="package">

     <div class="order" style="display: none;">{{ package.order }}</div>

     

-    <div class="packagename" style="cursor: move;">

-        {{ package.name }}

+    <div class="packagename" style="cursor: pointer;">

+        <img class="package_drag" src="/media/default/img/folder.png" style="cursor: move; margin-bottom: -2px">

+        <span class="name">{{package.name}}</span>

         &nbsp;&nbsp;

-        <span class="buttons" style="opacity:0; cursor: default">

+        <span class="buttons" style="opacity:0">

         <img title="{% trans "Delete Package" %}" style="cursor: pointer" width="12px" height="12px" src="{{ MEDIA_URL }}img/delete.png" />

         &nbsp;&nbsp;

         <img title="{% trans "Restart Package" %}" style="margin-left: -10px; cursor: pointer" height="12px" src="{{ MEDIA_URL }}img/arrow_refresh.png" />

         &nbsp;&nbsp;

+        <img title="{% trans "Edit Package" %}" style="margin-left: -10px; cursor: pointer" height="12px" src="{{ MEDIA_URL }}img/pencil.png" />

+        &nbsp;&nbsp;

         <img title="{% trans "Move Package to Collector" %}" style="margin-left: -10px; cursor: pointer" height="12px" src="{{ MEDIA_URL }}img/package_go.png" />

         </span>

     </div>

     <div id="children_{{id}}" style="display: none;" class="children">

-    <span class="child_secrow">{% trans "Folder:" %} {{package.folder}} | {% trans "Password:"%} {{ package.password }} | {% trans "Priority:"%} {{ package.priority }}</span>

+    <span class="child_secrow">{% trans "Folder:" %} <span class="folder">{{package.folder}}</span> | {% trans "Password:"%} <span class="password">{{package.password}}</span> | {% trans "Priority:"%} <span class="prio">{{package.priority}}</span></span>

     <ul id="sort_children_{{id}}" style="list-style: none; padding-left: 0">

     </ul>

     </div>

@@ -71,4 +73,7 @@ document.addEvent("domready", function(){
     </li>

 {% endfor %}

 </ul>

+

+{% include "default/edit_package.html" %}

+

 {% endblock %} 
\ No newline at end of file
diff --git a/module/web/templates/default/window.html b/module/web/templates/default/window.html
index 01218965e..d40edbb9e 100644
--- a/module/web/templates/default/window.html
+++ b/module/web/templates/default/window.html
@@ -8,12 +8,12 @@
 <form id="add_form" action="/json/add_package" method="POST" enctype="multipart/form-data">

 <h1>{% trans "Add Package" %}</h1>

 <p>{% trans "Paste your links or upload a container." %}</p>

-<label>{% trans "Name" %}

+<label for="add_name">{% trans "Name" %}

 <span class="small">{% trans "The name of the new package." %}</span>

 </label>

 <input id="add_name" name="add_name" type="text" size="20" />

 

-<label>{% trans "Links" %}

+<label for="add_links">{% trans "Links" %}

 <span class="small">{% trans "Paste your links here" %}</span>

 </label>

 <textarea rows="5" name="add_links" id="add_links"></textarea>

@@ -23,7 +23,7 @@
 </label>

 <input type="file" name="add_file" id="add_file"/>

 

-<label>{% trans "Destination" %}

+<label for="add_dest">{% trans "Destination" %}

 </label>

 <span class="cont">

     {% trans "Queue" %}

@@ -33,7 +33,7 @@
 </span>

 

 <button type="submit">{% trans "Add Package" %}</button>

-<button id="add_reset" style="margin-left:0px;" type="reset">{% trans "Reset" %}</button>

+<button id="add_reset" style="margin-left:0;" type="reset">{% trans "Reset" %}</button>

 <div class="spacer"></div>

 

 </form>