<commit_before><!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Constructor de interfaz de SARA</title>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Drag and drop CSS -->
    <link href="css/application.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="css/simple-sidebar.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>

    <div id="wrapper">
		
        <!-- Sidebar -->
        <div id="sidebar-wrapper">
            <div class="panel-group" id="accordion">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><span class="glyphicon glyphicon-folder-close">
                            </span>Content</a>
                        </h4>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse in">
                        <div class="panel-body">
                        	<div class='span4'>
				              <div class='switch-container'>
				                <div class='switch active' data-off='OFF' data-on='ON' data-toggle='switch'></div>
				              </div>
				              <ol class='nested_with_switch vertical'>
				                <li class='highlight'>
				                  Item 1
				                </li>
				                <li>
				                  Item 2
				                </li>
				                <li>
				                  Item 3
				                </li>
				                <li>
				                  Item 4
				                  <ol>
				                    <li>Item 3.1</li>
				                    <li>Item 3.2</li>
				                    <li>Item 3.3</li>
				                    <li>Item 3.4</li>
				                    <li>Item 3.5</li>
				                    <li>Item 3.6</li>
				                  </ol>
				                </li>
				                <li>
				                  Item 5
				                </li>
				                <li>
				                  Item 6
				                </li>
				              </ol>
				            </div>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"><span class="glyphicon glyphicon-th">
                            </span>Modules</a>
                        </h4>
                    </div>
                    <div id="collapseTwo" class="panel-collapse collapse">
                        <div class="panel-body">
                            <table class="table">
                                <tr>
                                    <td>
                                        <a href="http://www.jquery2dotnet.com">Orders</a> <span class="label label-success">$ 320</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <a href="http://www.jquery2dotnet.com">Invoices</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <a href="http://www.jquery2dotnet.com">Shipments</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <a href="http://www.jquery2dotnet.com">Tex</a>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"><span class="glyphicon glyphicon-user">
                            </span>Account</a>
                        </h4>
                    </div>
                    <div id="collapseThree" class="panel-collapse collapse">
                        <div class="panel-body">
                            <table class="table">
                                <tr>
                                    <td>
                                        <a href="http://www.jquery2dotnet.com">Change Password</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <a href="http://www.jquery2dotnet.com">Notifications</a> <span class="label label-info">5</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <a href="http://www.jquery2dotnet.com">Import/Export</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <span class="glyphicon glyphicon-trash text-danger"></span><a href="http://www.jquery2dotnet.com" class="text-danger">
                                            Delete Account</a>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseFour"><span class="glyphicon glyphicon-file">
                            </span>Reports</a>
                        </h4>
                    </div>
                    <div id="collapseFour" class="panel-collapse collapse">
                        <div class="panel-body">
                            <table class="table">
                                <tr>
                                    <td>
                                        <span class="glyphicon glyphicon-usd"></span><a href="http://www.jquery2dotnet.com">Sales</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <span class="glyphicon glyphicon-user"></span><a href="http://www.jquery2dotnet.com">Customers</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <span class="glyphicon glyphicon-tasks"></span><a href="http://www.jquery2dotnet.com">Products</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <span class="glyphicon glyphicon-shopping-cart"></span><a href="http://www.jquery2dotnet.com">Shopping Cart</a>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /#sidebar-wrapper -->

        <!-- Page Content -->
        <div id="page-content-wrapper">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-6">
                    	<a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Componentes</a>
                        <h1>Simple Sidebar</h1>
                        <div>
				            
				            <div class='span4'>
				              <div class='switch-container'>
				                <div class='switch active' data-off='OFF' data-on='ON' data-toggle='switch'></div>
				              </div>
				              <ol class='nested_with_switch vertical'>
				                <li>
				                  Item 1
				                </li>
				                <li>
				                  Item 2
				                </li>
				                <li>
				                  Item 3
				                </li>
				                <li>
				                  Item 4
				                  <ol>
				                    <li>Item 3.1</li>
				                    <li>Item 3.2</li>
				                    <li>Item 3.3</li>
				                    <li>Item 3.4</li>
				                    <li>Item 3.5</li>
				                    <li>Item 3.6</li>
				                  </ol>
				                </li>
				                <li>
				                  Item 5
				                </li>
				                <li>
				                  Item 6
				                </li>
				              </ol>
				            </div>
                        </div>                    
                    </div>
                    <div class="col-lg-6">
                        <h1>Código</h1>
                        <div>
