{# ============================================================================
move.gl | Draggable Demo
============================================================================
Interactive demo for the draggable component
============================================================================ #}
{%- extends "_base.html.jinja" -%}

{%- set title = "Draggable Demo — move.gl" -%}
{%- set description = "Draggable Component Demo — Make any element draggable with mouse and touch support." -%}
{%- set current_demo = "draggable" -%}

{%- block header %}
<header class="page-header">
    <div class="page-header__badge">TypeScript Component</div>
    <h1 class="page-header__title">Draggable</h1>
    <p class="page-header__description">
        Make any HTML element draggable with full mouse and touch support.
        Perfect for creating interactive interfaces, drag-and-drop features, and movable widgets.
    </p>
</header>
{%- endblock -%}

{%- block content %}
<section class="section">
    <h2 class="section__title">Interactive Demo</h2>
    <p class="section__description">Try dragging the boxes around the container. Works with both mouse and touch!</p>

    <div class="drag-container" id="dragContainer">
        <div class="draggable-box" id="box1" style="top: 50px; left: 50px;">Drag Me!</div>
        <div class="draggable-box draggable-box--pink" id="box2" style="top: 50px; right: 50px;">Me Too!</div>
        <div class="draggable-box draggable-box--cyan" id="box3"
            style="bottom: 50px; left: 50%; transform: translateX(-50%); width: 150px; height: 80px;">And Me!</div>
    </div>

    <div class="controls">
        <button class="btn btn-primary" onclick="resetPositions()">Reset Positions</button>
        <button class="btn btn-secondary" onclick="clearLog()">Clear Log</button>
    </div>

    <div class="log-output" id="logOutput">
        <div class="log-entry"><span class="timestamp">[--:--:--]</span> Drag events will appear here...</div>
    </div>
</section>

<section class="section">
    <h2 class="section__title">Features</h2>
    <div class="feature-grid">
        <div class="feature-card">
            <h4>🖱️ Mouse Support</h4>
            <p>Full mouse drag support with mousedown, mousemove, and mouseup events.</p>
        </div>
        <div class="feature-card">
            <h4>📱 Touch Support</h4>
            <p>Native touch event handling for mobile devices and tablets.</p>
        </div>
        <div class="feature-card">
            <h4>📦 Boundary Constraints</h4>
            <p>Elements are constrained within their parent container bounds.</p>
        </div>
        <div class="feature-card">
            <h4>🎯 Event Callbacks</h4>
            <p>Hook into drag events with onDragStart, onDrag, and onDragEnd callbacks.</p>
        </div>
    </div>
</section>

<section class="section">
    <h2 class="section__title">Usage</h2>

    <h3>Basic Usage</h3>
    <div class="code-block">
        <code><span class="keyword">import</span> { Draggable } <span class="keyword">from</span> <span class="string">'move.gl'</span>;

<span class="comment">// Make an element draggable</span>
<span class="keyword">const</span> draggable = <span class="keyword">new</span> <span class="function">Draggable</span>(<span class="string">'myElement'</span>);

<span class="comment">// Clean up when done</span>
draggable.<span class="function">destroy</span>();</code>
    </div>

    <h3>HTML Structure</h3>
    <div class="code-block">
        <code><span class="comment">&lt;!-- Parent container defines boundaries --&gt;</span>
&lt;<span class="keyword">div</span> <span class="string">class</span>=<span class="string">"container"</span>&gt;
    &lt;<span class="keyword">div</span> <span class="string">id</span>=<span class="string">"myElement"</span> <span class="string">class</span>=<span class="string">"draggable"</span>&gt;
        Drag me!
    &lt;/<span class="keyword">div</span>&gt;
&lt;/<span class="keyword">div</span>&gt;</code>
    </div>
</section>

<section class="section">
    <h2 class="section__title">API Reference</h2>

    <h3>Constructor</h3>
    <div class="code-block">
        <code><span class="keyword">new</span> <span class="function">Draggable</span>(elementId: <span class="keyword">string</span>)</code>
    </div>

    <h3>Methods</h3>
    <table class="api-table">
        <tr>
            <th>Method</th>
            <th>Description</th>
        </tr>
        <tr>
            <td><code>destroy()</code></td>
            <td>Removes all event listeners and cleans up the instance</td>
        </tr>
    </table>
</section>

{%- include "partials/_demo_links.html.jinja" %}
{%- endblock -%}