<!DOCTYPE html>
<html ng-app="Directives">
  <head>
    <title>Angular example with connected lists</title>
    <link rel="stylesheet" href="../bower_components/basscss/css/basscss.css">
  </head>
  <body>
  	<div class="clearfix mb2 white bg-navy">
  		<div class="left">
  		  <a href="index.html" class="button py2 m0 button-transparent">HTML5 Sortable</a>
  		  <a href="angular-single.html" class="button button-narrow py2 m0 button-transparent">Angular single</a>
  			<a href="angular-connected.html" class="button button-narrow py2 m0 button-transparent is-active">Angular connected</a>
  			<a href="angular-ngRepeat-connected.html" class="button button-narrow py2 m0 button-transparent">Angular ngRepeat</a>
  		</div>
  		<div class="right">
  			<a href="#!" class="button py2 m0 button-transparent">Fork on GitHub</a>
  		</div>
  	</div>
    <div class="px2 sm-px3 py2 mb3 col-8 mx-auto" ng-controller="MainCtrl">
  		<section class="mb3 mx-auto col col-12">
  		  <div class="p3 navy bg-yellow">
  		    <div class="flex flex-column">
  		      <h1 class="h1 m0 flex-auto">
  		        Angular example with connected lists
  		      </h1>
            <div class="col col-12">
    					<div class="mt2 p2 bg-yellow border navy border-navy">
    				    <code class="mb0">
                  <div class="muted">// Connect two lists by passing the connectWith option to the html-sortable directive:</div>
                  <div>&lt;ul html-sortable=&quot;{ connectWith: &#x27;.connected&#x27; }&quot; class=&quot;connected&quot; ng-model=&#x27;data1&#x27;&gt;...&lt;/ul&gt;</div>
                  <div>&lt;ul html-sortable=&quot;{ connectWith: &#x27;.connected&#x27; }&quot; class=&quot;connected&quot; ng-model=&#x27;data2&#x27;&gt;...&lt;/ul&gt;</div>
    						</code>
      				</div>
            </div>
  		    </div>
  		    <div class="sm-flex flex-center mxn2">
    				<div class="col col-6">
    					<ul class="m2 flex flex-column list-reset connected" html-sortable="sortableOptions" ng-model='data1'>
    						<li class="p1 mb1 yellow border border-navy bg-navy" ng-repeat="itm in data1">{{itm}}</li>
    					</ul>
    		    </div>
    				<div class="col col-6">
    					<ul class="m2 flex flex-column list-reset connected" html-sortable="sortableOptions" ng-model='data2'>
    						<li ng-repeat="itm in data2" class="p1 mb1 navy border border-navy bg-yellow">
                  {{itm}}
                </li>
    					</ul>
    		    </div>
          </div>
          <div class="sm-flex flex-center mxn2">
            <div class="col col-12 m2">
              <h3 class="h3">Model 1:</h3>
              <pre>{{ data1 }}</pre>
              <h3 class="h3">Model 2:</h3>
              <pre>{{ data2 }}</pre>
            </div>
  		    </div>
  		  </div>
  		</section>
    </div>

    <script src="../bower_components/jquery/dist/jquery.min.js"></script>
    <script src="../bower_components/angular/angular.min.js"></script>
    <script src="../dist/html.sortable.js"></script>
    <script src="../dist/html.sortable.angular.js"></script>
    <script src="../src/html.sortable.src.js"></script>
    <script src="../src/html.sortable.angular.js"></script>
    <script src="angular-connected.js"></script>
  </body>
</html>