<pre id="editor" style="height: 300px;">function foo(items) {
    var i;
    for (i = 0; i &lt; items.length; i++) {
        alert("Ace Rocks " + items[i]);
    }
}</pre>							
							<script src="js/ace/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
							<script>
							    var editor = ace.edit("editor");
							    editor.setTheme("ace/theme/eclipse");
							    editor.getSession().setMode("ace/mode/javascript");
							</script>
						</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /#page-content-wrapper -->

    </div>
    <!-- /#wrapper -->

    <!-- jQuery -->
    <script src="js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>
    
    <!-- jQuery -->
    <script src="js/jquery-sortable.js"></script>

    <!-- Menu Toggle Script -->
    <script>
    $("#menu-toggle").click(function(e) {
        e.preventDefault();
        $("#wrapper").toggleClass("toggled");
    });
    </script>
    <!-- Drag and Drop Script -->
    <script>
    var oldContainer;
	$("ol.nested_with_switch").sortable({
	  group: 'nested',
	  afterMove: function (placeholder, container) {
	    if(oldContainer != container){
	      if(oldContainer)
	        oldContainer.el.removeClass("active");
	      container.el.addClass("active");	      
	      oldContainer = container;
	    }
	  },
	  onDrop: function (item, container, _super) {
	    container.el.removeClass("active");
	    _super(item);
	  }
	});<commit_msg>Constructor con drop annd drag funcionando<commit_after><!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Constructor de interfaz de SARA</title>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Drag and drop CSS -->
    <link href="css/application.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="css/simple-sidebar.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>

    <div id="wrapper">
		
        <!-- Sidebar -->
        <div id="sidebar-wrapper">
            <div class="panel-group" id="accordion">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><span class="glyphicon glyphicon-folder-close">
                            </span>Content</a>
                        </h4>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse in">
                        <div class="panel-body">
                        	<div class='span4'>
				              <ol class='nested_with_no_drop vertical'>
				                <li class='highlight'>
				                  <i class='icon-move'></i>
				                  Item 1
				                </li>
				                <li>
				                	<i class='icon-move'></i>
				                  Item 2
				                </li>
				                <li>
				                	<i class='icon-move'></i>
				                  Item 3
				                </li>
				                <li>
				                	<i class='icon-move'></i>
				                  Item 4
				                  <ol>
				                    <li><i class='icon-move'></i>Item 3.1</li>
				                    <li><i class='icon-move'></i>Item 3.2</li>
				                    <li><i class='icon-move'></i>Item 3.3</li>
				                    <li><i class='icon-move'></i>Item 3.4</li>
				                    <li><i class='icon-move'></i>Item 3.5</li>
				                    <li><i class='icon-move'></i>Item 3.6</li>
				                  </ol>
				                </li>
				                <li>
				                	<i class='icon-move'></i>
				                  Item 5
				                </li>
				                <li>
				                	<i class='icon-move'></i>
				                  Item 6
				                </li>
				              </ol>
				            </div>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"><span class="glyphicon glyphicon-th">
                            </span>Modules</a>
                        </h4>
                    </div>
                    <div id="collapseTwo" class="panel-collapse collapse">
                        <div class="panel-body">
                            <table class="table">
                                <tr>
                                    <td>
                                        <a href="http://www.jquery2dotnet.com">Orders</a> <span class="label label-success">$ 320</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <a href="http://www.jquery2dotnet.com">Invoices</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <a href="http://www.jquery2dotnet.com">Shipments</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <a href="http://www.jquery2dotnet.com">Tex</a>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"><span class="glyphicon glyphicon-user">
                            </span>Account</a>
                        </h4>
                    </div>
                    <div id="collapseThree" class="panel-collapse collapse">
                        <div class="panel-body">
                            <table class="table">
                                <tr>
                                    <td>
                                        <a href="http://www.jquery2dotnet.com">Change Password</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <a href="http://www.jquery2dotnet.com">Notifications</a> <span class="label label-info">5</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <a href="http://www.jquery2dotnet.com">Import/Export</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <span class="glyphicon glyphicon-trash text-danger"></span><a href="http://www.jquery2dotnet.com" class="text-danger">
                                            Delete Account</a>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseFour"><span class="glyphicon glyphicon-file">
                            </span>Reports</a>
                        </h4>
                    </div>
                    <div id="collapseFour" class="panel-collapse collapse">
                        <div class="panel-body">
                            <table class="table">
                                <tr>
                                    <td>
                                        <span class="glyphicon glyphicon-usd"></span><a href="http://www.jquery2dotnet.com">Sales</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <span class="glyphicon glyphicon-user"></span><a href="http://www.jquery2dotnet.com">Customers</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <span class="glyphicon glyphicon-tasks"></span><a href="http://www.jquery2dotnet.com">Products</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <span class="glyphicon glyphicon-shopping-cart"></span><a href="http://www.jquery2dotnet.com">Shopping Cart</a>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /#sidebar-wrapper -->

        <!-- Page Content -->
        <div id="page-content-wrapper">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-6">
                    	<a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Componentes</a>
                        <h3>Elementos en página</h3>
                        <div>
				            
				            <div class='span4'>
				              <ol class='nested_with_drop vertical'>
				                <li>
				                	<i class='icon-move'></i>
				                  Item 1
				                </li>
				                <li>
				                	<i class='icon-move'></i>
				                  Item 2
				                </li>
				                <li>
				                	<i class='icon-move'></i>
				                  Item 3
				                </li>
				                <li>
				                	<i class='icon-move'></i>
				                  Item 4
				                  <ol>
				                    <li><i class='icon-move'></i>Item 3.1</li>
				                    <li><i class='icon-move'></i>Item 3.2</li>
				                    <li><i class='icon-move'></i>Item 3.3</li>
				                    <li><i class='icon-move'></i>Item 3.4</li>
				                    <li><i class='icon-move'></i>Item 3.5</li>
				                    <li><i class='icon-move'></i>Item 3.6</li>
				                  </ol>
				                </li>
				                <li>
				                	<i class='icon-move'></i>
				                  Item 5
				                </li>
				                <li>
				                	<i class='icon-move'></i>
				                  Item 6
				                </li>
				              </ol>
				            </div>
                        </div>                    
                    </div>
                    <div class="col-lg-6">
                        <h3>Código</h3>
                        <div>
