{# Reusable guidance block rendering macro.
   Renders a GuidanceBlock with appropriate styling per BlockKind.
   Used by IPI, CXP, and RXP playbook tabs. #}

{% macro render_guidance_block(block) %}
<div class="divider"></div>
<section class="guidance-block mb-6">
    <h4 class="text-sm font-semibold uppercase tracking-wider text-base-content/60 mb-3">{{ block.label }}</h4>

    {% if block.kind == "inventory" %}
    {# Inventory: render metadata.rows as a table, items as a note below #}
        {% if block.metadata and block.metadata.rows %}
    <div class="overflow-x-auto">
        <table class="table table-xs">
            <thead>
                <tr>
                    {% for col in block.metadata.rows[0].keys() %}
                    <th>{{ col }}</th>
                    {% endfor %}
                </tr>
            </thead>
            <tbody>
                {% for row in block.metadata.rows %}
                <tr>
                    {% for val in row.values() %}
                    <td>{{ val }}</td>
                    {% endfor %}
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
        {% endif %}
        {% if block.items and not (block.metadata and block.metadata.rows) %}
    <p class="text-xs text-base-content/50 mt-2">
            {% for item in block.items %}
        {{ item }}{% if not loop.last %}<br>{% endif %}
            {% endfor %}
    </p>
        {% endif %}

    {% elif block.kind == "trigger_prompts" %}
    {# Trigger prompts: profile-tabbed or default textarea #}
        {% set profiles = [] %}
        {% if block.metadata %}
            {% if block.metadata.get("anythingllm") is not none
                or block.metadata.get("open_webui") is not none
                or block.metadata.get("generic") is not none %}
                {% set profiles = ["anythingllm", "open_webui", "generic"] %}
            {% endif %}
        {% endif %}

        {% if profiles %}
    {# Tabbed profile selector #}
    <div x-data="{ activeProfile: '{{ profiles[0] }}' }">
        <div class="tabs tabs-boxed mb-3">
            {% for profile in profiles %}
                {% if block.metadata.get(profile) is not none %}
            <a class="tab"
               :class="{ 'tab-active': activeProfile === '{{ profile }}' }"
               @click="activeProfile = '{{ profile }}'">{{ profile }}</a>
                {% endif %}
            {% endfor %}
        </div>
            {% for profile in profiles %}
                {% if block.metadata.get(profile) is not none %}
        <div x-show="activeProfile === '{{ profile }}'" class="relative">
            <pre class="text-xs whitespace-pre-wrap break-words bg-base-300/30 p-3 rounded max-h-[300px] overflow-y-auto copy-target">{{ block.metadata[profile] }}</pre>
            <button class="btn btn-xs btn-ghost absolute top-1 right-1"
                    onclick="navigator.clipboard.writeText(this.parentElement.querySelector('.copy-target').textContent)">Copy</button>
        </div>
                {% endif %}
            {% endfor %}
    </div>
        {% elif block.metadata.get("default") is not none %}
    {# CXP-style: default prompt — render as read-only with copy.
       Editing is handled by the module-specific tab (cxp_tab.html)
       which has the save endpoint context. #}
    <div class="relative">
        <pre class="text-xs whitespace-pre-wrap break-words bg-base-300/30 p-3 rounded max-h-[300px] overflow-y-auto copy-target mb-2">{{ block.metadata.override or block.metadata["default"] }}</pre>
        <button class="btn btn-xs btn-ghost absolute top-1 right-1"
                onclick="navigator.clipboard.writeText(this.parentElement.querySelector('.copy-target').textContent)">Copy</button>
    </div>
        {% else %}
    {# Fallback: render items as prompt lines #}
            {% for item in block.items %}
    <div class="relative mb-2">
        <pre class="text-xs whitespace-pre-wrap break-words bg-base-300/30 p-3 rounded copy-target">{{ item }}</pre>
        <button class="btn btn-xs btn-ghost absolute top-1 right-1"
                onclick="navigator.clipboard.writeText(this.parentElement.querySelector('.copy-target').textContent)">Copy</button>
    </div>
            {% endfor %}
        {% endif %}

    {% elif block.kind == "deployment_steps" %}
    {# Deployment steps: ordered list #}
        {% if block.items %}
    <ol class="list-decimal list-inside space-y-1 text-sm">
            {% for item in block.items %}
        <li>{{ item }}</li>
            {% endfor %}
    </ol>
        {% endif %}

    {% elif block.kind == "monitoring" %}
    {# Monitoring: bulleted list with info styling #}
        {% if block.items %}
    <ul class="list-disc list-inside space-y-1 text-sm text-info">
            {% for item in block.items %}
        <li>{{ item }}</li>
            {% endfor %}
    </ul>
        {% endif %}

    {% elif block.kind == "interpretation" %}
    {# Interpretation: bulleted list with warning styling #}
        {% if block.items %}
    <ul class="list-disc list-inside space-y-1 text-sm text-warning">
            {% for item in block.items %}
        <li>{{ item }}</li>
            {% endfor %}
    </ul>
        {% endif %}

    {% else %}
    {# Factors / fallback: simple bulleted list #}
        {% if block.items %}
    <ul class="list-disc list-inside space-y-1 text-sm">
            {% for item in block.items %}
        <li>{{ item }}</li>
            {% endfor %}
    </ul>
        {% endif %}

    {% endif %}
</section>
{% endmacro %}