---
// Port of preview/pages/sortable.html (layout: default, page-libs: [sortablejs]).
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
---

<DefaultLayout title="Sortable" pageHeader="SortableJS" pageMenu="plugins.sortable" pageLibs={['sortablejs']}>
	<div class="row row-cards">
		<div class="col-md-6">
			<div class="card">
				<div class="card-header">
					<h3 class="card-title">Podstawowe użycie</h3>
				</div>
				<div class="card-body">
					<ul class="list-group" data-sortable='{"animation":150}'>
						<li class="list-group-item">Element A</li>
						<li class="list-group-item">Element B</li>
						<li class="list-group-item">Element C</li>
						<li class="list-group-item">Element D</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="col-md-6">
			<div class="card">
				<div class="card-header">
					<h3 class="card-title">Dwie listy z przenoszeniem</h3>
				</div>
				<div class="card-body">
					<div class="row g-3">
						<div class="col-sm-6">
							<ul class="list-group" data-sortable='{"group":"shared","animation":150}'>
								<li class="list-group-item">Item 1</li>
								<li class="list-group-item">Item 2</li>
								<li class="list-group-item">Item 3</li>
							</ul>
						</div>
						<div class="col-sm-6">
							<ul class="list-group" data-sortable='{"group":"shared","animation":150}'>
								<li class="list-group-item">Item A</li>
								<li class="list-group-item">Item B</li>
								<li class="list-group-item">Item C</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</DefaultLayout>