{#
    Admin area macros for reusable components.
#}

{#
    Modal dialog macro.

    Parameters:
        id: Modal element ID (without -modal suffix)
        title: Modal title (should be wrapped in translate block by caller)
        action_text: Text for the action button (optional - if omitted, no action button shown)
        action_handler: JavaScript function to call on action button click (optional)
        dialog_class: Additional classes for modal-dialog (optional, e.g., "modal-dialog-scrollable")
        content_class: Additional classes for modal-content (optional)
        footer_class: Additional classes for modal-footer (optional)

    Usage:
        {% call modal("example", title=_("Example Title"), action_text=_("Save"), action_handler="saveExample()") %}
            <p>Modal body content here</p>
        {% endcall %}
#}
{% macro modal(_, id, title, action_text=None, action_handler=None, dialog_class="", content_class="", footer_class="") %}
<div class="modal fade" id="{{ id }}-modal" tabindex="-1" aria-labelledby="{{ id }}-modalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered {{ dialog_class }}">
        <div class="modal-content {{ content_class }}">
            <div class="modal-header">
                <h5 class="modal-title" id="{{ id }}-modalLabel">
                    {{ title }}
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                {{ caller() }}
            </div>
            <div class="modal-footer {{ footer_class }}">
                <button type="button" class="btn btn-outline-danger" data-bs-dismiss="modal">
                    {{ _("Close") }}
                </button>
                {% if action_text and action_handler %}
                <button type="button" class="btn btn-danger" onclick="{{ action_handler }}">
                    {{ action_text }}
                </button>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endmacro %}

{#
    Player count display - shows "You have selected X player(s)" message.
    Uses Alpine.js store for reactive updates.
#}
{% macro player_count(_) %}
<p>
    {{ _("You have selected") }}
    <b><span x-text="$store.session.selectedCount"></span>
    {{ _("player(s)") }}</b>.
</p>
{% endmacro %}

{#
    JSON-like input textarea. Values are parsed by callers with
    uproot.looseJSONtoJSON() when JavaScript-expression input is allowed.
#}
{% macro json_input(_, id, label, rows=10, value="", help_text=None, placeholder="JSON") %}
<div class="mb-3">
    <label class="form-label" for="{{ id }}">{{ label }}</label>
    <textarea
        class="form-control h-auto font-monospace"
        id="{{ id }}"
        rows="{{ rows }}"
        placeholder="{{ placeholder }}"
    >{{ value }}</textarea>
</div>
{% if help_text %}
<small class="d-block form-text">
    {{ help_text }}
</small>
{% endif %}
{% endmacro %}