{% macro render_field(field, label_class="", input_class="", help_text="") %}
    <div class="mb-3">
        {% if field.label %}
            {{ field.label(class=label_class + " form-label") }}
        {% endif %}
        
        {% if field.type == 'FileField' or field.type == 'MultipleFileField' %}
            {{ field(class=input_class + " form-control") }}
        {% elif field.type == 'SelectField' %}
            {{ field(class=input_class + " form-select") }}
        {% elif field.type == 'TextAreaField' %}
            {{ field(class=input_class + " form-control", rows=field.render_kw.get('rows', 3)) }}
        {% elif field.type == 'BooleanField' %}
            <div class="form-check">
                {{ field(class="form-check-input") }}
                {{ field.label(class="form-check-label") }}
            </div>
        {% elif field.type == 'HiddenField' %}
            {{ field() }}
        {% else %}
            {{ field(class=input_class + " form-control") }}
        {% endif %}
        
        {% if help_text %}
            <div class="form-text">{{ help_text }}</div>
        {% endif %}
        
        {% if field.render_kw and field.render_kw.get('help') %}
            <div class="form-text">{{ field.render_kw.help }}</div>
        {% endif %}
        
        {% for error in field.errors %}
            <div class="invalid-feedback d-block">{{ error }}</div>
        {% endfor %}
    </div>
{% endmacro %}

{% macro render_pagination(pagination, endpoint) %}
    {% if pagination.pages > 1 %}
        <nav aria-label="Page navigation">
            <ul class="pagination justify-content-center">
                {% if pagination.has_prev %}
                    <li class="page-item">
                        <a class="page-link" href="{{ url_for(endpoint, page=pagination.prev_num) }}">
                            <i class="bi bi-chevron-left"></i>
                        </a>
                    </li>
                {% else %}
                    <li class="page-item disabled">
                        <span class="page-link"><i class="bi bi-chevron-left"></i></span>
                    </li>
                {% endif %}
                
                {% for page in pagination.iter_pages() %}
                    {% if page %}
                        {% if page != pagination.page %}
                            <li class="page-item">
                                <a class="page-link" href="{{ url_for(endpoint, page=page) }}">{{ page }}</a>
                            </li>
                        {% else %}
                            <li class="page-item active">
                                <span class="page-link">{{ page }}</span>
                            </li>
                        {% endif %}
                    {% else %}
                        <li class="page-item disabled">
                            <span class="page-link">…</span>
                        </li>
                    {% endif %}
                {% endfor %}
                
                {% if pagination.has_next %}
                    <li class="page-item">
                        <a class="page-link" href="{{ url_for(endpoint, page=pagination.next_num) }}">
                            <i class="bi bi-chevron-right"></i>
                        </a>
                    </li>
                {% else %}
                    <li class="page-item disabled">
                        <span class="page-link"><i class="bi bi-chevron-right"></i></span>
                    </li>
                {% endif %}
            </ul>
        </nav>
    {% endif %}
{% endmacro %}

{% macro render_job_status_badge(status) %}
    {% if status == 'done' %}
        <span class="badge bg-success status-badge">
            <i class="bi bi-check-circle me-1"></i>Completed
        </span>
    {% elif status == 'running' %}
        <span class="badge bg-primary status-badge">
            <i class="bi bi-arrow-clockwise me-1"></i>Running
        </span>
    {% elif status == 'error' %}
        <span class="badge bg-danger status-badge">
            <i class="bi bi-exclamation-triangle me-1"></i>Failed
        </span>
    {% elif status == 'queued' %}
        <span class="badge bg-secondary status-badge">
            <i class="bi bi-clock me-1"></i>Queued
        </span>
    {% else %}
        <span class="badge bg-light text-dark status-badge">{{ status|title }}</span>
    {% endif %}
{% endmacro %}

{% macro render_file_size(size_bytes) %}
    {% if size_bytes %}
        {% set size = size_bytes %}
        {% if size < 1024 %}
            {{ "%.0f"|format(size) }} B
        {% elif size < 1024 * 1024 %}
            {{ "%.1f"|format(size / 1024) }} KB
        {% elif size < 1024 * 1024 * 1024 %}
            {{ "%.1f"|format(size / (1024 * 1024)) }} MB
        {% else %}
            {{ "%.1f"|format(size / (1024 * 1024 * 1024)) }} GB
        {% endif %}
    {% else %}
        Unknown
    {% endif %}
{% endmacro %}

