@page "/dropzone"

<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    Radzen Blazor DropZone
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
    The Blazor DropZone lets users drag and drop items between zones - for kanban boards and reordering.
</RadzenText>

<RadzenText TextStyle="TextStyle.Body1">
    Drag/Drop tasks between zones to update task status and order or in the same zone to reorder. 
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1">
    Moving tasks between <strong>"Not started"</strong> and <strong>"Completed"</strong> zones is disallowed using <code>CanDrop</code> callback.
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use <code>ItemSelector</code> callback to define which item in which zone will appear, <code>Drop</code> callback to customize the drop logic and 
    <code>ItemRender</code> callback to customize if the item can be dragged, appearance, etc.
</RadzenText>

<RadzenExample ComponentName="DropZone" Example="DropZoneConfig">
    <DropZoneConfig />
</RadzenExample>

<RadzenText Anchor="dropzone#can-drop-no-drop-styles" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Define can-drop and no-drop styles
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use the built-in <code>.rz-can-drop</code> and <code>.rz-no-drop</code> CSS classes to apply styles and differentiate the DropZones that allow dropping from those that do not. 
</RadzenText>
<RadzenExample ComponentName="DropZone" Example="DropZoneCanDropNoDropStyles">
    <DropZoneCanDropNoDropStyles />
</RadzenExample>

<RadzenText Anchor="dropzone#footer-template" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Define a Footer Template per Drop Zone
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
   Add a footer template to the dropzone to display items below the rendered items.
</RadzenText>
<RadzenExample ComponentName="DropZone" Example="DropZoneFooterTemplate">
    <DropZoneFooterTemplate />
</RadzenExample>
