team-tryouts/app/templates/layouts/macros.html

{# 
   Jinja Macros for Team Tryouts Application
   
   This file contains reusable HTML components to reduce code duplication
   across templates. Import with {% import 'layouts/macros.html' as macros %}
#}

{# Page Header Macro - renders title and breadcrumb #}
{% macro page_header(title, breadcrumb) %}
    {% block title %}{{ title }} - TryoutPro{% endblock %}
    {% block page_title %}{{ title }}{% endblock %}
    {% block breadcrumb %}<span class="breadcrumb">{{ breadcrumb }}</span>{% endblock %}
{% endmacro %}

{# Card Header Macro - renders card with optional actions #}
{% macro card_header(title, icon_class, actions=None) %}
<div class="card-header">
    <h3><i class="{{ icon_class }}"></i> {{ title }}</h3>
    {% if actions %}
    <div class="card-actions">{{ actions }}</div>
    {% endif %}
</div>
{% endmacro %}

{# Stat Card Macro - renders statistics card #}
{% macro stat_card(value, label, icon_class, bg_class) %}
<div class="stat-card">
    <div class="stat-icon {{ bg_class }}">
        <i class="{{ icon_class }}"></i>
    </div>
    <div class="stat-info">
        <h3>{{ value }}</h3>
        <p>{{ label }}</p>
    </div>
</div>
{% endmacro %}

{# Badge Macro - renders status/role badges with appropriate styling #}
{% macro badge(text, type='default') %}
<span class="badge badge-{{ type }}">{{ text }}</span>
{% endmacro %}

{# User Avatar Macro - renders user avatar with name #}
{% macro user_avatar(user, size='sm') %}
<div class="user-mini">
<div class="avatar-{{ size }}">{{ user.username[:2] | upper }}</div>
<span>{{ user.username }}</span>
</div>
{% endmacro %}

{# Form Field Macro - renders labeled form input #}
{% macro form_field(label, type, name, value='', placeholder='', required=false, extra_classes='') %}
<div class="form-group">
    <label for="{{ name }}">{{ label }}</label>
    <input type="{{ type }}" id="{{ name }}" name="{{ name }}" value="{{ value }}" placeholder="{{ placeholder }}" {% if required %}required{% endif %} class="{{ extra_classes }}">
</div>
{% endmacro %}

{# Form Row Macro - renders a row of form fields #}
{% macro form_row(fields) %}
<div class="form-row">
    {% for field in fields %}
    <div class="form-group {{ field.col_class | default('col-6') }}">
        <label for="{{ field.name }}">{{ field.label }}</label>
        {% if field.type == 'select' %}
        <select id="{{ field.name }}" name="{{ field.name }}" {% if field.required %}required{% endif %}>
            {% for option in field.options %}
            <option value="{{ option.value }}" {% if option.selected %}selected{% endif %}>{{ option.label }}</option>
            {% endfor %}
        </select>
        {% else %}
        <input type="{{ field.type }}" id="{{ field.name }}" name="{{ field.name }}" value="{{ field.value }}" placeholder="{{ field.placeholder }}" {% if field.required %}required{% endif %}>
        {% endif %}
    </div>
    {% endfor %}
</div>
{% endmacro %}

{# Table Macro - renders a table with headers and optional empty state #}
{% macro table(headers, rows, empty_message='No records found') %}
<div class="table-container">
    <table class="table">
        <thead>
            <tr>
                {% for header in headers %}
                <th>{{ header }}</th>
                {% endfor %}
            </tr>
        </thead>
        <tbody>
            {% if rows %}
                {{ rows }}
            {% else %}
                <tr>
                    <td colspan="{{ headers | length }}" class="text-center">
                        <div class="empty-state">
                            <i class="fas fa-info-circle"></i>
                            <h3>{{ empty_message }}</h3>
                        </div>
                    </td>
                </tr>
            {% endif %}
        </tbody>
    </table>
</div>
{% endmacro %}

{# Modal Macro - renders a modal dialog #}
{% macro modal(id, title, content, footer_buttons=None) %}
<div id="{{ id }}" class="modal hidden">
    <div class="modal-backdrop" data-action="hide-modal" data-modal-id="{{ id }}"></div>
    <div class="modal-content">
        <div class="modal-header">
            <h3>{{ title }}</h3>
            <button class="modal-close" data-action="hide-modal" data-modal-id="{{ id }}"
                    aria-label="{{ _('Close') }}">&times;</button>
        </div>
        <div class="modal-body">
            {{ content }}
            {% if footer_buttons %}
            <div class="form-actions mt-3">{{ footer_buttons }}</div>
            {% endif %}
        </div>
    </div>
</div>
{% endmacro %}

{# Detail Item Macro - renders a key-value pair in detail view #}
{% macro detail_item(label, value) %}
<div class="detail-item">
    <span class="detail-label">{{ label }}</span>
    <span class="detail-value">{{ value }}</span>
</div>
{% endmacro %}

{# Action Button Macro - renders a button link #}
{% macro action_button(url, text, icon, style='outline', size='sm') %}
<a href="{{ url }}" class="btn btn-{{ size }} btn-{{ style }}">
    {% if icon %}<i class="{{ icon }}"></i>{% endif %}
    {{ text }}
</a>
{% endmacro %}