sort links with alpine

src/main.py

···
     pds = resolve_pds_from_did(profile.did)
     if not pds:
         return "did not found", 404
-    pro, from_bluesky = load_profile(pds, profile.did, reload=True)  # DONT COMMIT
-    links = load_links(pds, profile.did, reload=True) or [{}]  # DONT COMMIT
+    pro, from_bluesky = load_profile(pds, profile.did, reload=True)
+    links = load_links(pds, profile.did, reload=True) or [{"background": "#fa0"}]
 
     return render_template(
         "editor.html",
···
     profile = client.login(session_string=session)
 
     links: list[dict[str, str]] = []
-    for i in range(0, 100):
-        url = request.form.get(f"link{i}-url")
-        title = request.form.get(f"link{i}-title")
-        detail = request.form.get(f"link{i}-detail")
-        color = request.form.get(f"link{i}-color")
-        if not url or not title or not color:
+    urls = request.form.getlist("link-url")
+    titles = request.form.getlist("link-title")
+    details = request.form.getlist("link-detail")
+    backgrounds = request.form.getlist("link-background")
+    for url, title, detail, background in zip(urls, titles, details, backgrounds):
+        if not url or not title or not background:
             break
         link: dict[str, str] = {
             "url": url,
             "title": title,
-            "color": color,
+            "color": background,
+            "background": background,
         }
         if detail:
             link["detail"] = detail
         links.append(link)
-
-    app.logger.warning(links)
 
     put_record(
         client=client,
···
         return None
 
     record = json.loads(response)
-    link = record["value"]["links"]
+    links_ = record["value"]["links"]
     app.logger.debug(f"caching links for {did}")
-    links[did] = link
-    return link
+    links[did] = links_
+    return links_
 
 
 def load_profile(

src/static/alpine.sort.3.15.0.min.js

···
+(()=>{function le(o,t){var e=Object.keys(o);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(o);t&&(n=n.filter(function(i){return Object.getOwnPropertyDescriptor(o,i).enumerable})),e.push.apply(e,n)}return e}function K(o){for(var t=1;t<arguments.length;t++){var e=arguments[t]!=null?arguments[t]:{};t%2?le(Object(e),!0).forEach(function(n){Fe(o,n,e[n])}):Object.getOwnPropertyDescriptors?Object.defineProperties(o,Object.getOwnPropertyDescriptors(e)):le(Object(e)).forEach(function(n){Object.defineProperty(o,n,Object.getOwnPropertyDescriptor(e,n))})}return o}function Pt(o){return typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?Pt=function(t){return typeof t}:Pt=function(t){return t&&typeof Symbol=="function"&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},Pt(o)}function Fe(o,t,e){return t in o?Object.defineProperty(o,t,{value:e,enumerable:!0,configurable:!0,writable:!0}):o[t]=e,o}function U(){return U=Object.assign||function(o){for(var t=1;t<arguments.length;t++){var e=arguments[t];for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(o[n]=e[n])}return o},U.apply(this,arguments)}function Re(o,t){if(o==null)return{};var e={},n=Object.keys(o),i,r;for(r=0;r<n.length;r++)i=n[r],!(t.indexOf(i)>=0)&&(e[i]=o[i]);return e}function ke(o,t){if(o==null)return{};var e=Re(o,t),n,i;if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(o);for(i=0;i<r.length;i++)n=r[i],!(t.indexOf(n)>=0)&&Object.prototype.propertyIsEnumerable.call(o,n)&&(e[n]=o[n])}return e}var He="1.15.2";function $(o){if(typeof window<"u"&&window.navigator)return!!navigator.userAgent.match(o)}var q=$(/(?:Trident.*rv[ :]?11\.|msie|iemobile|Windows Phone)/i),Ot=$(/Edge/i),se=$(/firefox/i),Et=$(/safari/i)&&!$(/chrome/i)&&!$(/android/i),me=$(/iP(ad|od|hone)/i),ve=$(/chrome/i)&&$(/android/i),be={capture:!1,passive:!1};function y(o,t,e){o.addEventListener(t,e,!q&&be)}function b(o,t,e){o.removeEventListener(t,e,!q&&be)}function Xt(o,t){if(t){if(t[0]===">"&&(t=t.substring(1)),o)try{if(o.matches)return o.matches(t);if(o.msMatchesSelector)return o.msMatchesSelector(t);if(o.webkitMatchesSelector)return o.webkitMatchesSelector(t)}catch{return!1}return!1}}function Xe(o){return o.host&&o!==document&&o.host.nodeType?o.host:o.parentNode}function G(o,t,e,n){if(o){e=e||document;do{if(t!=null&&(t[0]===">"?o.parentNode===e&&Xt(o,t):Xt(o,t))||n&&o===e)return o;if(o===e)break}while(o=Xe(o))}return null}var ue=/\s+/g;function F(o,t,e){if(o&&t)if(o.classList)o.classList[e?"add":"remove"](t);else{var n=(" "+o.className+" ").replace(ue," ").replace(" "+t+" "," ");o.className=(n+(e?" "+t:"")).replace(ue," ")}}function h(o,t,e){var n=o&&o.style;if(n){if(e===void 0)return document.defaultView&&document.defaultView.getComputedStyle?e=document.defaultView.getComputedStyle(o,""):o.currentStyle&&(e=o.currentStyle),t===void 0?e:e[t];!(t in n)&&t.indexOf("webkit")===-1&&(t="-webkit-"+t),n[t]=e+(typeof e=="string"?"":"px")}}function ct(o,t){var e="";if(typeof o=="string")e=o;else do{var n=h(o,"transform");n&&n!=="none"&&(e=n+" "+e)}while(!t&&(o=o.parentNode));var i=window.DOMMatrix||window.WebKitCSSMatrix||window.CSSMatrix||window.MSCSSMatrix;return i&&new i(e)}function ye(o,t,e){if(o){var n=o.getElementsByTagName(t),i=0,r=n.length;if(e)for(;i<r;i++)e(n[i],i);return n}return[]}function W(){var o=document.scrollingElement;return o||document.documentElement}function O(o,t,e,n,i){if(!(!o.getBoundingClientRect&&o!==window)){var r,a,l,s,u,d,c;if(o!==window&&o.parentNode&&o!==W()?(r=o.getBoundingClientRect(),a=r.top,l=r.left,s=r.bottom,u=r.right,d=r.height,c=r.width):(a=0,l=0,s=window.innerHeight,u=window.innerWidth,d=window.innerHeight,c=window.innerWidth),(t||e)&&o!==window&&(i=i||o.parentNode,!q))do if(i&&i.getBoundingClientRect&&(h(i,"transform")!=="none"||e&&h(i,"position")!=="static")){var m=i.getBoundingClientRect();a-=m.top+parseInt(h(i,"border-top-width")),l-=m.left+parseInt(h(i,"border-left-width")),s=a+r.height,u=l+r.width;break}while(i=i.parentNode);if(n&&o!==window){var w=ct(i||o),v=w&&w.a,E=w&&w.d;w&&(a/=E,l/=v,c/=v,d/=E,s=a+d,u=l+c)}return{top:a,left:l,bottom:s,right:u,width:c,height:d}}}function fe(o,t,e){for(var n=tt(o,!0),i=O(o)[t];n;){var r=O(n)[e],a=void 0;if(e==="top"||e==="left"?a=i>=r:a=i<=r,!a)return n;if(n===W())break;n=tt(n,!1)}return!1}function dt(o,t,e,n){for(var i=0,r=0,a=o.children;r<a.length;){if(a[r].style.display!=="none"&&a[r]!==p.ghost&&(n||a[r]!==p.dragged)&&G(a[r],e.draggable,o,!1)){if(i===t)return a[r];i++}r++}return null}function oe(o,t){for(var e=o.lastElementChild;e&&(e===p.ghost||h(e,"display")==="none"||t&&!Xt(e,t));)e=e.previousElementSibling;return e||null}function H(o,t){var e=0;if(!o||!o.parentNode)return-1;for(;o=o.previousElementSibling;)o.nodeName.toUpperCase()!=="TEMPLATE"&&o!==p.clone&&(!t||Xt(o,t))&&e++;return e}function ce(o){var t=0,e=0,n=W();if(o)do{var i=ct(o),r=i.a,a=i.d;t+=o.scrollLeft*r,e+=o.scrollTop*a}while(o!==n&&(o=o.parentNode));return[t,e]}function Ye(o,t){for(var e in o)if(o.hasOwnProperty(e)){for(var n in t)if(t.hasOwnProperty(n)&&t[n]===o[e][n])return Number(e)}return-1}function tt(o,t){if(!o||!o.getBoundingClientRect)return W();var e=o,n=!1;do if(e.clientWidth<e.scrollWidth||e.clientHeight<e.scrollHeight){var i=h(e);if(e.clientWidth<e.scrollWidth&&(i.overflowX=="auto"||i.overflowX=="scroll")||e.clientHeight<e.scrollHeight&&(i.overflowY=="auto"||i.overflowY=="scroll")){if(!e.getBoundingClientRect||e===document.body)return W();if(n||t)return e;n=!0}}while(e=e.parentNode);return W()}function Be(o,t){if(o&&t)for(var e in t)t.hasOwnProperty(e)&&(o[e]=t[e]);return o}function Kt(o,t){return Math.round(o.top)===Math.round(t.top)&&Math.round(o.left)===Math.round(t.left)&&Math.round(o.height)===Math.round(t.height)&&Math.round(o.width)===Math.round(t.width)}var St;function we(o,t){return function(){if(!St){var e=arguments,n=this;e.length===1?o.call(n,e[0]):o.apply(n,e),St=setTimeout(function(){St=void 0},t)}}}function Ge(){clearTimeout(St),St=void 0}function Ee(o,t,e){o.scrollLeft+=t,o.scrollTop+=e}function Se(o){var t=window.Polymer,e=window.jQuery||window.Zepto;return t&&t.dom?t.dom(o).cloneNode(!0):e?e(o).clone(!0)[0]:o.cloneNode(!0)}function De(o,t,e){var n={};return Array.from(o.children).forEach(function(i){var r,a,l,s;if(!(!G(i,t.draggable,o,!1)||i.animated||i===e)){var u=O(i);n.left=Math.min((r=n.left)!==null&&r!==void 0?r:1/0,u.left),n.top=Math.min((a=n.top)!==null&&a!==void 0?a:1/0,u.top),n.right=Math.max((l=n.right)!==null&&l!==void 0?l:-1/0,u.right),n.bottom=Math.max((s=n.bottom)!==null&&s!==void 0?s:-1/0,u.bottom)}}),n.width=n.right-n.left,n.height=n.bottom-n.top,n.x=n.left,n.y=n.top,n}var k="Sortable"+new Date().getTime();function Le(){var o=[],t;return{captureAnimationState:function(){if(o=[],!!this.options.animation){var n=[].slice.call(this.el.children);n.forEach(function(i){if(!(h(i,"display")==="none"||i===p.ghost)){o.push({target:i,rect:O(i)});var r=K({},o[o.length-1].rect);if(i.thisAnimationDuration){var a=ct(i,!0);a&&(r.top-=a.f,r.left-=a.e)}i.fromRect=r}})}},addAnimationState:function(n){o.push(n)},removeAnimationState:function(n){o.splice(Ye(o,{target:n}),1)},animateAll:function(n){var i=this;if(!this.options.animation){clearTimeout(t),typeof n=="function"&&n();return}var r=!1,a=0;o.forEach(function(l){var s=0,u=l.target,d=u.fromRect,c=O(u),m=u.prevFromRect,w=u.prevToRect,v=l.rect,E=ct(u,!0);E&&(c.top-=E.f,c.left-=E.e),u.toRect=c,u.thisAnimationDuration&&Kt(m,c)&&!Kt(d,c)&&(v.top-c.top)/(v.left-c.left)===(d.top-c.top)/(d.left-c.left)&&(s=Ke(v,m,w,i.options)),Kt(c,d)||(u.prevFromRect=d,u.prevToRect=c,s||(s=i.options.animation),i.animate(u,v,c,s)),s&&(r=!0,a=Math.max(a,s),clearTimeout(u.animationResetTimer),u.animationResetTimer=setTimeout(function(){u.animationTime=0,u.prevFromRect=null,u.fromRect=null,u.prevToRect=null,u.thisAnimationDuration=null},s),u.thisAnimationDuration=s)}),clearTimeout(t),r?t=setTimeout(function(){typeof n=="function"&&n()},a):typeof n=="function"&&n(),o=[]},animate:function(n,i,r,a){if(a){h(n,"transition",""),h(n,"transform","");var l=ct(this.el),s=l&&l.a,u=l&&l.d,d=(i.left-r.left)/(s||1),c=(i.top-r.top)/(u||1);n.animatingX=!!d,n.animatingY=!!c,h(n,"transform","translate3d("+d+"px,"+c+"px,0)"),this.forRepaintDummy=We(n),h(n,"transition","transform "+a+"ms"+(this.options.easing?" "+this.options.easing:"")),h(n,"transform","translate3d(0,0,0)"),typeof n.animated=="number"&&clearTimeout(n.animated),n.animated=setTimeout(function(){h(n,"transition",""),h(n,"transform",""),n.animated=!1,n.animatingX=!1,n.animatingY=!1},a)}}}}function We(o){return o.offsetWidth}function Ke(o,t,e,n){return Math.sqrt(Math.pow(t.top-o.top,2)+Math.pow(t.left-o.left,2))/Math.sqrt(Math.pow(t.top-e.top,2)+Math.pow(t.left-e.left,2))*n.animation}var lt=[],jt={initializeByDefault:!0},Tt={mount:function(t){for(var e in jt)jt.hasOwnProperty(e)&&!(e in t)&&(t[e]=jt[e]);lt.forEach(function(n){if(n.pluginName===t.pluginName)throw"Sortable: Cannot mount plugin ".concat(t.pluginName," more than once")}),lt.push(t)},pluginEvent:function(t,e,n){var i=this;this.eventCanceled=!1,n.cancel=function(){i.eventCanceled=!0};var r=t+"Global";lt.forEach(function(a){e[a.pluginName]&&(e[a.pluginName][r]&&e[a.pluginName][r](K({sortable:e},n)),e.options[a.pluginName]&&e[a.pluginName][t]&&e[a.pluginName][t](K({sortable:e},n)))})},initializePlugins:function(t,e,n,i){lt.forEach(function(l){var s=l.pluginName;if(!(!t.options[s]&&!l.initializeByDefault)){var u=new l(t,e,t.options);u.sortable=t,u.options=t.options,t[s]=u,U(n,u.defaults)}});for(var r in t.options)if(t.options.hasOwnProperty(r)){var a=this.modifyOption(t,r,t.options[r]);typeof a<"u"&&(t.options[r]=a)}},getEventProperties:function(t,e){var n={};return lt.forEach(function(i){typeof i.eventProperties=="function"&&U(n,i.eventProperties.call(e[i.pluginName],t))}),n},modifyOption:function(t,e,n){var i;return lt.forEach(function(r){t[r.pluginName]&&r.optionListeners&&typeof r.optionListeners[e]=="function"&&(i=r.optionListeners[e].call(t[r.pluginName],n))}),i}};function je(o){var t=o.sortable,e=o.rootEl,n=o.name,i=o.targetEl,r=o.cloneEl,a=o.toEl,l=o.fromEl,s=o.oldIndex,u=o.newIndex,d=o.oldDraggableIndex,c=o.newDraggableIndex,m=o.originalEvent,w=o.putSortable,v=o.extraEventProperties;if(t=t||e&&e[k],!!t){var E,X=t.options,j="on"+n.charAt(0).toUpperCase()+n.substr(1);window.CustomEvent&&!q&&!Ot?E=new CustomEvent(n,{bubbles:!0,cancelable:!0}):(E=document.createEvent("Event"),E.initEvent(n,!0,!0)),E.to=a||e,E.from=l||e,E.item=i||e,E.clone=r,E.oldIndex=s,E.newIndex=u,E.oldDraggableIndex=d,E.newDraggableIndex=c,E.originalEvent=m,E.pullMode=w?w.lastPutMode:void 0;var I=K(K({},v),Tt.getEventProperties(n,t));for(var Y in I)E[Y]=I[Y];e&&e.dispatchEvent(E),X[j]&&X[j].call(t,E)}}var ze=["evt"],N=function(t,e){var n=arguments.length>2&&arguments[2]!==void 0?arguments[2]:{},i=n.evt,r=ke(n,ze);Tt.pluginEvent.bind(p)(t,e,K({dragEl:f,parentEl:_,ghostEl:g,rootEl:S,nextEl:at,lastDownEl:Ft,cloneEl:D,cloneHidden:J,dragStarted:bt,putSortable:T,activeSortable:p.active,originalEvent:i,oldIndex:ft,oldDraggableIndex:Dt,newIndex:R,newDraggableIndex:Q,hideGhostForTarget:Te,unhideGhostForTarget:Ae,cloneNowHidden:function(){J=!0},cloneNowShown:function(){J=!1},dispatchSortableEvent:function(l){x({sortable:e,name:l,originalEvent:i})}},r))};function x(o){je(K({putSortable:T,cloneEl:D,targetEl:f,rootEl:S,oldIndex:ft,oldDraggableIndex:Dt,newIndex:R,newDraggableIndex:Q},o))}var f,_,g,S,at,Ft,D,J,ft,R,Dt,Q,It,T,ut=!1,Yt=!1,Bt=[],it,B,zt,$t,de,he,bt,st,_t,Ct=!1,xt=!1,Rt,A,Ut=[],Jt=!1,Gt=[],Wt=typeof document<"u",Nt=me,pe=Ot||q?"cssFloat":"float",$e=Wt&&!ve&&!me&&"draggable"in document.createElement("div"),_e=function(){if(Wt){if(q)return!1;var o=document.createElement("x");return o.style.cssText="pointer-events:auto",o.style.pointerEvents==="auto"}}(),Ce=function(t,e){var n=h(t),i=parseInt(n.width)-parseInt(n.paddingLeft)-parseInt(n.paddingRight)-parseInt(n.borderLeftWidth)-parseInt(n.borderRightWidth),r=dt(t,0,e),a=dt(t,1,e),l=r&&h(r),s=a&&h(a),u=l&&parseInt(l.marginLeft)+parseInt(l.marginRight)+O(r).width,d=s&&parseInt(s.marginLeft)+parseInt(s.marginRight)+O(a).width;if(n.display==="flex")return n.flexDirection==="column"||n.flexDirection==="column-reverse"?"vertical":"horizontal";if(n.display==="grid")return n.gridTemplateColumns.split(" ").length<=1?"vertical":"horizontal";if(r&&l.float&&l.float!=="none"){var c=l.float==="left"?"left":"right";return a&&(s.clear==="both"||s.clear===c)?"vertical":"horizontal"}return r&&(l.display==="block"||l.display==="flex"||l.display==="table"||l.display==="grid"||u>=i&&n[pe]==="none"||a&&n[pe]==="none"&&u+d>i)?"vertical":"horizontal"},Ue=function(t,e,n){var i=n?t.left:t.top,r=n?t.right:t.bottom,a=n?t.width:t.height,l=n?e.left:e.top,s=n?e.right:e.bottom,u=n?e.width:e.height;return i===l||r===s||i+a/2===l+u/2},qe=function(t,e){var n;return Bt.some(function(i){var r=i[k].options.emptyInsertThreshold;if(!(!r||oe(i))){var a=O(i),l=t>=a.left-r&&t<=a.right+r,s=e>=a.top-r&&e<=a.bottom+r;if(l&&s)return n=i}}),n},Oe=function(t){function e(r,a){return function(l,s,u,d){var c=l.options.group.name&&s.options.group.name&&l.options.group.name===s.options.group.name;if(r==null&&(a||c))return!0;if(r==null||r===!1)return!1;if(a&&r==="clone")return r;if(typeof r=="function")return e(r(l,s,u,d),a)(l,s,u,d);var m=(a?l:s).options.group.name;return r===!0||typeof r=="string"&&r===m||r.join&&r.indexOf(m)>-1}}var n={},i=t.group;(!i||Pt(i)!="object")&&(i={name:i}),n.name=i.name,n.checkPull=e(i.pull,!0),n.checkPut=e(i.put),n.revertClone=i.revertClone,t.group=n},Te=function(){!_e&&g&&h(g,"display","none")},Ae=function(){!_e&&g&&h(g,"display","")};Wt&&!ve&&document.addEventListener("click",function(o){if(Yt)return o.preventDefault(),o.stopPropagation&&o.stopPropagation(),o.stopImmediatePropagation&&o.stopImmediatePropagation(),Yt=!1,!1},!0);var rt=function(t){if(f){t=t.touches?t.touches[0]:t;var e=qe(t.clientX,t.clientY);if(e){var n={};for(var i in t)t.hasOwnProperty(i)&&(n[i]=t[i]);n.target=n.rootEl=e,n.preventDefault=void 0,n.stopPropagation=void 0,e[k]._onDragOver(n)}}},Ve=function(t){f&&f.parentNode[k]._isOutsideThisEl(t.target)};function p(o,t){if(!(o&&o.nodeType&&o.nodeType===1))throw"Sortable: `el` must be an HTMLElement, not ".concat({}.toString.call(o));this.el=o,this.options=t=U({},t),o[k]=this;var e={group:null,sort:!0,disabled:!1,store:null,handle:null,draggable:/^[uo]l$/i.test(o.nodeName)?">li":">*",swapThreshold:1,invertSwap:!1,invertedSwapThreshold:null,removeCloneOnHide:!0,direction:function(){return Ce(o,this.options)},ghostClass:"sortable-ghost",chosenClass:"sortable-chosen",dragClass:"sortable-drag",ignore:"a, img",filter:null,preventOnFilter:!0,animation:0,easing:null,setData:function(a,l){a.setData("Text",l.textContent)},dropBubble:!1,dragoverBubble:!1,dataIdAttr:"data-id",delay:0,delayOnTouchOnly:!1,touchStartThreshold:(Number.parseInt?Number:window).parseInt(window.devicePixelRatio,10)||1,forceFallback:!1,fallbackClass:"sortable-fallback",fallbackOnBody:!1,fallbackTolerance:0,fallbackOffset:{x:0,y:0},supportPointer:p.supportPointer!==!1&&"PointerEvent"in window&&!Et,emptyInsertThreshold:5};Tt.initializePlugins(this,o,e);for(var n in e)!(n in t)&&(t[n]=e[n]);Oe(t);for(var i in this)i.charAt(0)==="_"&&typeof this[i]=="function"&&(this[i]=this[i].bind(this));this.nativeDraggable=t.forceFallback?!1:$e,this.nativeDraggable&&(this.options.touchStartThreshold=1),t.supportPointer?y(o,"pointerdown",this._onTapStart):(y(o,"mousedown",this._onTapStart),y(o,"touchstart",this._onTapStart)),this.nativeDraggable&&(y(o,"dragover",this),y(o,"dragenter",this)),Bt.push(this.el),t.store&&t.store.get&&this.sort(t.store.get(this)||[]),U(this,Le())}p.prototype={constructor:p,_isOutsideThisEl:function(t){!this.el.contains(t)&&t!==this.el&&(st=null)},_getDirection:function(t,e){return typeof this.options.direction=="function"?this.options.direction.call(this,t,e,f):this.options.direction},_onTapStart:function(t){if(t.cancelable){var e=this,n=this.el,i=this.options,r=i.preventOnFilter,a=t.type,l=t.touches&&t.touches[0]||t.pointerType&&t.pointerType==="touch"&&t,s=(l||t).target,u=t.target.shadowRoot&&(t.path&&t.path[0]||t.composedPath&&t.composedPath()[0])||s,d=i.filter;if(rn(n),!f&&!(/mousedown|pointerdown/.test(a)&&t.button!==0||i.disabled)&&!u.isContentEditable&&!(!this.nativeDraggable&&Et&&s&&s.tagName.toUpperCase()==="SELECT")&&(s=G(s,i.draggable,n,!1),!(s&&s.animated)&&Ft!==s)){if(ft=H(s),Dt=H(s,i.draggable),typeof d=="function"){if(d.call(this,t,s,this)){x({sortable:e,rootEl:u,name:"filter",targetEl:s,toEl:n,fromEl:n}),N("filter",e,{evt:t}),r&&t.cancelable&&t.preventDefault();return}}else if(d&&(d=d.split(",").some(function(c){if(c=G(u,c.trim(),n,!1),c)return x({sortable:e,rootEl:c,name:"filter",targetEl:s,fromEl:n,toEl:n}),N("filter",e,{evt:t}),!0}),d)){r&&t.cancelable&&t.preventDefault();return}i.handle&&!G(u,i.handle,n,!1)||this._prepareDragStart(t,l,s)}}},_prepareDragStart:function(t,e,n){var i=this,r=i.el,a=i.options,l=r.ownerDocument,s;if(n&&!f&&n.parentNode===r){var u=O(n);if(S=r,f=n,_=f.parentNode,at=f.nextSibling,Ft=n,It=a.group,p.dragged=f,it={target:f,clientX:(e||t).clientX,clientY:(e||t).clientY},de=it.clientX-u.left,he=it.clientY-u.top,this._lastX=(e||t).clientX,this._lastY=(e||t).clientY,f.style["will-change"]="all",s=function(){if(N("delayEnded",i,{evt:t}),p.eventCanceled){i._onDrop();return}i._disableDelayedDragEvents(),!se&&i.nativeDraggable&&(f.draggable=!0),i._triggerDragStart(t,e),x({sortable:i,name:"choose",originalEvent:t}),F(f,a.chosenClass,!0)},a.ignore.split(",").forEach(function(d){ye(f,d.trim(),qt)}),y(l,"dragover",rt),y(l,"mousemove",rt),y(l,"touchmove",rt),y(l,"mouseup",i._onDrop),y(l,"touchend",i._onDrop),y(l,"touchcancel",i._onDrop),se&&this.nativeDraggable&&(this.options.touchStartThreshold=4,f.draggable=!0),N("delayStart",this,{evt:t}),a.delay&&(!a.delayOnTouchOnly||e)&&(!this.nativeDraggable||!(Ot||q))){if(p.eventCanceled){this._onDrop();return}y(l,"mouseup",i._disableDelayedDrag),y(l,"touchend",i._disableDelayedDrag),y(l,"touchcancel",i._disableDelayedDrag),y(l,"mousemove",i._delayedDragTouchMoveHandler),y(l,"touchmove",i._delayedDragTouchMoveHandler),a.supportPointer&&y(l,"pointermove",i._delayedDragTouchMoveHandler),i._dragStartTimer=setTimeout(s,a.delay)}else s()}},_delayedDragTouchMoveHandler:function(t){var e=t.touches?t.touches[0]:t;Math.max(Math.abs(e.clientX-this._lastX),Math.abs(e.clientY-this._lastY))>=Math.floor(this.options.touchStartThreshold/(this.nativeDraggable&&window.devicePixelRatio||1))&&this._disableDelayedDrag()},_disableDelayedDrag:function(){f&&qt(f),clearTimeout(this._dragStartTimer),this._disableDelayedDragEvents()},_disableDelayedDragEvents:function(){var t=this.el.ownerDocument;b(t,"mouseup",this._disableDelayedDrag),b(t,"touchend",this._disableDelayedDrag),b(t,"touchcancel",this._disableDelayedDrag),b(t,"mousemove",this._delayedDragTouchMoveHandler),b(t,"touchmove",this._delayedDragTouchMoveHandler),b(t,"pointermove",this._delayedDragTouchMoveHandler)},_triggerDragStart:function(t,e){e=e||t.pointerType=="touch"&&t,!this.nativeDraggable||e?this.options.supportPointer?y(document,"pointermove",this._onTouchMove):e?y(document,"touchmove",this._onTouchMove):y(document,"mousemove",this._onTouchMove):(y(f,"dragend",this),y(S,"dragstart",this._onDragStart));try{document.selection?kt(function(){document.selection.empty()}):window.getSelection().removeAllRanges()}catch{}},_dragStarted:function(t,e){if(ut=!1,S&&f){N("dragStarted",this,{evt:e}),this.nativeDraggable&&y(document,"dragover",Ve);var n=this.options;!t&&F(f,n.dragClass,!1),F(f,n.ghostClass,!0),p.active=this,t&&this._appendGhost(),x({sortable:this,name:"start",originalEvent:e})}else this._nulling()},_emulateDragOver:function(){if(B){this._lastX=B.clientX,this._lastY=B.clientY,Te();for(var t=document.elementFromPoint(B.clientX,B.clientY),e=t;t&&t.shadowRoot&&(t=t.shadowRoot.elementFromPoint(B.clientX,B.clientY),t!==e);)e=t;if(f.parentNode[k]._isOutsideThisEl(t),e)do{if(e[k]){var n=void 0;if(n=e[k]._onDragOver({clientX:B.clientX,clientY:B.clientY,target:t,rootEl:e}),n&&!this.options.dragoverBubble)break}t=e}while(e=e.parentNode);Ae()}},_onTouchMove:function(t){if(it){var e=this.options,n=e.fallbackTolerance,i=e.fallbackOffset,r=t.touches?t.touches[0]:t,a=g&&ct(g,!0),l=g&&a&&a.a,s=g&&a&&a.d,u=Nt&&A&&ce(A),d=(r.clientX-it.clientX+i.x)/(l||1)+(u?u[0]-Ut[0]:0)/(l||1),c=(r.clientY-it.clientY+i.y)/(s||1)+(u?u[1]-Ut[1]:0)/(s||1);if(!p.active&&!ut){if(n&&Math.max(Math.abs(r.clientX-this._lastX),Math.abs(r.clientY-this._lastY))<n)return;this._onDragStart(t,!0)}if(g){a?(a.e+=d-(zt||0),a.f+=c-($t||0)):a={a:1,b:0,c:0,d:1,e:d,f:c};var m="matrix(".concat(a.a,",").concat(a.b,",").concat(a.c,",").concat(a.d,",").concat(a.e,",").concat(a.f,")");h(g,"webkitTransform",m),h(g,"mozTransform",m),h(g,"msTransform",m),h(g,"transform",m),zt=d,$t=c,B=r}t.cancelable&&t.preventDefault()}},_appendGhost:function(){if(!g){var t=this.options.fallbackOnBody?document.body:S,e=O(f,!0,Nt,!0,t),n=this.options;if(Nt){for(A=t;h(A,"position")==="static"&&h(A,"transform")==="none"&&A!==document;)A=A.parentNode;A!==document.body&&A!==document.documentElement?(A===document&&(A=W()),e.top+=A.scrollTop,e.left+=A.scrollLeft):A=W(),Ut=ce(A)}g=f.cloneNode(!0),F(g,n.ghostClass,!1),F(g,n.fallbackClass,!0),F(g,n.dragClass,!0),h(g,"transition",""),h(g,"transform",""),h(g,"box-sizing","border-box"),h(g,"margin",0),h(g,"top",e.top),h(g,"left",e.left),h(g,"width",e.width),h(g,"height",e.height),h(g,"opacity","0.8"),h(g,"position",Nt?"absolute":"fixed"),h(g,"zIndex","100000"),h(g,"pointerEvents","none"),p.ghost=g,t.appendChild(g),h(g,"transform-origin",de/parseInt(g.style.width)*100+"% "+he/parseInt(g.style.height)*100+"%")}},_onDragStart:function(t,e){var n=this,i=t.dataTransfer,r=n.options;if(N("dragStart",this,{evt:t}),p.eventCanceled){this._onDrop();return}N("setupClone",this),p.eventCanceled||(D=Se(f),D.removeAttribute("id"),D.draggable=!1,D.style["will-change"]="",this._hideClone(),F(D,this.options.chosenClass,!1),p.clone=D),n.cloneId=kt(function(){N("clone",n),!p.eventCanceled&&(n.options.removeCloneOnHide||S.insertBefore(D,f),n._hideClone(),x({sortable:n,name:"clone"}))}),!e&&F(f,r.dragClass,!0),e?(Yt=!0,n._loopId=setInterval(n._emulateDragOver,50)):(b(document,"mouseup",n._onDrop),b(document,"touchend",n._onDrop),b(document,"touchcancel",n._onDrop),i&&(i.effectAllowed="move",r.setData&&r.setData.call(n,i,f)),y(document,"drop",n),h(f,"transform","translateZ(0)")),ut=!0,n._dragStartId=kt(n._dragStarted.bind(n,e,t)),y(document,"selectstart",n),bt=!0,Et&&h(document.body,"user-select","none")},_onDragOver:function(t){var e=this.el,n=t.target,i,r,a,l=this.options,s=l.group,u=p.active,d=It===s,c=l.sort,m=T||u,w,v=this,E=!1;if(Jt)return;function X(vt,Me){N(vt,v,K({evt:t,isOwner:d,axis:w?"vertical":"horizontal",revert:a,dragRect:i,targetRect:r,canSort:c,fromSortable:m,target:n,completed:I,onMove:function(ae,Pe){return Mt(S,e,f,i,ae,O(ae),t,Pe)},changed:Y},Me))}function j(){X("dragOverAnimationCapture"),v.captureAnimationState(),v!==m&&m.captureAnimationState()}function I(vt){return X("dragOverCompleted",{insertion:vt}),vt&&(d?u._hideClone():u._showClone(v),v!==m&&(F(f,T?T.options.ghostClass:u.options.ghostClass,!1),F(f,l.ghostClass,!0)),T!==v&&v!==p.active?T=v:v===p.active&&T&&(T=null),m===v&&(v._ignoreWhileAnimating=n),v.animateAll(function(){X("dragOverAnimationComplete"),v._ignoreWhileAnimating=null}),v!==m&&(m.animateAll(),m._ignoreWhileAnimating=null)),(n===f&&!f.animated||n===e&&!n.animated)&&(st=null),!l.dragoverBubble&&!t.rootEl&&n!==document&&(f.parentNode[k]._isOutsideThisEl(t.target),!vt&&rt(t)),!l.dragoverBubble&&t.stopPropagation&&t.stopPropagation(),E=!0}function Y(){R=H(f),Q=H(f,l.draggable),x({sortable:v,name:"change",toEl:e,newIndex:R,newDraggableIndex:Q,originalEvent:t})}if(t.preventDefault!==void 0&&t.cancelable&&t.preventDefault(),n=G(n,l.draggable,e,!0),X("dragOver"),p.eventCanceled)return E;if(f.contains(t.target)||n.animated&&n.animatingX&&n.animatingY||v._ignoreWhileAnimating===n)return I(!1);if(Yt=!1,u&&!l.disabled&&(d?c||(a=_!==S):T===this||(this.lastPutMode=It.checkPull(this,u,f,t))&&s.checkPut(this,u,f,t))){if(w=this._getDirection(t,n)==="vertical",i=O(f),X("dragOverValid"),p.eventCanceled)return E;if(a)return _=S,j(),this._hideClone(),X("revert"),p.eventCanceled||(at?S.insertBefore(f,at):S.appendChild(f)),I(!0);var M=oe(e,l.draggable);if(!M||tn(t,w,this)&&!M.animated){if(M===f)return I(!1);if(M&&e===t.target&&(n=M),n&&(r=O(n)),Mt(S,e,f,i,n,r,t,!!n)!==!1)return j(),M&&M.nextSibling?e.insertBefore(f,M.nextSibling):e.appendChild(f),_=e,Y(),I(!0)}else if(M&&Je(t,w,this)){var et=dt(e,0,l,!0);if(et===f)return I(!1);if(n=et,r=O(n),Mt(S,e,f,i,n,r,t,!1)!==!1)return j(),e.insertBefore(f,et),_=e,Y(),I(!0)}else if(n.parentNode===e){r=O(n);var L=0,nt,ht=f.parentNode!==e,P=!Ue(f.animated&&f.toRect||i,n.animated&&n.toRect||r,w),pt=w?"top":"left",V=fe(n,"top","top")||fe(f,"top","top"),gt=V?V.scrollTop:void 0;st!==n&&(nt=r[pt],Ct=!1,xt=!P&&l.invertSwap||ht),L=en(t,n,r,w,P?1:l.swapThreshold,l.invertedSwapThreshold==null?l.swapThreshold:l.invertedSwapThreshold,xt,st===n);var z;if(L!==0){var ot=H(f);do ot-=L,z=_.children[ot];while(z&&(h(z,"display")==="none"||z===g))}if(L===0||z===n)return I(!1);st=n,_t=L;var mt=n.nextElementSibling,Z=!1;Z=L===1;var At=Mt(S,e,f,i,n,r,t,Z);if(At!==!1)return(At===1||At===-1)&&(Z=At===1),Jt=!0,setTimeout(Qe,30),j(),Z&&!mt?e.appendChild(f):n.parentNode.insertBefore(f,Z?mt:n),V&&Ee(V,0,gt-V.scrollTop),_=f.parentNode,nt!==void 0&&!xt&&(Rt=Math.abs(nt-O(n)[pt])),Y(),I(!0)}if(e.contains(f))return I(!1)}return!1},_ignoreWhileAnimating:null,_offMoveEvents:function(){b(document,"mousemove",this._onTouchMove),b(document,"touchmove",this._onTouchMove),b(document,"pointermove",this._onTouchMove),b(document,"dragover",rt),b(document,"mousemove",rt),b(document,"touchmove",rt)},_offUpEvents:function(){var t=this.el.ownerDocument;b(t,"mouseup",this._onDrop),b(t,"touchend",this._onDrop),b(t,"pointerup",this._onDrop),b(t,"touchcancel",this._onDrop),b(document,"selectstart",this)},_onDrop:function(t){var e=this.el,n=this.options;if(R=H(f),Q=H(f,n.draggable),N("drop",this,{evt:t}),_=f&&f.parentNode,R=H(f),Q=H(f,n.draggable),p.eventCanceled){this._nulling();return}ut=!1,xt=!1,Ct=!1,clearInterval(this._loopId),clearTimeout(this._dragStartTimer),te(this.cloneId),te(this._dragStartId),this.nativeDraggable&&(b(document,"drop",this),b(e,"dragstart",this._onDragStart)),this._offMoveEvents(),this._offUpEvents(),Et&&h(document.body,"user-select",""),h(f,"transform",""),t&&(bt&&(t.cancelable&&t.preventDefault(),!n.dropBubble&&t.stopPropagation()),g&&g.parentNode&&g.parentNode.removeChild(g),(S===_||T&&T.lastPutMode!=="clone")&&D&&D.parentNode&&D.parentNode.removeChild(D),f&&(this.nativeDraggable&&b(f,"dragend",this),qt(f),f.style["will-change"]="",bt&&!ut&&F(f,T?T.options.ghostClass:this.options.ghostClass,!1),F(f,this.options.chosenClass,!1),x({sortable:this,name:"unchoose",toEl:_,newIndex:null,newDraggableIndex:null,originalEvent:t}),S!==_?(R>=0&&(x({rootEl:_,name:"add",toEl:_,fromEl:S,originalEvent:t}),x({sortable:this,name:"remove",toEl:_,originalEvent:t}),x({rootEl:_,name:"sort",toEl:_,fromEl:S,originalEvent:t}),x({sortable:this,name:"sort",toEl:_,originalEvent:t})),T&&T.save()):R!==ft&&R>=0&&(x({sortable:this,name:"update",toEl:_,originalEvent:t}),x({sortable:this,name:"sort",toEl:_,originalEvent:t})),p.active&&((R==null||R===-1)&&(R=ft,Q=Dt),x({sortable:this,name:"end",toEl:_,originalEvent:t}),this.save()))),this._nulling()},_nulling:function(){N("nulling",this),S=f=_=g=at=D=Ft=J=it=B=bt=R=Q=ft=Dt=st=_t=T=It=p.dragged=p.ghost=p.clone=p.active=null,Gt.forEach(function(t){t.checked=!0}),Gt.length=zt=$t=0},handleEvent:function(t){switch(t.type){case"drop":case"dragend":this._onDrop(t);break;case"dragenter":case"dragover":f&&(this._onDragOver(t),Ze(t));break;case"selectstart":t.preventDefault();break}},toArray:function(){for(var t=[],e,n=this.el.children,i=0,r=n.length,a=this.options;i<r;i++)e=n[i],G(e,a.draggable,this.el,!1)&&t.push(e.getAttribute(a.dataIdAttr)||on(e));return t},sort:function(t,e){var n={},i=this.el;this.toArray().forEach(function(r,a){var l=i.children[a];G(l,this.options.draggable,i,!1)&&(n[r]=l)},this),e&&this.captureAnimationState(),t.forEach(function(r){n[r]&&(i.removeChild(n[r]),i.appendChild(n[r]))}),e&&this.animateAll()},save:function(){var t=this.options.store;t&&t.set&&t.set(this)},closest:function(t,e){return G(t,e||this.options.draggable,this.el,!1)},option:function(t,e){var n=this.options;if(e===void 0)return n[t];var i=Tt.modifyOption(this,t,e);typeof i<"u"?n[t]=i:n[t]=e,t==="group"&&Oe(n)},destroy:function(){N("destroy",this);var t=this.el;t[k]=null,b(t,"mousedown",this._onTapStart),b(t,"touchstart",this._onTapStart),b(t,"pointerdown",this._onTapStart),this.nativeDraggable&&(b(t,"dragover",this),b(t,"dragenter",this)),Array.prototype.forEach.call(t.querySelectorAll("[draggable]"),function(e){e.removeAttribute("draggable")}),this._onDrop(),this._disableDelayedDragEvents(),Bt.splice(Bt.indexOf(this.el),1),this.el=t=null},_hideClone:function(){if(!J){if(N("hideClone",this),p.eventCanceled)return;h(D,"display","none"),this.options.removeCloneOnHide&&D.parentNode&&D.parentNode.removeChild(D),J=!0}},_showClone:function(t){if(t.lastPutMode!=="clone"){this._hideClone();return}if(J){if(N("showClone",this),p.eventCanceled)return;f.parentNode==S&&!this.options.group.revertClone?S.insertBefore(D,f):at?S.insertBefore(D,at):S.appendChild(D),this.options.group.revertClone&&this.animate(f,D),h(D,"display",""),J=!1}}};function Ze(o){o.dataTransfer&&(o.dataTransfer.dropEffect="move"),o.cancelable&&o.preventDefault()}function Mt(o,t,e,n,i,r,a,l){var s,u=o[k],d=u.options.onMove,c;return window.CustomEvent&&!q&&!Ot?s=new CustomEvent("move",{bubbles:!0,cancelable:!0}):(s=document.createEvent("Event"),s.initEvent("move",!0,!0)),s.to=t,s.from=o,s.dragged=e,s.draggedRect=n,s.related=i||t,s.relatedRect=r||O(t),s.willInsertAfter=l,s.originalEvent=a,o.dispatchEvent(s),d&&(c=d.call(u,s,a)),c}function qt(o){o.draggable=!1}function Qe(){Jt=!1}function Je(o,t,e){var n=O(dt(e.el,0,e.options,!0)),i=De(e.el,e.options,g),r=10;return t?o.clientX<i.left-r||o.clientY<n.top&&o.clientX<n.right:o.clientY<i.top-r||o.clientY<n.bottom&&o.clientX<n.left}function tn(o,t,e){var n=O(oe(e.el,e.options.draggable)),i=De(e.el,e.options,g),r=10;return t?o.clientX>i.right+r||o.clientY>n.bottom&&o.clientX>n.left:o.clientY>i.bottom+r||o.clientX>n.right&&o.clientY>n.top}function en(o,t,e,n,i,r,a,l){var s=n?o.clientY:o.clientX,u=n?e.height:e.width,d=n?e.top:e.left,c=n?e.bottom:e.right,m=!1;if(!a){if(l&&Rt<u*i){if(!Ct&&(_t===1?s>d+u*r/2:s<c-u*r/2)&&(Ct=!0),Ct)m=!0;else if(_t===1?s<d+Rt:s>c-Rt)return-_t}else if(s>d+u*(1-i)/2&&s<c-u*(1-i)/2)return nn(t)}return m=m||a,m&&(s<d+u*r/2||s>c-u*r/2)?s>d+u/2?1:-1:0}function nn(o){return H(f)<H(o)?1:-1}function on(o){for(var t=o.tagName+o.className+o.src+o.href+o.textContent,e=t.length,n=0;e--;)n+=t.charCodeAt(e);return n.toString(36)}function rn(o){Gt.length=0;for(var t=o.getElementsByTagName("input"),e=t.length;e--;){var n=t[e];n.checked&&Gt.push(n)}}function kt(o){return setTimeout(o,0)}function te(o){return clearTimeout(o)}Wt&&y(document,"touchmove",function(o){(p.active||ut)&&o.cancelable&&o.preventDefault()});p.utils={on:y,off:b,css:h,find:ye,is:function(t,e){return!!G(t,e,t,!1)},extend:Be,throttle:we,closest:G,toggleClass:F,clone:Se,index:H,nextTick:kt,cancelNextTick:te,detectDirection:Ce,getChild:dt};p.get=function(o){return o[k]};p.mount=function(){for(var o=arguments.length,t=new Array(o),e=0;e<o;e++)t[e]=arguments[e];t[0].constructor===Array&&(t=t[0]),t.forEach(function(n){if(!n.prototype||!n.prototype.constructor)throw"Sortable: Mounted plugin must be a constructor function, not ".concat({}.toString.call(n));n.utils&&(p.utils=K(K({},p.utils),n.utils)),Tt.mount(n)})};p.create=function(o,t){return new p(o,t)};p.version=He;var C=[],yt,ee,ne=!1,Vt,Zt,Lt,wt;function an(){function o(){this.defaults={scroll:!0,forceAutoScrollFallback:!1,scrollSensitivity:30,scrollSpeed:10,bubbleScroll:!0};for(var t in this)t.charAt(0)==="_"&&typeof this[t]=="function"&&(this[t]=this[t].bind(this))}return o.prototype={dragStarted:function(e){var n=e.originalEvent;this.sortable.nativeDraggable?y(document,"dragover",this._handleAutoScroll):this.options.supportPointer?y(document,"pointermove",this._handleFallbackAutoScroll):n.touches?y(document,"touchmove",this._handleFallbackAutoScroll):y(document,"mousemove",this._handleFallbackAutoScroll)},dragOverCompleted:function(e){var n=e.originalEvent;!this.options.dragOverBubble&&!n.rootEl&&this._handleAutoScroll(n)},drop:function(){this.sortable.nativeDraggable?b(document,"dragover",this._handleAutoScroll):(b(document,"pointermove",this._handleFallbackAutoScroll),b(document,"touchmove",this._handleFallbackAutoScroll),b(document,"mousemove",this._handleFallbackAutoScroll)),ge(),Ht(),Ge()},nulling:function(){Lt=ee=yt=ne=wt=Vt=Zt=null,C.length=0},_handleFallbackAutoScroll:function(e){this._handleAutoScroll(e,!0)},_handleAutoScroll:function(e,n){var i=this,r=(e.touches?e.touches[0]:e).clientX,a=(e.touches?e.touches[0]:e).clientY,l=document.elementFromPoint(r,a);if(Lt=e,n||this.options.forceAutoScrollFallback||Ot||q||Et){Qt(e,this.options,l,n);var s=tt(l,!0);ne&&(!wt||r!==Vt||a!==Zt)&&(wt&&ge(),wt=setInterval(function(){var u=tt(document.elementFromPoint(r,a),!0);u!==s&&(s=u,Ht()),Qt(e,i.options,u,n)},10),Vt=r,Zt=a)}else{if(!this.options.bubbleScroll||tt(l,!0)===W()){Ht();return}Qt(e,this.options,tt(l,!1),!1)}}},U(o,{pluginName:"scroll",initializeByDefault:!0})}function Ht(){C.forEach(function(o){clearInterval(o.pid)}),C=[]}function ge(){clearInterval(wt)}var Qt=we(function(o,t,e,n){if(t.scroll){var i=(o.touches?o.touches[0]:o).clientX,r=(o.touches?o.touches[0]:o).clientY,a=t.scrollSensitivity,l=t.scrollSpeed,s=W(),u=!1,d;ee!==e&&(ee=e,Ht(),yt=t.scroll,d=t.scrollFn,yt===!0&&(yt=tt(e,!0)));var c=0,m=yt;do{var w=m,v=O(w),E=v.top,X=v.bottom,j=v.left,I=v.right,Y=v.width,M=v.height,et=void 0,L=void 0,nt=w.scrollWidth,ht=w.scrollHeight,P=h(w),pt=w.scrollLeft,V=w.scrollTop;w===s?(et=Y<nt&&(P.overflowX==="auto"||P.overflowX==="scroll"||P.overflowX==="visible"),L=M<ht&&(P.overflowY==="auto"||P.overflowY==="scroll"||P.overflowY==="visible")):(et=Y<nt&&(P.overflowX==="auto"||P.overflowX==="scroll"),L=M<ht&&(P.overflowY==="auto"||P.overflowY==="scroll"));var gt=et&&(Math.abs(I-i)<=a&&pt+Y<nt)-(Math.abs(j-i)<=a&&!!pt),z=L&&(Math.abs(X-r)<=a&&V+M<ht)-(Math.abs(E-r)<=a&&!!V);if(!C[c])for(var ot=0;ot<=c;ot++)C[ot]||(C[ot]={});(C[c].vx!=gt||C[c].vy!=z||C[c].el!==w)&&(C[c].el=w,C[c].vx=gt,C[c].vy=z,clearInterval(C[c].pid),(gt!=0||z!=0)&&(u=!0,C[c].pid=setInterval(function(){n&&this.layer===0&&p.active._onTouchMove(Lt);var mt=C[this.layer].vy?C[this.layer].vy*l:0,Z=C[this.layer].vx?C[this.layer].vx*l:0;typeof d=="function"&&d.call(p.dragged.parentNode[k],Z,mt,o,Lt,C[this.layer].el)!=="continue"||Ee(C[this.layer].el,Z,mt)}.bind({layer:c}),24))),c++}while(t.bubbleScroll&&m!==s&&(m=tt(m,!1)));ne=u}},30),Ie=function(t){var e=t.originalEvent,n=t.putSortable,i=t.dragEl,r=t.activeSortable,a=t.dispatchSortableEvent,l=t.hideGhostForTarget,s=t.unhideGhostForTarget;if(e){var u=n||r;l();var d=e.changedTouches&&e.changedTouches.length?e.changedTouches[0]:e,c=document.elementFromPoint(d.clientX,d.clientY);s(),u&&!u.el.contains(c)&&(a("spill"),this.onSpill({dragEl:i,putSortable:n}))}};function ie(){}ie.prototype={startIndex:null,dragStart:function(t){var e=t.oldDraggableIndex;this.startIndex=e},onSpill:function(t){var e=t.dragEl,n=t.putSortable;this.sortable.captureAnimationState(),n&&n.captureAnimationState();var i=dt(this.sortable.el,this.startIndex,this.options);i?this.sortable.el.insertBefore(e,i):this.sortable.el.appendChild(e),this.sortable.animateAll(),n&&n.animateAll()},drop:Ie};U(ie,{pluginName:"revertOnSpill"});function re(){}re.prototype={onSpill:function(t){var e=t.dragEl,n=t.putSortable,i=n||this.sortable;i.captureAnimationState(),e.parentNode&&e.parentNode.removeChild(e),i.animateAll()},drop:Ie};U(re,{pluginName:"removeOnSpill"});p.mount(new an);p.mount(re,ie);var xe=p;function Ne(o){o.directive("sort",(t,{value:e,modifiers:n,expression:i},{effect:r,evaluate:a,evaluateLater:l,cleanup:s})=>{if(e==="config"||e==="handle"||e==="group")return;if(e==="key"||e==="item"){if([void 0,null,""].includes(i))return;t._x_sort_key=a(i);return}let u={hideGhost:!n.includes("ghost"),useHandles:!!t.querySelector("[x-sort\\:handle]"),group:cn(t,n)},d=ln(i,l),c=sn(t,n,a),m=un(t,c,u,(w,v)=>{d(w,v)});s(()=>m.destroy())})}function ln(o,t){if([void 0,null,""].includes(o))return()=>{};let e=t(o);return(n,i)=>{Alpine.dontAutoEvaluateFunctions(()=>{e(r=>{typeof r=="function"&&r(n,i)},{scope:{$key:n,$item:n,$position:i}})})}}function sn(o,t,e){return o.hasAttribute("x-sort:config")?e(o.getAttribute("x-sort:config")):{}}function un(o,t,e,n){let i,r={animation:150,handle:e.useHandles?"[x-sort\\:handle]":null,group:e.group,filter(a){return o.querySelector("[x-sort\\:item]")?!a.target.closest("[x-sort\\:item]"):!1},onSort(a){if(a.from!==a.to&&a.to!==a.target)return;let l=a.item._x_sort_key,s=a.newIndex;(l!==void 0||l!==null)&&n(l,s)},onStart(){document.body.classList.add("sorting"),i=document.querySelector(".sortable-ghost"),e.hideGhost&&i&&(i.style.opacity="0")},onEnd(){document.body.classList.remove("sorting"),e.hideGhost&&i&&(i.style.opacity="1"),i=void 0,fn(o)}};return new xe(o,{...r,...t})}function fn(o){let t=o.firstChild;for(;t.nextSibling;){if(t.textContent.trim()==="[if ENDBLOCK]><![endif]"){o.append(t);break}t=t.nextSibling}}function cn(o,t){return o.hasAttribute("x-sort:group")?o.getAttribute("x-sort:group"):t.indexOf("group")!==-1?t[t.indexOf("group")+1]:null}document.addEventListener("alpine:init",()=>{window.Alpine.plugin(Ne)});})();
+/*! Bundled license information:
+
+sortablejs/modular/sortable.esm.js:
+  (**!
+   * Sortable 1.15.2
+   * @author	RubaXa   <[e-mail]>
+   * @author	owenm    <[e-mail]>
+   * @license MIT
+   *)
+*/

src/static/style.css

···
 :root {
+    --color-alert: #aa0000;
     --color-background: #fff;
     --color-background-secondary: #eee;
     --color-border: #bbb;
···
     font-weight: inherit;
 }
 
+h2 {
+    font-size: 1.3em;
+    font-weight: 500;
+}
+
 header .tagline {
     font-style: italic;
     display: inline-block;
···
     color: white;
 }
 
-link-item .detail {
+link-item link-item-detail {
     color: white;
     display: block;
     font-size: 0.75em;
···
 link-item:not(.static):hover {
     transform: scale(1.05);
 
-    & .detail {
+    & link-item-detail {
         opacity: 1;
     }
 }
···
     color: inherit;
     display: block;
     text-decoration: none;
+}
+
+.alert {
+    color: var(--color-alert);
 }
 
 .caption {
···
     width: 100%;
 }
 
+button,
+input[type="submit"] {
+    font-weight: 600;
+    cursor: pointer;
+}
+
+input[type="submit"]:last-child {
+    margin-top: 1em;
+}
+
 label:has(input) {
     display: block;
-    margin-top: 0.5em;
+    margin-top: 0.25em;
 }
 
 label:has(input):has(span) input {
     display: block;
-    margin-top: 4px;
 }
 
 label:has(input):has(span) span {
···
 link-editor-item {
     display: block;
     margin-top: 1em;
-    margin-left: -0.5em;
-    margin-right: -0.5em;
-    padding: 0.5em;
+    margin-left: -0.25em;
+    margin-right: -0.25em;
+    padding: 0.25em;
     border: 1px solid var(--color-border-secondary);
     border-radius: 2px;
 }

src/templates/editor.html

···
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
     <link rel="stylesheet" href="{{ url_for('static', filename='inter.css') }}" />
     <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}" />
+    <script defer src="{{ url_for('static', filename='alpine.sort.3.15.0.min.js') }}"></script>
     <script defer src="{{ url_for('static', filename='alpine.3.15.0.min.js') }}"></script>
   </head>
   <body>
-    <div class="wrapper editor" x-data="{ links: {{ links }} }">
+    <div class="wrapper editor" x-data="{ links: {{ links }}, linksChanged: false }">
       <header>
         <h1>atlinks</h1>
         <span class="tagline">edit your profile & links</span>
···
           <input type="submit" value="save profile">
         </label>
       </form>
+      <!-- /editor/profile -->
 
       <h2>links</h2>
+      <template x-if="linksChanged">
+        <p>
+          <span class="alert">You have unsaved changes!</span>
+        </p>
+      </template>
       <noscript>
         JavaScript is needed for a better experience configuring the links.
       </noscript>
-      <form action="/editor/links" method="post">
+      <form action="/editor/links" method="post" @change="linksChanged = true" x-sort>
         <input type="submit" value="save links" />
 
-        <template x-for="(link, index) in links" :key="link.url">
-          <link-editor-item x-data="{ editing: false }">
+        <template x-for="(link, index) in links">
+          <link-editor-item x-data="{ editing: !link.url }" x-sort:item="link.url">
             <div x-show="!editing">
-
-              <link-item class="static" :style="'color: ' + link.color">
+              <link-item x-sort:handle class="static" :style="'color: ' + link.background">
                 <link-item-title x-text="link.title"></link-item-title>
-                <span class="detail" x-show="link.detail" x-text="link.detail"></span>
+                <link-item-detail x-show="link.detail" x-text="link.detail"></link-item-detail>
               </link-item>
-
               <link-editor-buttons>
                 <button type="button" @click="editing = true">edit</button>
-                <button type="button" @click="links.splice(index, 1)">delete</button>
-              </link-editor-buttons>
-              <link-editor-buttons>
-                <template x-if="index > 0">
-                  <button type="button" @click="links.splice(index - 1, 0, links.splice(index, 1)[0])">
-                    move up
-                  </button>
-                </template>
-                <template x-if="(index + 1) < links.length">
-                  <button type="button" @click="links.splice(index + 1, 0, links.splice(index, 1)[0])">
-                    move down
-                  </button>
-                </template>
+                <button type="button" @click="if (confirm('delete?')) links.splice(index, 1)">delete</button>
               </link-editor-buttons>
             </div>
             <div x-show="editing">
               <label>
                 <span>URL</span>
-                <input type="text" :name="'link' + index + '-url'" x-model="link.url" required />
+                <input type="text" name="link-url" x-model="link.url" required />
               </label>
               <label>
                 <span>Title</span>
-                <input type="text" :name="'link' + index + '-title'" x-model="link.title" required />
+                <input type="text" name="link-title" x-model="link.title" required />
               </label>
               <label>
                 <span>Subtitle</span>
-                <input type="text" x-bind:name="'link' + index + '-detail'" x-model="link.detail" />
+                <input type="text" name="link-detail" x-model="link.detail" />
               </label>
               <label>
-                <span>Color</span>
-                <input type="color" x-bind:name="'link' + index + '-color'" x-model="link.color" required />
+                <span>Background color</span>
+                <input type="color" name="link-background" x-model="link.background" required />
               </label>
               <button type="button" @click="editing = false">ok</button>
             </div>
           </link-editor-item>
         </template>
-        <label>
-          <input type="submit" value="save links" />
+
+        <label style="display: block; margin-top: 1em;">
+          <button type="button" @click="links.push({ background: '#fa0' })">add link</button>
+          <span class="caption">
+            It will be added to the bottom. You can then drag and drop it to reorder.
+          </span>
         </label>
+
+        <input type="submit" value="save links" />
       </form>
+      <!-- /editor/links -->
+      <footer>
+        <a href="/">home</a>
+      </footer>
     </div>
     <!-- .wrapper -->
   </body>

src/templates/login.html

···
           <span>app password</span>
           <input type="password" name="password" required />
         </label>
-        <label>
-          <input type="submit" value="log in" />
-        </label>
+        <input type="submit" value="log in" />
       </form>
       <footer>
         <a href="/">home</a>

src/templates/profile.html

···
       </header>
       <ul>
         {% for link in links %}
-        <li style="color: {{ link.color }}">
+        <li style="color: {{ link.background }}">
           <a href="{{ link.url }}">
             <link-item>
               <link-item-title>{{ link.title }}</link-item-title>
               {% if link.detail %}
-              <span class="detail">{{ link.detail }}</span>
+              <link-item-detail>{{ link.detail }}</link-item-detail>
               {% endif %}
             </link-item>
           </a>