{% macro render_job_type_icon(job_type) %}
    {% if job_type == 'docgen' %}
        <i class="bi bi-file-earmark-text text-primary"></i>
    {% elif job_type == 'merge' %}
        <i class="bi bi-files text-info"></i>
    {% elif job_type == 'compress' %}
        <i class="bi bi-arrow-down-circle text-warning"></i>
    {% else %}
        <i class="bi bi-gear text-secondary"></i>
    {% endif %}
{% endmacro %}

{% macro render_empty_state(title, description, icon="bi-inbox", action_text="", action_url="") %}
    <div class="empty-state">
        <i class="bi {{ icon }}"></i>
        <h4>{{ title }}</h4>
        <p class="text-muted">{{ description }}</p>
        {% if action_text and action_url %}
            <a href="{{ action_url }}" class="btn btn-primary">
                {{ action_text }}
            </a>
        {% endif %}
    </div>
{% endmacro %}

{% macro render_card_header(title, subtitle="", actions="") %}
    <div class="card-header bg-white border-bottom">
        <div class="d-flex justify-content-between align-items-center">
            <div>
                <h5 class="card-title mb-0">{{ title }}</h5>
                {% if subtitle %}
                    <small class="text-muted">{{ subtitle }}</small>
                {% endif %}
            </div>
            {% if actions %}
                <div class="card-actions">
                    {{ actions }}
                </div>
            {% endif %}
        </div>
    </div>
{% endmacro %}

{% macro render_progress_bar(percentage, label="", variant="primary") %}
    <div class="progress mb-2" style="height: 8px;">
        <div class="progress-bar bg-{{ variant }}" 
             role="progressbar" 
             style="width: {{ percentage }}%"
             aria-valuenow="{{ percentage }}" 
             aria-valuemin="0" 
             aria-valuemax="100">
        </div>
    </div>
    {% if label %}
        <small class="text-muted">{{ label }}</small>
    {% endif %}
{% endmacro %}

{% macro render_stat_card(title, value, icon, color="primary", subtitle="") %}
    <div class="card text-center h-100">
        <div class="card-body">
            <div class="text-{{ color }} mb-2">
                <i class="bi {{ icon }}" style="font-size: 2rem;"></i>
            </div>
            <h3 class="card-title">{{ value }}</h3>
            <p class="card-text text-muted">{{ title }}</p>
            {% if subtitle %}
                <small class="text-muted">{{ subtitle }}</small>
            {% endif %}
        </div>
    </div>
{% endmacro %}

{% macro render_breadcrumb(items) %}
    <nav aria-label="breadcrumb" class="mb-4">
        <ol class="breadcrumb">
            {% for item in items %}
                {% if loop.last %}
                    <li class="breadcrumb-item active" aria-current="page">{{ item.title }}</li>
                {% else %}
                    <li class="breadcrumb-item">
                        {% if item.url %}
                            <a href="{{ item.url }}" class="text-decoration-none">{{ item.title }}</a>
                        {% else %}
                            {{ item.title }}
                        {% endif %}
                    </li>
                {% endif %}
            {% endfor %}
        </ol>
    </nav>
{% endmacro %}

{% macro render_loading_spinner(text="Loading...") %}
    <div class="d-flex justify-content-center align-items-center p-4">
        <div class="spinner-border text-primary me-2" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
        <span>{{ text }}</span>
    </div>
{% endmacro %}

{% macro render_confirmation_modal(id, title, body, confirm_text="Confirm", cancel_text="Cancel", confirm_class="btn-danger") %}
    <div class="modal fade" id="{{ id }}" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">{{ title }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    {{ body }}
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ cancel_text }}</button>
                    <button type="button" class="btn {{ confirm_class }}" id="{{ id }}-confirm">{{ confirm_text }}</button>
                </div>
            </div>
        </div>
    </div>
{% endmacro %}