mtg_python_deckbuilder/code/web/templates/partials/_macros.html

44 lines
1.9 KiB
HTML
Raw Normal View History

{# Reusable Jinja macros for UI elements #}
{#
Component Library Imports
To use components in your templates:
{% from 'partials/_macros.html' import component_name %}
Or import specific component libraries:
{% from 'partials/_buttons.html' import button, icon_button %}
{% from 'partials/_modals.html' import modal, simple_modal %}
{% from 'partials/_card_display.html' import card_thumb, card_grid %}
{% from 'partials/_forms.html' import text_input, select, checkbox %}
{% from 'partials/_panels.html' import panel, stat_panel %}
#}
{% macro lock_button(name, locked=False, from_list=False, target_selector='closest .lock-box') -%}
{# Emits a lock/unlock button with correct hx-vals and aria state. #}
<button type="button" class="btn-lock"
title="{{ 'Unlock this card (kept across reruns)' if locked else 'Lock this card (keep across reruns)' }}"
aria-pressed="{{ 'true' if locked else 'false' }}"
data-locked="{{ '1' if locked else '0' }}"
hx-post="/build/lock" hx-target="{{ target_selector }}" hx-swap="innerHTML"
hx-vals='{"name": "{{ name }}", "locked": "{{ '0' if locked else '1' }}"{% if from_list %}, "from_list": "1"{% endif %}}'>
{{ '🔒 Unlock' if locked else '🔓 Lock' }}
</button>
{%- endmacro %}
{% macro color_identity(colors, is_colorless=False, aria_label='', title_text='') -%}
<div class="color-identity" role="img"
aria-label="{{ aria_label }}"
data-colorless="{{ '1' if is_colorless or not (colors and colors|length) else '0' }}"
{% if title_text %}title="{{ title_text }}"{% endif %}>
{% if colors and colors|length %}
{% for color in colors %}
<span class="mana mana-{{ color }}" aria-hidden="true"></span>
{% endfor %}
{% else %}
<span class="mana mana-C" aria-hidden="true"></span>
{% endif %}
<span class="sr-only">{{ aria_label }}</span>
</div>
{%- endmacro %}