142 lines
5.0 KiB
HTML
142 lines
5.0 KiB
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 }} - UdeS team manager{% 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') }}">×</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 %} |