<pre id="editor" style="height: 300px;">function foo(items) {
    var i;
    for (i = 0; i &lt; items.length; i++) {
        alert("Ace Rocks " + items[i]);
    }
}</pre>							
							<script src="js/ace/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
							<script>
							    var editor = ace.edit("editor");
							    editor.setTheme("ace/theme/eclipse");
							    editor.getSession().setMode("ace/mode/javascript");
							</script>
						</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /#page-content-wrapper -->

    </div>
    <!-- /#wrapper -->

    <!-- jQuery -->
    <script src="js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>
    
    <!-- jQuery -->
    <script src="js/jquery-sortable.js"></script>

    <!-- Menu Toggle Script -->
    <script>
    $("#menu-toggle").click(function(e) {
        e.preventDefault();
        $("#wrapper").toggleClass("toggled");
    });
    </script>
    <!-- Drag and Drop Script -->
    <script>
    $("ol.nested_with_drop").sortable({
	  group: 'nested',
	  handle: 'i.icon-move',
	  onDragStart: function (item, container, _super) {
	    // Duplicate items of the no drop area
	    if(!container.options.drop){
	    	item.clone().insertAfter(item);	
	    }
	    _super(item);
	  }
	});
	$("ol.nested_with_no_drop").sortable({
	  group: 'nested',
	  drop: false
	});
	var oldContainer;
	$("ol.simple_with_no_drop_a").sortable({
	  group: 'nested',
	  afterMove: function (placeholder, container) {
	    if(oldContainer != container){
	      if(oldContainer)
	        oldContainer.el.removeClass("active");
	      container.el.addClass("active");	      
	      oldContainer = container;
	    }
	  },
	  onDrop: function (item, container, _super) {
	    container.el.removeClass("active");
	    _super(item);
	  }
	});
{'fraction_non_alphanumeric': 0.13495794161306285, 'fraction_numerical': 0.007174666006927264, 'mean_word_length': 0.8334593286967039, 'pattern_counts': {'":': 0, '<': 629, '<?xml version=': 0, '>': 629, 'https://': 4, 'lorem ipsum': 0, 'www.': 24, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 90, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3848381', 'n_tokens_mistral': 6892, 'n_tokens_neox': 5712, 'n_words': 1069}