{# Reusable component macros using Tailwind CSS #}

{# Status badge component #}
{% macro status_badge(status) %}
{% set status_classes = {
    'completed': 'bg-status-success/10 text-status-success border border-status-success/30',
    'running': 'bg-status-running/10 text-status-running border border-status-running/30',
    'failed': 'bg-status-error/10 text-status-error border border-status-error/30',
    'pending': 'bg-status-pending/10 text-status-pending border border-status-pending/30'
} %}
<span class="px-2.5 py-1 rounded text-xs font-medium {{ status_classes.get(status|lower, 'bg-status-pending/10 text-status-pending border border-status-pending/30') }}">
    {{ status|capitalize }}
</span>
{% endmacro %}

{# Execution card for sidebar list #}
{% macro execution_card(execution, is_selected=false) %}
<div
    class="flex gap-3 p-3 mb-1 bg-white border border-gray-200 rounded-lg cursor-pointer transition-smooth hover:bg-gray-50 hover:border-gray-300 {{ 'bg-blue-50 border-blue-400' if is_selected else '' }}"
    data-execution-id="{{ execution.execution_id }}"
    @click="selectExecution('{{ execution.execution_id }}')"
>
    <input
        type="checkbox"
        class="flex-shrink-0 w-4 h-4 mt-0.5 cursor-pointer"
        data-execution-id="{{ execution.execution_id }}"
        @click.stop
        @change="updateDeleteButton()"
        x-model="selectedExecutions"
        value="{{ execution.execution_id }}"
    >
    <div class="flex-1 min-w-0">
        <div class="flex justify-between items-center gap-2 mb-1">
            <span class="font-semibold text-sm text-gray-900 truncate">{{ execution.workflow_name }}</span>
            {{ status_badge(execution.status) }}
        </div>
        <div class="flex gap-2.5 text-xs text-gray-500 font-mono">
            <span>{{ execution.execution_id[:8] }}...</span>
            {% if execution.started_at %}
            <span>{{ execution.started_at.split(' ')[1][:5] if ' ' in execution.started_at else execution.started_at }}</span>
            {% endif %}
        </div>
    </div>
</div>
{% endmacro %}

{# Step card for execution detail view #}
{% macro step_card(step, index) %}
<div class="border rounded-lg p-4 {{ 'border-red-300 bg-red-50' if step.error else 'border-gray-200 bg-gray-50' }}">
    <div class="flex items-center gap-3 mb-3">
        <div class="flex-shrink-0 w-7 h-7 rounded-full flex items-center justify-center text-white text-sm font-semibold {{ 'bg-red-600' if step.error else 'bg-blue-600' }}">
            {{ index + 1 }}
        </div>
        <div class="flex-1">
            <h4 class="text-sm font-semibold text-gray-900">
                {{ step.step_name }} {% if step.error %}❌{% endif %}
            </h4>
            <span class="text-xs text-gray-500">{{ step.timestamp }}</span>
        </div>
        {% if not step.error %}
        <button
            @click="timeTravel('{{ step.workflow_name }}', '{{ step.step_name }}')"
            class="flex-shrink-0 px-3 py-1.5 bg-green-600 text-white text-xs font-medium rounded hover:bg-green-700 transition-smooth whitespace-nowrap"
        >
            ⏮️ Resume
        </button>
        {% endif %}
    </div>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
        <div>
            <h5 class="text-xs font-semibold text-gray-600 mb-1.5">Inputs:</h5>
            <pre class="bg-white p-2.5 rounded border border-gray-200 text-xs font-mono overflow-x-auto text-gray-700">{{ step.inputs | tojson(indent=2) }}</pre>
        </div>
        <div>
            <h5 class="text-xs font-semibold text-gray-600 mb-1.5">Outputs:</h5>
            {% if step.error %}
            <div class="bg-red-100 p-2.5 rounded border-l-4 border-red-600 text-xs text-red-800">
                <strong>❌ Error:</strong> {{ step.error }}
            </div>
            {% else %}
            <pre class="bg-white p-2.5 rounded border border-gray-200 text-xs font-mono overflow-x-auto text-gray-700">{{ step.outputs | tojson(indent=2) }}</pre>
            {% endif %}
        </div>
    </div>
</div>
{% endmacro %}

{# Empty state component #}
{% macro empty_state(title, description, link_text="", link_url="") %}
<div class="flex flex-col items-center justify-center h-full text-center text-terminal-text-dim p-10">
    <h3 class="text-lg font-semibold text-terminal-text mb-2">{{ title }}</h3>
    <p class="text-sm">{{ description }}</p>
    {% if link_text and link_url %}
    <a href="{{ link_url }}" class="mt-4 text-sm text-terminal-text hover:text-terminal-text-bright transition-smooth">{{ link_text }}</a>
    {% endif %}
</div>
{% endmacro %}

{# Code block component #}
{% macro code_block(content, size='normal') %}
{% set size_classes = {
    'small': 'text-xs p-2.5',
    'normal': 'text-sm p-4'
} %}
<pre class="bg-terminal-bg-light rounded border-elegant overflow-x-auto font-mono text-terminal-text-bright {{ size_classes.get(size, size_classes['normal']) }}">{{ content }}</pre>
{% endmacro %}