{# UI Component Library - Reusable Jinja2 Macros #} {# Button Component #} {% macro button(text, variant='primary', icon=None, onclick=None, id=None, class='', disabled=False) %} {% endmacro %} {# Card Component #} {% macro card(title, subtitle=None, icon=None, class='', id=None) %}
{% if icon %}{{ icon }}{% endif %}

{{ title }}

{% if subtitle %}

{{ subtitle }}

{% endif %}
{{ caller() }}
{% endmacro %} {# Stats Card Component #} {% macro stats_card(title, stats=[], actions=[]) %}

{{ title }}

{% if stats %}
{% for stat in stats %}
{{ stat.label }}
{{ stat.value }}
{% if stat.unit %}
{{ stat.unit }}
{% endif %}
{% endfor %}
{% endif %} {% if actions %}
{% for action in actions %} {{ button(action.text, action.variant|default('secondary'), action.icon, action.onclick) }} {% endfor %}
{% endif %}
{% endmacro %} {# Form Input Component #} {% macro form_input(name, label, type='text', value='', placeholder='', description=None, required=False, id=None) %}
{% if description %}
{{ description }}
{% endif %}
{% endmacro %} {# Form Select Component #} {% macro form_select(name, label, options=[], value='', description=None, required=False, id=None) %}
{% if description %}
{{ description }}
{% endif %}
{% endmacro %} {# Form Textarea Component #} {% macro form_textarea(name, label, value='', placeholder='', description=None, rows=4, required=False, id=None) %}
{% if description %}
{{ description }}
{% endif %}
{% endmacro %} {# Toggle Switch Component #} {% macro toggle_switch(name, label, description=None, checked=False, id=None) %}
{{ label }}
{% if description %}
{{ description }}
{% endif %}
{% endmacro %} {# Alert/Toast Component #} {% macro alert(message, type='info', dismissible=True) %}
{% if type == 'success' %}✓{% elif type == 'error' %}⚠{% elif type == 'warning' %}⚠{% else %}ℹ{% endif %} {{ message }} {% if dismissible %} {% endif %}
{% endmacro %} {# Progress Bar Component #} {% macro progress_bar(value, max=100, label=None, color='primary', id=None) %}
{% if label %}
{{ label }}
{% endif %}
{{ value }} / {{ max }}
{% endmacro %} {# Modal Component #} {% macro modal(id, title, size='medium') %} {% endmacro %} {# Table Component #} {% macro table(headers=[], rows=[], id=None, class='') %}
{% for header in headers %} {% endfor %} {% for row in rows %} {% for cell in row %} {% endfor %} {% endfor %}
{{ header }}
{{ cell }}
{% endmacro %} {# Empty State Component #} {% macro empty_state(icon='📭', title='No Data', message='', action=None) %}
{{ icon }}

{{ title }}

{% if message %}

{{ message }}

{% endif %} {% if action %}
{{ button(action.text, action.variant|default('primary'), action.icon, action.onclick) }}
{% endif %}
{% endmacro %} {# Loading Spinner Component #} {% macro loading_spinner(text='Loading...', size='medium') %}
{% if text %}
{{ text }}
{% endif %}
{% endmacro %} {# Badge Component #} {% macro badge(text, variant='default', size='medium') %} {{ text }} {% endmacro %} {# Navigation Tab Component #} {% macro nav_tabs(tabs=[], active_tab=None) %} {% endmacro %}