{% extends "base.html" %}
{% block title_suffix %} - Generate Skill{% endblock %}

{% block content %}
<h1>Generate Skill</h1>

<div class="grid">
    <div>
        <form id="generate-form" hx-post="/generate" hx-target="#generate-result" hx-swap="innerHTML">
            <label>
                Module Name
                <input type="text" name="module" id="module-input"
                       placeholder="e.g., community.general.redis"
                       value="{{ request.query_params.get('module', '') }}"
                       required autofocus>
            </label>

            <fieldset>
                <legend>Target</legend>
                <label>
                    <input type="radio" name="target" value="project" checked>
                    Project (skills/)
                </label>
                {% for platform in platforms %}
                <label>
                    <input type="radio" name="target" value="{{ platform }}">
                    {{ platform | capitalize }}
                </label>
                {% endfor %}
                <label>
                    <input type="radio" name="target" value="custom">
                    Custom path
                </label>
                <input type="text" name="custom_path" placeholder="/path/to/skills/" style="margin-top: 0.5rem;">
            </fieldset>

            <div class="grid">
                <button type="button"
                        hx-get="/generate/preview"
                        hx-target="#preview-pane"
                        hx-swap="innerHTML"
                        hx-include="#module-input"
                        hx-indicator="#preview-spinner"
                        class="secondary">
                    Preview
                </button>
                <button type="submit">Generate</button>
            </div>
        </form>

        <div id="generate-result"></div>
    </div>

    <div>
        <h3>Preview <span id="preview-spinner" class="htmx-indicator" aria-busy="true"></span></h3>
        <div id="preview-pane">
            <p><small>Click "Preview" to see the SKILL.md that will be generated.</small></p>
        </div>
    </div>
</div>
{% endblock %}